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 Series
- “Making Browser Games” Series - online Courses
- Programming Courses
- “Walk-Thru Tutorial” Series - Online Courses
- IPart I: Product Management
1Game Studio & Project Preparations
- ACTUALLY START THE DAMN GAME …
- 1.1Workstation Setup
- Batteries not included … Web Server Required
- Deeper Dive: Testing “MMoGs” Locally??!
- Locally Testing MMoGs
- Development Tools
- 1.2Project Setup
- Deeper Dive: Project Data Structure
- Deeper Dive: And its name shall be called …
- Concerns using Browserify with Phaser
- Project Directories & Files
- 1.3Game Project “Concept & Design”
- Introduction to Game Design System™
- What makes a Good Game?
- 1.4Preparing a “Gaming Product”
- Why are you doing this?
- What are you making?
- What technology will you use?
- “Loose lips sink ships” … and revenues!
- Quoted from: http://www.copyright.gov/fls/fl108.pdf
- What features are included?
- Deconstruction
- What features are mandatory?
- How will you encode it?
- 1.5Game Design Architecture
- “Oh! Oh!”
- “Top-down”
- “Bottom-up”
- “Oh! Oh!” vs. Top-Down vs. Bottom-Up vs. OLOO
- 1.6Game Project Summarized:
- Concept Development:
- Design:
- Production Encoding:
- 1.7Summary
- 1.8Chapter References:
2Building a Game Prototype
- How to Succeed at Making One Game a Month
- 2.1Creating 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
- Deeper Dive: Writing D.R.Y. JS code
- 2.2Using “Box” Graphics
- 2.3Game Practicum: Box Prototyping
- Phaser III Code Review
- Phaser v2.x.x Code Review
- 2.43D Prototypes
- 2.5“ToTo, … we’re not in Kansas anymore” — Dorothy
- 2.6Starting Your “Game 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.
- Game “
Config” - 2.7Deeper Dive: To Infinity and Beyond!
- 2.8Summary
- 2.9Chapter References:
3Game Phases, Scenes & Roses.
- 3.1Bare-Bones Prototypes
- 3.2Using a Phaser Scene as a “Game Phase”
- 3.39 Essential Functions of a Phaser “Scene”
- 3.4Game Phases as Modules
- “Phaser.Game” — One File to Rule them all …
- Yes, Gandalf got it wrong!
- Main.js (aka “launch” or index.js)
- Boot.js
- Preload.js
- Deeper Dive: Artwork & Resources Security
- Deeper Dive: Phaser
Cache - Working with the Phaser Cache:
- Deeper Dive: Loader Examples
- Splash.js or Language.js?
- Main Menu.js
- Play.js
- Deeper Dive: JS Modules
- 3.5Step #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
- 3.6Encoding Phaser Scenes as a “Game 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
- 3.7Summary
- 3.8Chapter References:
- IIPart II: Mechanisms vs. Mechanics
4Building Game Prototypes, Mechanisms & Tools
- 4.1Task #3: Mini-Me
- Creating an Avatar - “visual display”
- Deeper Dive: Display selected frames from a sprite-sheet.
- Displaying a particular sprite from sprite-sheet
- Deeper Dive: Using Base64 Images
- Creating an Avatar’s metadata
- Deeper Dive 3.19+ Tweens
- 4.2Task #4: Moving Game Elements
- Deeper Dive: Phaser III Input Manager
- Quoted from Dev Log 90 & Dev Log 133!
- Callbacks and Events
- 4.3NEW in v3.16.x (JAN 2019!)
- Deeper Dive: Future Proofing your source code.
- Deeper Dive: Configuring the Keyboard (Phaser v3.16+ updated)
- 4.4Task #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” or “Scenes”?!!?
- Deeper Dive: Button size considerations
- Deeper Dive: Adding Buttons & Mobile Touch
- 4.5Task #6: When Worlds Collide …
- 4.6Task #7: It’s curtains for you …
- 4.7Other Game Mechanics Categories
- 4.8The Finish Line: You’re AWESOME … Gloat, Gloat …
- 4.9Chapter Source Code & Demo
- 4.10Summary
- 4.11Chapter References
5Dem’s fightin’ words
- 5.1Launching Web Sockets
- 5.2Dynamic Combat Menus
- 5.3So, Give Me Some Space …
- “The Four Virtues of a good tactical turn-based combat system”
- Melee Weapons
- Ranged Weapons
- Is your game ‘juicy’ enough?
- 5.4OO!, OW! AH!, OW! Stayin’ alive! Stayin’ alive!
- Grid-less Combat
- Grid-ed Combat
- 5.5Tactical Tiled-Maps
- 5.6Squares and Checkered Grids
- References from Mozilla Developers:
- Deeper Dive: Phaser III Grids
- Grid Plugin
- Hexagonal Grids
- Red Blob Games
- Deeper Dive: Real hexagonal grids
- Squishes
- 5.7Rules of Engagement: Take 5 paces, turn, and …
- Been there … done that …
- 5.8“Where’s the beef?”
- Click-fest
- Guitar hero - Time to get it Right!
- Days of our Lives - Drama Theater
- SCA Virtual “Fighter Practice” by Steve Echos
- En Guard method
- Yeap! Ya betcha’ ‘ur life!
- 5.9Story narrative
- 5.10Frisking, Fondling, or Groping
- 5.11Chapter Source Code
- 5.12Complete Combat Prototypes
- 5.13Summary
- 5.14Footnotes
6Game Mechanism Components
- 6.1Phaser 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
- What’s the Difference Between Class & Prototypal Inheritance?
- DOM
- Game Objects
- System Components
- 6.2Tile Map
- Tilemap Rendering - new Dynamic method
- Tilemap Rendering - new Static method
- Quote from Devlog 82:
- 6.3Phaser III Systems
- v3 Boot
- v3 Cache
- v3 Device Manager
- v3 Events
- v3 Input Manager
- Callbacks and Events
- Deeper Dive: v3.16+ New Keyboard rewrite!
- Keyboard Input - New Features
- v3 Loader
- v3 Sound
- v3 Scene Manager
- From v2.x.x States to Scenes
- v3 Texture Manager
- v3 Tween Manager
- Deeper Dive 3.19+ Tweens
- 6.4Phaser3 Finish Line: You’re AWESOME … Gloat!, Gloat!
- Phaser v3 Source Code & Demos
- Quote from Devlog 85
- 6.5v3 Animations
- Deeper Dive: History of Animation
- Animation Today
- Animation Recommendations
- Frame Rates Recommendations
- Tweens
- 6.6Camera & Viewports
- 6.7Summary
- 6.8Chapter Footnotes:
7Whazzz-sUP! …. HUD Development
- 7.1HUD Housing Development
- Quote Newsletter 146
- 7.2HUD as Panels
- 7.3HUD Panels outside the Canvas?!?
- 7.4HUD Demos
- 7.5Summary
- 7.6Footnotes
8Don’t make me think or “Artificial Intelligence for Dummies”
- 8.1The “6 of 9”
- 8.2Chasing
- 8.3Evading
- 8.4Patterns
- 8.5Fuzzy logic
- 8.6Finite State Machines (FSM)
- FSM Resolving Combat Outcomes
- FSM Resolving AI behaviors
- 8.7Recursive World Feedback
- Probability Data Tables
- 8.8Complete AI Prototypes
- 8.9Chapter Source Code
- 8.10Summary
- 8.11Footnotes
- IIIPart III: “Walk-thru” Tutorials & Resources
9Game Prototype Libraries
- 9.1Walk-through Tutorial Series
- Introductory (Difficulty Rating #1)
- Intermediate (Difficulty Rating #2 to #3)
- Advanced — “The Full Monty!” (Difficulty Rating #4)
- 9.2References:
10What’s next?
- 10.1Game Distribution & Marketing
- “How to publish a game on the web??”
- Introduction: 8-Step Deployment Method.
- Shareably (SBLY) looking to rent your Phaser games
- 10.2Book Review Protocol
- 10.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: 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
- 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: 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 <canvas> tag.
- Phaser III Examples
- Phaser III Game Prototyping Demonstrations
- Game Mechanics & Mechanisms identified
- WebSockets, Dynamic Menus, Combat, and FSM
Appendix: Game Automation Tools
- Deeper Dive: Database Protection Considerations
- Database Schema Construction (Copyright-able!!)
- Database Record Construction
- Database structure
- Remote Codebase Using AppML
- Building an AppML application
- Sample AppML codebase (Public Access)
- Remote codebase Using JSON
- Per-user storage
- Chapter Source Code & Demo
- Summary
- Chapter References
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:
Appendix: Common Pitfalls
- Lacking Debugging Tools?
- Deeper Dive: Console Commands
- Same “Name-spaces”
- Callbacks
- Missing Documentation
- Deeper Dive: What is Dragon Speak