added bitmap mask example

Signed-off-by: Scott Westover <[email protected]>
devshareacademy · Apr 26, 2024 · ef232d7 · ef232d7
1 parent 6859bea
commit ef232d7
Show file tree

Hide file tree

Showing 15 changed files with 1,864 additions and 0 deletions.
diff --git a/examples/3.80/scene-transition-bitmap-mask/.gitignore b/examples/3.80/scene-transition-bitmap-mask/.gitignore
@@ -0,0 +1,4 @@
+/dist
+/node_modules
+yarn-error.log
+.DS_Store
diff --git a/examples/3.80/scene-transition-bitmap-mask/.vscode/settings.json b/examples/3.80/scene-transition-bitmap-mask/.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/scene-transition-bitmap-mask/README.md b/examples/3.80/scene-transition-bitmap-mask/README.md
@@ -0,0 +1,54 @@
+# Phaser 3 TypeScript - Scene Transition With Bitmap Mask Example
+
+Contains example code of how to create a custom scene transition for when a scene starts by using a `BitmapMask`.
+
+You can see a live demo of the example here: [Phaser 3 Scene Transition Bitmap Mask](https://devshareacademy.github.io/phaser-3-typescript-games-and-examples/examples/shader-battle-scene-transitions/index.html)
+
+![Example](./docs/example.gif?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
+
+The assets used in this demo were made from free assets that were created from the following artists: [ansimuz](https://ansimuz.itch.io/).
+
+List of assets:
+
+* [Star Fighter](https://ansimuz.itch.io/star-fighter)
+* [Warped Vehicles](https://ansimuz.itch.io/warped-vehicles)
diff --git a/examples/3.80/scene-transition-bitmap-mask/config/.eslintrc b/examples/3.80/scene-transition-bitmap-mask/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/scene-transition-bitmap-mask/config/vite.config.js b/examples/3.80/scene-transition-bitmap-mask/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/scene-transition-bitmap-mask/docs/example.gif b/examples/3.80/scene-transition-bitmap-mask/docs/example.gif
diff --git a/examples/3.80/scene-transition-bitmap-mask/index.html b/examples/3.80/scene-transition-bitmap-mask/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 - Bitmap Mask</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: Custom Scene Transition With Bitmap Mask</h1>
+    </div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>
diff --git a/examples/3.80/scene-transition-bitmap-mask/package.json b/examples/3.80/scene-transition-bitmap-mask/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"
+	}
+}