Making Dress-up Browser Games

Distribution Permission

1. Supporting website

Disclosures

Disclaimer

About this Workbook

1. Links and References
2. Workbook Content
3. How to Read & Use this workbook:
4. Viewing this eBook:
5. Who should use this workbook?

Your newly obtained skills…

Game Design System™

1. Game Studio - Book Series
2. Game Studio - Online Courses
3. “Making Browser Games” - Books Series
4. “Making Browser Games” Series - online Courses
5. Programming Courses
6. “Walk-Thru Tutorial” Series - Online Courses
7. IMaking HTML5 Games

1Introduction to Game Design

1. Approaching Game Development
2. Focusing Your Game
3. 1.1Game Genre Defined
4. GG Interactive — Game Design Course
5. 1.2Game Tools & Generators
6. 1.3References From

2Standard Project Setup

1. 2.1Standardized File Structure
2. 2.2Barebones Set-up
3. 2.3Web Server Required - Batteries not included!

3Starting a Game Project

1. 3.1Step 0: Review your competition and their games
2. Game Examples
3. 3.2Step 1: Create your “front-door”
4. 3.3Step 2. Create your “Game Shell” & Phases
5. Critical Rendering Path
6. Network Impact
7. Gamer’s Local Activity
8. D.R.Y. Speed Limit - 5 GPH (Games Per Hour)!
9. 3.4Select a JS Format
10. ES5 Format
11. ES6+ Format as “FAT Arrow” Function
12. ES6+ Format as “Phaser.Class”
13. ES6+ Format as “Phaser.Scene”
14. IIPart II: Making “Dress-Up” Browser Games

4Dress-Up — Core Game Construction

1. 4.1Game Project Overview
2. 4.2Our Goal
3. 4.3Dress-Up Genre Description
4. 4.4Current Demand for Dress-UP Games
5. 4.5Game Logic and Construction Considerations
6. Step #1 Find an avatar(s).
7. Step #2 Create the wardrobe
8. Step #3 Messy or tidy?
9. Step #4 Layout Arrangement
10. Step #5 Asset Download Considerations
11. 4.6Game Recipe™ Starter Kit Features
12. 4.7Step 3a: Create “Play.js”
13. 4.8Step 3b: Create Supporting functions.
14. 4.9Conclusion

5Phaser v3.16+ Code Review

1. 5.1Dog.js – a gentle introduction to standard Dress-UP games
2. 5.2Dog.js Preload function – Lines 105 to 162
3. 5.3Dog.js Create function – Lines 162 to 304
4. 5.4Dog.js changeFeature function – Lines 318 to 415
5. 5.5Mark.js – adding clothes & toggle flip-flops
6. 5.6Miyoko.js – adding data structures and spriteSheets management
7. 5.7Managing Hair and “Split-ends”
8. Split-ends Management
9. 5.8What’s a Girl to Wear? Clothes management
10. 5.9Zoe.js – the full Monty
11. 5.10Common Menu HUD
12. 5.11Printing
13. 5.12Saving
14. 5.13Camera Snap-shots

6Phaser v2.x.x Code Review

1. 6.1Dog.js – a gentle introduction to standard Dress-UP games
2. Dog.js Create function – Lines 51 to 130
3. Dog.js changeFreature function – Lines 131 to 170
4. 6.2Mark.js – adding clothes & toggle flip-flops
5. 6.3Miyoko.js – adding data structures and multiple spritesheets management
6. Managing Hair and “Split-ends”
7. Split-ends Management
8. What’s a Girl to Wear? Clothes management
9. 6.4Zoe.js – the full Monty
10. 6.5Common Menu HUD
11. 6.6Printing
12. 6.7Saving
13. 6.8Camera snap-shots

7Game Shell - The CMS!

1. 7.1Generic Main.js
2. 7.2Generic Boot.js
3. 7.3Generic Preload.js
4. 7.4Generic Splash.js or Language.js
5. 7.5Generic Menu.js
6. Sample CMS page — Credits.js
7. Deeper Dive: Using JAMStack as an SSG …
8. Visit JAMStack http://jamstack.org
9. Deeper Dive: Static Site Generators (SSG)
10. 7.6Inside each Game Phase

8Plug-in Enhancements

9Conclusion

10Bonus Development Content

1. IIIWhat’s next?
2. 10.1Game Distribution & Marketing
3. “How to publish a game on the web??”
4. Introduction: 8-Step Deployment Method.
5. Shareably (SBLY) looking to rent your Phaser games
6. 10.2Book Review Protocol
7. 10.3Tell the world about your game!
8. Appendix

More Resources

1. JavaScript Garden
2. Additional Content Appendices
3. Other resources:
4. Selling your Game Assets

Appendix: Making WebXR games!

Appendix: Online Game Development

Appendix: Phaser III Plugins

Appendix: “How to Start a WebSocket”

1. Testing Your Browser
2. Test sites:
3. WebSocket Protocol Handshake
4. Deeper Dive: WebSocket API
5. Sample Source Code: Client-side WebSocket
6. Step #1: Game index page
7. Step #2: Generate Event handlers

Appendix: OLOO - Safe JavaScript

1. JS Objects: “TL;DR”
2. 15.2.2 Inside the body of a class definition
3. Deeper Dive: JS Delegation (aka “Inheritance”?)
4. The old way
5. “Object Oriented JavaScript Pattern Comparison”
6. ECMA-262 7th Edition / June 2016
7. Objects Linking to Other Objects (OLOO)
8. Compare your code
9. Object.create
10. Exercise Lesson 9:
11. Exercise 1
12. Game Singletons
13. Deeper Dive: Object Manipulation objects in ES5/6
14. Lesson Summary
15. Resource References: