Merge pull request #11 from devshareacademy/shaders-advanced

Shaders advanced - code example for battle scene transitions

.gitignore

@@ -2,3 +2,4 @@
 /node_modules
 yarn-error.log
 .DS_Store
+node_modules

examples/3.80/shaders-pokemon/.gitignore

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

examples/3.80/shaders-pokemon/.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/3.80/shaders-pokemon/README.md

@@ -0,0 +1,71 @@
+# Phaser 3 TypeScript - Pokemon Like Battle Scene Transition Shader Examples
+
+Contains example code of how to create Pokemon like battle scene transitions using shaders in Phaser 3. This is the sample code that I shared in my tutorial video hosted on YouTube here: TODO.
+
+You can see a live demo of the examples here: [Pokemon Battle Scene Transitions Shader Examples](https://devshareacademy.github.io/phaser-3-typescript-games-and-examples/examples/shader-battle-scene-transitions/index.html)
+
+While viewing the examples, you can use the [tweakpane](https://tweakpane.github.io/docs/) gui to switch between the various examples and play the scene transitions.
+
+| Example | Description | Location |
+|---------|-------------|----------|
+| Screen Wipe | A simple screen wipe from left to right. | `./src/shaders/wipe-post-fx-pipeline.ts` |
+| Curtain Fall | A screen wipe from top to bottom. | `./src/shaders/curtain-fall-post-fx-pipeline.ts` |
+| Curtain Rise | A screen wipe that resembles curtains rising from a stage. | `./src/shaders/curtain-rise-post-fx-pipeline.ts` |
+| Opening Bars | Vertical bars that open from the center of the screen. | `./src/shaders/opening-bars-post-fx-pipeline.ts` |
+| Closing Bars | Vertical bars that close from the top and bottom of the screen. | `./src/shaders/closing-bars-post-fx-pipeline.ts` |
+| Fade To White | Screen fades to the color white. | `./src/shaders/fade-to-white-post-fx-pipeline.ts` |
+| Fade To Black | Screen fades to the color black. | `./src/shaders/fade-to-black-post-fx-pipeline.ts` |
+
+![Shader Examples 1](./docs/example.gif?raw=true)
+
+![Shader Examples 2](./docs/example2.gif?raw=true)
+
+![Shader Examples 3](./docs/example3.gif?raw=true)
+
+## Local Development
+
+### Requirements
+
+[Node.js](https://nodejs.org) and [Yarn](https://yarnpkg.com/) are required to install dependencies and run scripts via `yarn`.
+
+[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 |
+|---------|-------------|
+| `yarn install --frozen-lockfile` | Install project dependencies |
+| `yarn start` | Build project and open web server running project |
+| `yarn build` | Builds code bundle for production |
+| `yarn lint` | Uses ESLint to lint code |
+
+### Writing Code
+
+After cloning the repo, run `yarn install --frozen-lockfile` from your project directory. Then, you can start the local development
+server by running `yarn start`.
+
+After starting the development server with `yarn 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 `yarn 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: [AxulArt](https://axulart.itch.io/) and [The Pixel Nook](https://the-pixel-nook.itch.io)
+
+List of assets:
+
+* [Basic Plains Set](https://axulart.itch.io/axularts-basicplains-tileset-ver2)
+* [Character](https://axulart.itch.io/small-8-direction-characters)
+* [Buildings](https://the-pixel-nook.itch.io/rpg-building-pack)

examples/3.80/shaders-pokemon/config/.eslintrc

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

examples/3.80/shaders-pokemon/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/3.80/shaders-pokemon/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Basic Phaser 3 Example Template</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/3.80/shaders-pokemon/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "@devshareacademy/phaser-3-typescript-game-template",
+	"version": "1.0.0",
+	"description": "A basic Phaser 3 Typescript project template that uses Vite.",
+	"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",
+		"@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": "3.80.0",
+		"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"
+	}
+}