Skip to content

Commit ce94baf

Browse files
scottwestoverscottwestover
authored
Merge pull request #4 from devshareacademy/keyboard-events
added keyboard event example
2 parents 4b81c69 + 0b0d50c commit ce94baf

File tree

29 files changed

+2452
-0
lines changed

29 files changed

+2452
-0
lines changed

‎examples/rc5/keyboard-events/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/dist
2+
/node_modules
3+
yarn-error.log
4+
.DS_Store

‎examples/rc5/keyboard-events/.vscode/settings.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"eslint.format.enable": true,
3+
"eslint.options": {
4+
"overrideConfigFile": "config/.eslintrc"
5+
},
6+
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
7+
"editor.codeActionsOnSave": {
8+
"source.fixAll.eslint": "explicit"
9+
},
10+
"cSpell.words": [
11+
"devshareacademy",
12+
"keycombomatch",
13+
"mediump",
14+
"posterized",
15+
"tweakpane",
16+
"wasd"
17+
]
18+
}

‎examples/rc5/keyboard-events/README.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Phaser 4 TypeScript - Keyboard Events Example
2+
3+
Contains example code of how to use keyboard events in Phaser 4. This is the sample code that I shared in my tutorial video hosted on YouTube here:
4+
5+
Coming soon...
6+
7+
You can see a live demo of the example here: <a href="https://devshareacademy.github.io/phaser-4-typescript-games-and-examples/examples/rc5/keyboard-events/index.html" target="_blank">Keyboard Events</a>
8+
9+
![Keyboard events demo in Phaser 4](./docs/example.gif?raw=true)
10+
11+
## Local Development
12+
13+
### Requirements
14+
15+
<a href="https://nodejs.org" target="_blank">Node.js</a> and <a href="https://pnpm.io/" target="_blank">PnPm</a> are required to install dependencies and run scripts via `pnpm`.
16+
17+
<a href="https://vitejs.dev/" target="_blank">Vite</a> is required to bundle and serve the web application. This is included as part of the projects dev dependencies.
18+
19+
### Available Commands
20+
21+
| Command | Description |
22+
|---------|-------------|
23+
| `pnpm install --frozen-lockfile` | Install project dependencies |
24+
| `pnpm start` | Build project and open web server running project |
25+
| `pnpm build` | Builds code bundle for production |
26+
| `pnpm lint` | Uses ESLint to lint code |
27+
28+
### Writing Code
29+
30+
After cloning the repo, run `pnpm install --frozen-lockfile` from your project directory. Then, you can start the local development
31+
server by running `pnpm start`.
32+
33+
After starting the development server with `pnpm start`, you can edit any files in the `src` folder
34+
and parcel will automatically recompile and reload your server (available at `http://localhost:8080`
35+
by default).
36+
37+
### Deploying Code
38+
39+
After you run the `pnpm build` command, your code will be built into a single bundle located at
40+
`dist/*` along with any other assets you project depended.
41+
42+
If you put the contents of the `dist` folder in a publicly-accessible location (say something like `http://myserver.com`),
43+
you should be able to open `http://myserver.com/index.html` and play your game.
44+
45+
### Static Assets
46+
47+
Any static assets like images or audio files should be placed in the `public` folder. It'll then be served at `http://localhost:8080/path-to-file-your-file/file-name.file-type`.
48+
49+
## Credit
50+
51+
The assets used in this demo were created by <a href="https://beamedeighth.itch.io/simplekeys-animated-pixel-keyboard-keys" target="_blank">beamedeighth</a>.

‎examples/rc5/keyboard-events/config/.eslintrc‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"root": true,
3+
"extends": "@devshareacademy/eslint-config",
4+
"parserOptions": {
5+
"project": "./tsconfig.json"
6+
},
7+
"rules": {},
8+
"ignorePatterns": ["node_modules", "dist"]
9+
}

‎examples/rc5/keyboard-events/config/vite.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineConfig } from 'vite';
2+
3+
export default defineConfig({
4+
base: "./",
5+
build: {
6+
rollupOptions: {
7+
output: {
8+
entryFileNames: 'assets/js/[name]-[hash].js',
9+
},
10+
},
11+
},
12+
});

‎examples/rc5/keyboard-events/docs/example.gif‎

491 KB
Loading

‎examples/rc5/keyboard-events/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<title>Phaser 4 Keyboard Events</title>
6+
<style>
7+
html,
8+
body,
9+
.container {
10+
margin: 0px;
11+
height: 100vh;
12+
width: 100vw;
13+
overflow: hidden;
14+
background: #212123;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div class="container" id="game-container"></div>
20+
<script type="module" src="/src/main.ts"></script>
21+
</body>
22+
</html>

‎examples/rc5/keyboard-events/package.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "@devshareacademy/phaser-4-keyboard-events-example",
3+
"version": "1.0.0",
4+
"description": "Contains example code of using keyboard events in Phaser 4.",
5+
"scripts": {
6+
"start": "vite --config config/vite.config.js",
7+
"build": "tsc && vite build --config config/vite.config.js",
8+
"serve": "vite preview --config config/vite.config.js",
9+
"lint": "eslint ./src --ext .ts,.tsx --config ./config/.eslintrc"
10+
},
11+
"author": "scottwestover",
12+
"license": "MIT",
13+
"repository": {
14+
"type": "git",
15+
"url": "https://github.com/devshareacademy/phaser-4-typescript-games-and-examples.git"
16+
},
17+
"homepage": "https://github.com/devshareacademy/phaser-4-typescript-games-and-examples",
18+
"devDependencies": {
19+
"@devshareacademy/eslint-config": "0.0.18",
20+
"@devshareacademy/prettier-config": "0.0.6",
21+
"@devshareacademy/tsconfig": "0.0.3",
22+
"@typescript-eslint/eslint-plugin": "7.1.0",
23+
"@typescript-eslint/parser": "7.1.0",
24+
"eslint": "8.57.0",
25+
"eslint-config-prettier": "9.1.0",
26+
"eslint-plugin-prettier": "5.1.3",
27+
"prettier": "3.2.5",
28+
"typescript": "5.3.3",
29+
"vite": "5.1.4"
30+
},
31+
"dependencies": {
32+
"phaser": "4.0.0-rc.5"
33+
},
34+
"resolutions": {},
35+
"prettier": "@devshareacademy/prettier-config",
36+
"volta": {
37+
"node": "20.11.1",
38+
"yarn": "1.22.11",
39+
"pnpm": "8.15.4"
40+
},
41+
"engines": {
42+
"node": ">=20.11.0",
43+
"npm": ">=10.2.0",
44+
"pnpm": ">=8.15.0"
45+
}
46+
}

0 commit comments

Comments
 (0)