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
- Cashing In with “Hidden Object” Games
- 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 “Hidden Objects” Browser Games
4Hidden Objects — Core Game Construction
- 4.1Game Project Overview
- 4.2Our Goal
- 4.3Hidden Objects Genre Description
- Historical background?
- 4.4Game Mechanics (GM) - Logic & Rules
- 4.5Game Mechanics (GM) - Data Structure
- Deeper Dive: Replayability
- Opinion: Expanding The “Replay Value” Of Games
- 4.6Game Recipe™ Featured Ingredients
- 4.7Step 3: Create “Play.js”
- 4.8Step 4: Create Supporting functions.
- 4.9Conclusion
5Phaser Code Review
- 5.1Method #1: HTML5 Conversion into Phaser Framework.
- Step 1: Project Preparation
- Step 2: Project Refactoring
- Step 3: Project Plan
- Deeper Dive: Better Location Selections
- Deeper Dive: Making Phaser v3.16+ Graphics “clickable”
- Deeper Dive: Making Phaser v2.x.x Graphics “clickable”
- Deeper Dive: WebGL Foundations
- 5.2Method #2: ActionScript into Phaser Framework.
- D.R.Y. Speed Limit - 5 GPH (Games Per Hour)!
- 5.3Method #3: Winx Quests.
- Winx Quests Concert Disaster Deployment
- Product History:
- Market Saturation: (as of 20150501)
- Flash Demo
- Game Features:
- 5.4Method #4 (for Adults): “Find My Flaws”
- Flash Demos
- Microsoft Office to the Rescue!
- 5.5Method #5 - “Find the Difference” Construction
- Phaser v3.16+ Resources
- Phaser v2.x.x Resources
- Why not do what others are doing?
- Step 1: Project Preparation
- Deeper Dive: Project Preparations
- Step 2: Create your standard game shell scenes
- Step 3: Project Plan & flowchart
6Game Shell - The CMS!
- 6.1Generic
- 6.2Generic Boot.js
- 6.3Generic Preload.js
- 6.4Generic Splash.js or Language.js
- 6.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)
- 6.6Inside each Game Phase
7Plug-in Enhancements
8Conclusion
- IIIWhat’s next?
- 8.1Game Distribution & Marketing
- “How to publish a game on the web??”
- Introduction: 8-Step Deployment Method.
- Shareably (SBLY) looking to rent your Phaser games
- 8.2Book Review Protocol
- 8.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: “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: