Table of Contents
Distribution Permission
Supporting website
Forwards
Disclosures
Disclaimer
About this Workbook:
Viewing the Source Code
Links and References
Who should use this workbook?
Your newly obtained skillsβ¦
Game Design Systemβ’
Game Studio - Book Series
Game Studio - Online Courses
Making Browser Games'' - Books SeriesMaking Browser Games'' Series - online Courses
Programming Courses
Walk-Thru Tutorial'' Series - Online Courses
Part I: Product Management
Game Studio & Project Preparations
Workstation Setup
Batteries not included β¦ Web Server Required
Deeper Dive: TestingMMoGs'' Locally??!
Development Tools
Project Setup
Deeper Dive: Project Data Structure
Deeper Dive: And its name shall be called β¦
Project Directories & Files
Game Project Concept & Design''
Introduction to Game Design Systemβ’
What makes a Good Game?
Preparing aGaming Product''
Why are you doing this?
What are you making?
What technology will you use?
Loose lips sink ships'' β¦ and revenues!
What features are included?
What features are mandatory?
How will you encode it?
Game Design ArchitectureOh! Oh!''
Top-down''Bottom-up''
Oh! Oh!'' vs. Top-Down vs. Bottom-Up vs. OLOO
Game Project Summarized:
Concept Development:
Design:
Production Encoding:
Summary
Chapter References:
Building a Game Prototype
Creating Prototype Mechanisms β 4-Step method
Step 0) Preparation and Research
Step 1) Generate Game Phases (as needed).
Step 2) Generate code for triggering events.
Step 3) Generate transition
Step 4) Create your Game's Core & auxiliary functions
UsingBox'' Graphics
Game Practicum: Box Prototyping
Phaser III Code Review
Phaser v2.x.x Code Review
3D Prototypes
ToTo, β¦ we're not in Kansas anymore'' β Dorothy
Starting YourGame Recipe''β’
Step #0) the Front-Door
Task #1-1 Instructions:
Compare your code
Mobile Single Web Page Applications'' (SWPA)
Cocoon.js - Cloud Alternatives
Task #2: Launching a Game
Deeper Dive: Launching a Phaser III Game.
GameConfig''
Deeper Dive: To Infinity and Beyond!
Summary
Chapter References:
Game Phases, Scenes & Roses.
Bare-Bones Prototypes
Using a Phaser Scene as a Game Phase''
9 Essential Functions of a PhaserScene''
Game Phases as Modules
Phaser.Game'' β One File to Rule them all β¦
Main.js (akalaunch'' or index.js)
Boot.js
Preload.js
Deeper Dive: Artwork & Resources Security
Deeper Dive: Phaser Cache
Deeper Dive: Loader Examples
Splash.js or Language.js?
Main Menu.js
Play.js
Deeper Dive: JS Modules
Step #1 of 4: Generate Game Phases
Dynamically Including Game Phases
Deeper Dive: D.R.Y. Stand-alone
Step #3 of 4: Game Phase Transitions
Deeper Dive: The CMS Game Shell''
Deeper Dive: When to use a game shell
Encoding Phaser Scenes as aGame Phase''
Vanilla, Chocolate, or Strawberry Creme-filled?
Overriding Essential Functions inside Phaser.Scene
Creating Scenes using ES5 Prototypes
Creating Scenes using Phaser.Class
Creating Scenes by extending Phaser.Class
ES6 Considerations: Strawberry''
Creating Scene Configuration files
Deeper Dive: Defining Other Scene Properties
Deeper Dive: ES9 Modules
Summary
Chapter References:
Part II: Mechanisms vs. Mechanics
Building Game Prototypes, Mechanisms & Tools
Task #3: Mini-Me
Creating an Avatar -visual display''
Deeper Dive: Display selected frames from a sprite-sheet.
Deeper Dive: Using Base64 Images
Creating an Avatar's metadata
Deeper Dive 3.19+ Tweens
Task #4: Moving Game Elements
Deeper Dive: Phaser III Input Manager
Deeper Dive: Future Proofing your source code.
Deeper Dive: Configuring the Keyboard (Phaser v3.16+ updated)
Task #5: Things that go bump β¦
Walls and Camera boundaries
Interior Decoration
Deeper Dive on Game Objects hit areas.
Doors, Knobs, and Buttons
Deeper Dive: Writing Optimized Code
Deeper Dive: Buttons as a Class'' orScenes''?!!?
Deeper Dive: Button size considerations
Deeper Dive: Adding Buttons & Mobile Touch
Task #6: When Worlds Collide β¦
Task #7: It's curtains for you β¦
Other Game Mechanics Categories
The Finish Line: You're AWESOME β¦ Gloat, Gloat β¦
Chapter Source Code & Demo
Summary
Chapter References
Dem's fightin' words
Launching Web Sockets
Dynamic Combat Menus
So, Give Me Some Space β¦
Melee Weapons
Ranged Weapons
OO!, OW! AH!, OW! Stayin' alive! Stayin' alive!
Grid-less Combat
Grid-ed Combat
Tactical Tiled-Maps
Squares and Checkered Grids
Deeper Dive: Phaser III Grids
Hexagonal Grids
Deeper Dive: Real hexagonal grids
Squishes
Rules of Engagement: Take 5 paces, turn, and β¦
Been there β¦ done that β¦
Where's the beef?''
Click-fest
Guitar hero - Time to get it Right!
Days of our Lives - Drama Theater
SCA VirtualFighter Practice'' by Steve Echos
En Guard method
Yeap! Ya betcha' `ur life!
Story narrative
Frisking, Fondling, or Groping
Chapter Source Code
Complete Combat Prototypes
Summary
Footnotes
Game Mechanism Components
Phaser III inline script - Reviewed
Phaser v2.x.x inline script - Reviewed
Adding Display objects
Adding Control Mechanisms
Adding Buttons & Mobile Touch
Phaser III Actions''
Components
DOM
Game Objects
System Components
Tile Map
Tilemap Rendering - new Dynamic method
Tilemap Rendering - new Static method
Phaser III Systems
v3 Boot
v3 Cache
v3 Device Manager
v3 Events
v3 Input Manager
Deeper Dive: v3.16+ New Keyboard rewrite!
v3 Loader
v3 Sound
v3 Scene Manager
v3 Texture Manager
v3 Tween Manager
Deeper Dive 3.19+ Tweens
Phaser3 Finish Line: You're AWESOME β¦ Gloat!, Gloat!
Phaser v3 Source Code & Demos
v3 Animations
Deeper Dive: History of Animation
Animation Today
Animation Recommendations
Frame Rates Recommendations
Tweens
Camera & Viewports
Summary
Chapter Footnotes:
Whazzz-sUP! β¦. HUD Development
HUD Housing Development
HUD as Panels
HUD Panels outside the Canvas?!?
HUD Demos
Summary
Footnotes
Don't make me think orArtificial Intelligence for Dummies''
The 6 of 9''
Chasing
Evading
Patterns
Fuzzy logic
Finite State Machines (FSM)
FSM Resolving Combat Outcomes
FSM Resolving AI behaviors
Recursive World Feedback
Probability Data Tables
Complete AI Prototypes
Chapter Source Code
Summary
Footnotes
Part III:Walk-thru'' Tutorials & Resources
Game Prototype Libraries
Walk-through Tutorial Series
Introductory (Difficulty Rating #1)
Intermediate (Difficulty Rating #2 to #3)
Advanced β The Full Monty!'' (Difficulty Rating #4)
References:
What's next?
Game Distribution & Marketing
Introduction: 8-Step Deployment Method.
Book Review Protocol
Tell the world about your game!
Appendix
More Resources
JavaScript Garden
Additional Appendices
Other resources:
Selling your Game Assets
Appendix: Online Game Development
Appendix: Making WebXR Games!
Appendix: Phaser III Plugins
Appendix: Network Concepts
Security Concerns
Protecting Game Assets
Use of <iframe>
Bad Bot!
Other Considerations
Game Services (Back-end)
CMS - Server-side Frameworks
Index Page (Non-Traditional Method)
High Scores Services
Membership Login
Production release version.
CodeIgniter & Phaser Integrated CMS
CodeIgniter Prep Step-by-Step
Game Shell (click dummy)
Summary
Chapter Footnotes
Appendix:How to Start a WebSocket''
Testing Your Browser
WebSocket Protocol Handshake
Deeper Dive: WebSocket API
Sample Source Code: Client-side WebSocket
Step #1: Game index page
Step #2: Generate Event handlers
Appendix: Project Mgmt Methods
Prototyping
Basic Principles
Strengths:
Weaknesses:
Situations where most appropriate:
Situations where least appropriate:
Incremental
Basic Principles:
Strengths:
Weaknesses:
Situations where most appropriate:
Situations where least appropriate:
Spiral
Basic Principles:
Strengths:
Weaknesses:
Situations where most appropriate:
Situations where least appropriate:
Rapid Application Development (RAD)
Basic Principles:**
Strengths:
Weaknesses:
Situations where most appropriate:
Situations where least appropriate:
Test-Driven Development
Basic Principles:
Expected Benefits
Common Pitfalls
Typical team pitfalls include:
Signs of Use
Skill Levels
Further Reading on Test Driven Development
Game Project Management Foot Notes:
Appendix: Consolidated Phaser Examples
Phaser III (1st to 6th editions):
Demonstrations:
Searching for Game Mechanics and Mechanisms.
Content Management System embedded in HTML5