Distribution Permission
- Supporting website
Disclosures
Disclaimer
About this Workbook
- Links and References
- Workbook Content
- How to Read & Use this workbook:
- Viewing this eBook:
- Who should use this workbook?
Your newly obtained skills…
Game Design System™
- Game Studio - Book Series
- Game Studio - Online Courses
- “Making Browser Games” - Books Series
- “Making Browser Games” Series - online Courses
- Programming Courses
- “Walk-Thru Tutorial” Series - Online Courses
- IMaking HTML5 Games
1Introduction to Game Design
- Approaching Game Development
- Focusing Your Game
- 1.1Game Genre Defined
- GG Interactive — Game Design Course
- 1.2Game Tools & Generators
- 1.3References From
2Standard Project Setup
- 2.1Standardized File Structure
- 2.2Barebones Set-up
- 2.3Web Server Required - Batteries not included!
3Starting a Game Project
- 3.1Step 0: Review your competition and their games
- Game Examples
- 3.2Step 1: Create your “front-door”
- 3.3Step 2. Create your “Game Shell” & Phases
- Network Impact
- Critical Rendering Path
- Gamer’s Local Activity
- D.R.Y. Speed Limit - 5 GPH (Games Per Hour)!
- 3.4Select a JS Format
- ES5 Format
- ES6+ Format as “FAT Arrow” Function
- ES6+ Format as “Phaser.Class”
- ES6+ Format as “Phaser.Scene”
- IIPart II: Making “Memory” Browser Games
4General Design Considerations
- 4.1Game Mechanics (GM) - Data Structure
- 4.2Game Mechanics (GM) - Logic, & Rules
- General Game Procedures
- 4.3MahJong - “Matching Open Pairs”
- MahJong Rule Variations
- “52 Card Pick-up”
- 4.4Memory Matching “Hidden Pairs”
- “Hidden Pairs” Rule Variations
- 4.5Memory Matching “in Sequence”
- Clones & Competitors
- Sequence Logic
5Memory Matching — Core Game Construction
- 5.1Game Project Overview
- 5.2Our Goal
- 5.3“Mega-Chapter” - 5 Available Games
- 5.4Memory Matching Genre Description
- Deeper Dive: “Due Diligence in Gaming Research”
- Deeper Dive: Audio Games
- Adding Sound to Your Phaser3 Game
- 5.5Game Recipe™ Featured Ingredients
- 5.6Step 3a: Create “Play.js”
- 5.7Step 3b: Create Supporting functions.
- 5.8Conclusion
- IIIPart III: Code Review
6MahJong — “Matching Open Pairs”
- 6.1Simple MahJong Prototypes — Phaser v2 & III!
- Play Phaser III Demonstrations
- Play Phaser v2.x.x Demonstrations
- Download v2.x.x Project files
- Download Phaser III Project files
- 6.2Booting & Loading (Phaser III stage 1)
- 6.3Main.js (Phaser III stage 1)
- Defining Tile Metadata
- 6.4Play.js (Phaser III stage 1)
- Shuffling & Randomized Deployment
- Creating Tiles
- Selecting Tiles (Phaser III stage 1)
- Tile Selection & Validation (Phaser III stage 1)
- 6.53D Layout Prototype (Phaser v2.x.x stage 1)
- IVPhaser v3.16+ Code Review
7Game #1 - “Hidden Pairs”
- 7.1Game Description
- 7.2Main.js Overview
- 7.3Play.js — Overview
- 7.4Phaser Essential Functions
- “Play Phase” Variables — Lines 46 to 61
- Play.js —
preload— Lines 72 to 95 - Play.js —
create— Lines 95 to 315 - Play.js —
update— Lines 318 to 345 - 7.5Game Mechanisms & Supporting Functions
- Deeper Dive: Phaser vs JavaScript Timers
- Play.js —
checkTilesLines 356 to 465 - Play.js —
decreaseTimerLines 469 to 490 - Play.js —
getRandomLines 491 to 501 - Play.js —
resetGTLines 502 to 535 - Play.js —
showTilesLines 536 to 605 - Play.js —
stopWatchTimer(optional) Lines 606 to 628 - Play.js —
Tiles(alternate) Lines 629 to 686
8Game #2 - “Matching Sequence”
- 8.1Game Description
- Simple Shaman™
- 8.2Design Consideration: “Separation of Concerns”
- Managing Player Input & Validation
- Managing Panel Displays
- Project Development Tools
- Deeper Dive: Experiments with Polygons
- Deeper Dive: Callbacks & Events
- “Callbacks and Events”
- Deeper Dive: Making Phaser v3.16+ Graphics “clickable”
- Deeper Dive: WebGL Foundations
- Summary: Design Option #1 graphics
- 8.3Menu.js Overview - animated “
.GIF” - “How to reuse game.anims animations?”
- 8.4Main.js Overview
- Game Security
- Revealing too much, too soon!
- 8.5Play.js Overview
- 8.6Phaser Essential Functions
- Play.js —
preload— Lines 105 to 137 - Play.js —
create— 138 to 368 - Innovation Experiment — Panel Animations
- Play.js —
update— Lines 371 to 414 - 8.7Game Mechanisms & Supporting Functions
- Play.js —
getRandomLines 423 to 431 - Play.js —
gIntroLines 432 to 453 - Play.js —
moveOffLines 454 to 460 - Play.js — Optional
playerSequenceLines 461 to 503 - Play.js —
releasedLines 504 to 546 - Play.js —
restartLines 547 to 561 - Play.js —
selectedLines 562 to 572 - Play.js —
setUpLines 573 to 592 - Play.js —
simonSequenceLines 593 to 618 - 8.8Game #2 Conclusion
- VPhaser v2.x.x Code Review
9Game #3 - “Hidden Pairs”
- 9.1Play.js
10Game #4 - Matching Sequence
- 10.1Play.js — Overview
- Deeper Dive: Making Phaser v2.x.x Graphics “clickable”
- 10.2Play.js – Lines 36 to 203 Create Function:
- 10.3Play.js – Lines 205 to 224 Update function
- 10.4Play.js – Lines 230 to 400
- 10.5Play.js – Lines 384 to 396
boxfunction - 10.6Play.js – Lines 240 to 243
deselectBoxfunction - 10.7Play.js – Lines 244 to 306
playBoxesfunction - 10.8Play.js – Lines 307 to 324 restart function
- 10.9Play.js – Lines 325 to 360
selectBoxesfunction - 10.10Play.js – Lines 361 to 382
startCountDownfunction - VIAuxiliary Business Functions
11Game Shell - The CMS!
- 11.1Generic
- 11.2Generic Boot.js
- 11.3Generic Preload.js
- 11.4Generic Splash.js or Language.js
- 11.5Generic Menu.js
- Sample CMS page — Credits.js
- Deeper Dive: Using JAMStack as an SSG …
- Visit JAMStack http://jamstack.org
- Deeper Dive: Static Site Generators (SSG)
- 11.6Inside each Game Phase
12Plug-in Enhancements
13Conclusion
14Bonus Development Content
- VIIWhat’s next?
- 14.1Game Distribution & Marketing
- “How to publish a game on the web??”
- Introduction: 8-Step Deployment Method.
- Shareably (SBLY) looking to rent your Phaser games
- 14.2Book Review Protocol
- 14.3Tell the world about your game!
- Appendix
More Resources
- JavaScript Garden
- Additional Content Appendices
- Other resources:
- Selling your Game Assets
Appendix: Making WebXR games!
Appendix: Online Game Development
Appendix: Phaser III Plugins
Appendix: “How to Start a WebSocket”
- Testing Your Browser
- Test sites:
- WebSocket Protocol Handshake
- Deeper Dive: WebSocket API
- Sample Source Code: Client-side WebSocket
- Step #1: Game
indexpage - Step #2: Generate Event handlers
Appendix: OLOO - Safe JavaScript
- JS Objects: “TL;DR”
- 15.2.2 Inside the body of a class definition
- Deeper Dive: JS Delegation (aka “Inheritance”?)
- The old way
- “Object Oriented JavaScript Pattern Comparison”
- ECMA-262 7th Edition / June 2016
- Objects Linking to Other Objects (OLOO)
- Compare your code
- Object.create
- Exercise Lesson 9:
- Exercise 1
- Game Singletons
- Deeper Dive: Object Manipulation objects in ES5/6
- Lesson Summary
- Resource References: