added example for loading animation config from json file

Signed-off-by: Scott Westover <[email protected]>
devshareacademy · Jul 3, 2024 · 8d0ede9 · 8d0ede9
1 parent a2f7778
commit 8d0ede9
Show file tree

Hide file tree

Showing 16 changed files with 1,981 additions and 0 deletions.
diff --git a/examples/3.80/load-and-create-animations-with-json/.gitignore b/examples/3.80/load-and-create-animations-with-json/.gitignore
@@ -0,0 +1,4 @@
+/dist
+/node_modules
+yarn-error.log
+.DS_Store
diff --git a/examples/3.80/load-and-create-animations-with-json/.vscode/settings.json b/examples/3.80/load-and-create-animations-with-json/.vscode/settings.json
@@ -0,0 +1,15 @@
+{
+  "eslint.format.enable": true,
+  "eslint.options": {
+    "overrideConfigFile": "config/.eslintrc"
+  },
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "cSpell.words": [
+    "devshareacademy",
+    "mediump",
+    "tweakpane"
+  ]
+}
diff --git a/examples/3.80/load-and-create-animations-with-json/README.md b/examples/3.80/load-and-create-animations-with-json/README.md
@@ -0,0 +1,60 @@
+# Phaser 3 TypeScript - Creating Animations via JSON
+
+Contains example code of how you can use the built in [Phaser 3 Loader Plugin](https://newdocs.phaser.io/docs/3.80.0/focus/Phaser.Loader.LoaderPlugin-animation) to load your animation configurations from one central JSON file. This can help you keep your code and config isolated.
+
+You can see a live demo of the example here: [Phaser 3 Creating Animations With the Loader Plugin Demo](https://devshareacademy.github.io/phaser-3-typescript-games-and-examples/examples/loading-assets-with-json-pack/index.html)
+
+![Example](./docs/example.png?raw=true)
+
+By using the JSON file for creating your animations, your code can go from this:
+
+![Example 1](./docs/example1.png?raw=true)
+
+to this:
+
+![Example 2](./docs/example2.png?raw=true)
+
+## Local Development
+
+### Requirements
+
+[Node.js](https://nodejs.org) and [pNPm](https://pnpm.io/) are required to install dependencies and run scripts via `pnpm`.
+
+[Vite](https://vitejs.dev/) is required to bundle and serve the web application. This is included as part of the projects dev dependencies.
+
+### Available Commands
+
+| Command | Description |
+|---------|-------------|
+| `pnpm install --frozen-lockfile` | Install project dependencies |
+| `pnpm start` | Build project and open web server running project |
+| `pnpm build` | Builds code bundle for production |
+| `pnpm lint` | Uses ESLint to lint code |
+
+### Writing Code
+
+After cloning the repo, run `pnpm install --frozen-lockfile` from your project directory. Then, you can start the local development
+server by running `pnpm start`.
+
+After starting the development server with `pnpm start`, you can edit any files in the `src` folder
+and parcel will automatically recompile and reload your server (available at `http://localhost:8080`
+by default).
+
+### Deploying Code
+
+After you run the `pnpm build` command, your code will be built into a single bundle located at
+`dist/*` along with any other assets you project depended.
+
+If you put the contents of the `dist` folder in a publicly-accessible location (say something like `http://myserver.com`),
+you should be able to open `http://myserver.com/index.html` and play your game.
+
+### Static Assets
+
+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`.
+
+## Credits
+
+List of assets from some great artists used in this demo:
+
+* [xdeviruchi Sound Cloud](https://soundcloud.com/xdeviruchi)
+* [Small 8-direction Characters](https://axulart.itch.io/small-8-direction-characters)
diff --git a/examples/3.80/load-and-create-animations-with-json/config/.eslintrc b/examples/3.80/load-and-create-animations-with-json/config/.eslintrc
@@ -0,0 +1,9 @@
+{
+  "root": true,
+  "extends": "@devshareacademy/eslint-config",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "rules": {},
+  "ignorePatterns": ["node_modules", "dist"]
+}
diff --git a/examples/3.80/load-and-create-animations-with-json/config/vite.config.js b/examples/3.80/load-and-create-animations-with-json/config/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  base: "./",
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: 'assets/js/[name]-[hash].js',
+      },
+    },
+  },
+});
diff --git a/examples/3.80/load-and-create-animations-with-json/docs/example.png b/examples/3.80/load-and-create-animations-with-json/docs/example.png
diff --git a/examples/3.80/load-and-create-animations-with-json/docs/example1.png b/examples/3.80/load-and-create-animations-with-json/docs/example1.png
diff --git a/examples/3.80/load-and-create-animations-with-json/docs/example2.png b/examples/3.80/load-and-create-animations-with-json/docs/example2.png
diff --git a/examples/3.80/load-and-create-animations-with-json/index.html b/examples/3.80/load-and-create-animations-with-json/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Phaser 3 Example - Creating Animations Via JSON</title>
+		<style>
+      html,
+      body,
+      .container {
+        margin: 0px;
+        height: 100vh;
+        width: 100vw;
+        overflow: hidden;
+        background: #d7d7d7;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    </style>
+	</head>
+	<body>
+		<div class="container" id="game-container">
+      <h1>Phaser 3 Example: Creating Animations via JSON</h1>
+    </div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>
diff --git a/examples/3.80/load-and-create-animations-with-json/package.json b/examples/3.80/load-and-create-animations-with-json/package.json
@@ -0,0 +1,46 @@
+{
+	"name": "@devshareacademy/phaser-3-bitmap-mask-example",
+	"version": "1.0.0",
+	"description": "A basic Phaser 3 example of using a bitmap mask.",
+	"scripts": {
+		"start": "vite --config config/vite.config.js",
+		"build": "tsc && vite build --config config/vite.config.js",
+		"serve": "vite preview --config config/vite.config.js",
+		"lint": "eslint ./src --ext .ts,.tsx --config ./config/.eslintrc"
+	},
+	"author": "scottwestover",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/devshareacademy/phaser-3-typescript-games-and-examples.git"
+	},
+	"homepage": "https://github.com/devshareacademy/phaser-3-typescript-games-and-examples",
+	"devDependencies": {
+		"@devshareacademy/eslint-config": "0.0.18",
+		"@devshareacademy/prettier-config": "0.0.6",
+		"@devshareacademy/tsconfig": "0.0.3",
+		"@typescript-eslint/eslint-plugin": "7.1.0",
+		"@typescript-eslint/parser": "7.1.0",
+		"eslint": "8.57.0",
+		"eslint-config-prettier": "9.1.0",
+		"eslint-plugin-prettier": "5.1.3",
+		"prettier": "3.2.5",
+		"typescript": "5.3.3",
+		"vite": "5.1.4"
+	},
+	"dependencies": {
+		"phaser": "3.80.0"
+	},
+	"resolutions": {},
+	"prettier": "@devshareacademy/prettier-config",
+	"volta": {
+		"node": "20.11.1",
+		"yarn": "1.22.11",
+		"pnpm": "8.15.4"
+	},
+	"engines": {
+		"node": ">=20.11.0",
+		"npm": ">=10.2.0",
+		"pnpm": ">=8.15.0"
+	}
+}