Merge pull request #2 from devshareacademy/pipeline-migration

phaser 4 shader examples

Author: scottwestover

examples/rc5/shader-pipeline-migration/.gitignore

@@ -0,0 +1,4 @@
+/dist
+/node_modules
+yarn-error.log
+.DS_Store

examples/rc5/shader-pipeline-migration/.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"
+  ]
+}

examples/rc5/shader-pipeline-migration/README.md

@@ -0,0 +1,66 @@
+# Phaser 4 TypeScript - Shader Examples
+
+Contains example code of how to use various shaders in Phaser 4. This is the sample code that I shared in my tutorial video hosted on YouTube here were we walk through migrating some existing Phaser 3 shaders to the Phaser 4:
+
+[<img src="https://i.ytimg.com/vi/4Dj5PSKwjak/hqdefault.jpg">](https://youtu.be/4Dj5PSKwjak "Phaser 3 Tutorial: Getting Started with Shaders!")
+
+You can see a live demo of the examples here: <a href="https://devshareacademy.github.io/phaser-4-typescript-games-and-examples/examples/rc5/shader-pipeline-migration/index.html" target="_blank">Shader Examples</a>.
+
+While viewing the examples, if you press the `space` key, you can navigate between various examples. Below is a list of the examples shaders that can be seen and the corresponding files to that example:
+
+| Example | Description | Location |
+|---------|-------------|----------|
+| Grey Scale | Example of how to apply a grey scale affect to all pixels. | `./src/shaders/grey-scale-shader.ts` |
+| Screen Wipe | Example of how to use custom variables in a shader to create animations, like a scene transition. | `./src/shaders/wipe-shader.ts` |
+| Noise Mix | Example of how to pass an addition texture to a shader and mix this texture with the original texture. Used to create a grainy effect. | `./src/shaders/noise-shader.ts` |
+
+![Shader Examples 1](./docs/example.gif?raw=true)
+
+![Shader Examples 2](./docs/example2.gif?raw=true)
+
+## Local Development
+
+### Requirements
+
+<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`.
+
+<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.
+
+### 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: <a href="https://axulart.itch.io/" target="_blank">ansimuz</a>.
+
+List of assets:
+
+* <a href="https://axulart.itch.io/axularts-basicplains-tileset-ver2" target="_blank">Basic Plains Set</a>
+* <a href="https://axulart.itch.io/small-8-direction-characters" target="_blank">Character</a>

examples/rc5/shader-pipeline-migration/config/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "root": true,
+  "extends": "@devshareacademy/eslint-config",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "rules": {},
+  "ignorePatterns": ["node_modules", "dist"]
+}

examples/rc5/shader-pipeline-migration/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',
+      },
+    },
+  },
+});

examples/rc5/shader-pipeline-migration/docs/example.gif

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Phaser 4 Shader Examples</title>
+		<style>
+      html,
+      body,
+      .container {
+        margin: 0px;
+        height: 100vh;
+        width: 100vw;
+        overflow: hidden;
+        background: #d7d7d7;
+      }
+    </style>
+	</head>
+	<body>
+		<div class="container" id="game-container"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>

examples/rc5/shader-pipeline-migration/docs/example2.gif

@@ -0,0 +1,48 @@
+{
+	"name": "@devshareacademy/phaser-4-shader-examples",
+	"version": "1.0.0",
+	"description": "A few shader examples for Phaser 4 that are migrated from Phaser 3.",
+	"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-4-typescript-games-and-examples.git"
+	},
+	"homepage": "https://github.com/devshareacademy/phaser-4-typescript-games-and-examples",
+	"devDependencies": {
+		"@devshareacademy/eslint-config": "0.0.18",
+		"@devshareacademy/prettier-config": "0.0.6",
+		"@devshareacademy/tsconfig": "0.0.3",
+		"@tweakpane/core": "2.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": "4.0.0-rc.5",
+		"tweakpane": "4.0.3"
+	},
+	"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"
+	}
+}