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 Resources
- 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
- Critical Rendering Path
- Network Impact
- 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 “Music & Rhythm” Browser Games
4Music & Rhythm — Core Game Construction
- 4.1Game Project Overview
- 4.2Our Goal
- 4.3Game Description
- Mozart’s Music Match™ Suite - “Elevator Speech”
- 4.4Game Recipe™ Featured Ingredients
- 4.5Audio Construction Tools
- Composing Game Music Themes
- Creating “Audio Sprites”
- 4.6Design Considerations
- 4.7Game Mechanics
- The Theory of Multiple Intelligence
- Game Mechanics (GM): Logic & Rules
- Game Mechanics (GM): Data Structures
- Deeper Dive: Tuning Our Game to Musical Theory
- “Coda”: What did we learn?
- 4.8Optional Audio Design — “Pure JS” tone generation
- 4.9Technical Considerations
- Deeper Dive: Web Audio management
- Deeper Dive: Not Everyone Hears Alike!
- Deeper Dive: Using HTML5
.oggformats - 4.10Conclusion
5Phaser v3.16+ Code Review
- 5.1Main.js
- 5.2Boot.js
- 5.3Play.js - Overview
- 5.4Phaser Essential Functions
- Play.js — Management variables — Lines 1 to 77
- Play.js — preload — Lines 88 to 94
- Play.js — create — Lines 94 to 450
- “Callbacks and Events”
- 5.5Optional Code Design — Functions
- Game Mechanisms as Functions
6Phaser v2.x.x Code Review
- 6.1Main.js
- 6.2Boot.js
- 6.3Play.js - Overview
- 6.4Phaser Essential Functions
- Play.js — Management variables — Lines 1 to 80
- Play.js — preload — Lines 91 to 95
- Play.js — create — Lines 96 to 454
- “Callbacks and Events” (Reminder!)
- Play.js — Internal Supporting Functions
- 6.5Optional v2 Code Design — External Functions
- Game Mechanisms as Functions
7Game Shell - The CMS!
- 7.1Generic
- 7.2Generic Boot.js
- 7.3Generic Preload.js
- 7.4Generic Splash.js or Language.js
- 7.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)
- 7.6Inside each Game Phase
8Plug-in Enhancements
- 8.1Twitter Plugin
9Conclusion
- IIIWhat’s next?
- 9.1Game Distribution & Marketing
- “How to publish a game on the web??”
- Introduction: 8-Step Deployment Method.
- Shareably (SBLY) looking to rent your Phaser games
- 9.2Book Review Protocol
- 9.3Tell 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: Audio Standards
- G7.11
- WebRTC_codecs
- G7.22
- Brief Presentation
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: