Leanpub Header

Skip to main content
Go to Leanpub.comLeanpub

Phaser III Game Prototyping

Building 100s of games using HTML and Phaser3 JavaScript Gaming Framework

Stephen Gose

The 6th edition workbook -totally rewritten for upcoming v3.5+ release- is your tutorial guide for Phaser III JavaScript Game Framework. Easy to read, humorous approach to modern game development for single-player games. 

This book is available in multiple packages!

Pick Your Package
PDF
EPUB
WEB
92
Readers
408
Pages
84,896Words
About

About

About the Book

This workbook is the new edition 6th -- a hands-on tutorial guide for Game Prototype creations using component object programming with an emphasis on Phaser v3.5+, WebXR, and "Headless Game Design". The reason we delayed this book's publication was due to the massive rewrites since v3.16+ OCT 2018 and 100% features final made availability since v3.24.1 release scheduled for mid-July, 2020. 

As of February 2017, this book was the first and only available tutorial for Phaser III and will continue to supplement version 3 as more framework features become available. Therefore, if you've purchased this book from LeanPub.com, you will have a continually updated version on the latest Phaser III features.

Phaser v3.24+ examples will use our unique component object programming. This book delves into many of the great classic game mechanisms and design mechanics techniques. All written in a fun and friendly style with completed projects and open-ended exercises that encourage you to build your own projects. You'll also download supporting tools to classify the book’s snippets and add your own modification.

You’ll find detailed working examples links from the book's website with dozens of illustrations with many concepts you can freely apply to your own gaming projects. All the source code annotations enhance the book’s explanation. You will learn to convert your former Phaser v2.x.x games and upgrade them into Phaser 3 now. I'll show you how I've upgraded my entire product line from Adobe Flash & Phaser v2.x.x.

What you’ll learn:

By the end of this workbook, you’ll have integrated into your own game designs:

  • Adopted processes for business project management and software development.
  • Organized a standardized file structure for rapidly developing games;
  • Used a blank game prototype templates to scaffold further game projects with automation tools;
  • Converted Phaser v2.x.x and adopted the new features and upcoming changes into Phaser v3.5+.
  • Imported resources and game assets;
  • Displayed, animated, and moved game avatars on various screen and scene renderings;
  • Managed groups of game objects;
  • Deployed heads-up display (HUD) on parallel game scenes both inside and outside the canvas;
  • Used customized web fonts;
  • Incorporated multiple game-inputs (touch, multi-touch, "accelerometer", mouse, and keyboard);
  • Rendered several physics systems on gaming components;
  • Included graphics effects (gfx) (particle systems, rotations, fades, shaders and more);
  • Created and managed game phases with multiple Scenes;
  • Managed permanent game assets across various game phases;
  • Optimized your game for various mobile devices;
  • Integrated 3rd-party plugins and blueprints.
  • Deployed single- and multi-player games from the workbooks tutorials.
  • Web Sockets demystified for scalable massive online game deployments.

Who This Book Is For:

Students -- and software professionals in -- game development with little experience in HTML5, CSS or JavaScript who want to enhance -- or begin learning the essential techniques from Phaser v3.5, and WebXR to build game prototypes. If you are interested in making browser games, especially for the mobile, Augmented or Virtual Reality markets, then Phaser III Game Prototyping is your choice.

Share this book

Categories

Product ManagementComputers and ProgrammingGame DevelopmentHTMLJavaScriptWeb DevelopmentGamingEducationCrafts and HobbiesDIYGamesReferenceTextbooks

Feedback

Email the author

Installments completed

17 / 17

License

Creative Commons Attribution 4.0 International License

Packages

Pick Your Package

All packages include the ebook in the following formats: PDF, EPUB, and Web

6th Edition Book

Minimum price

Suggested price$39.99

Book contents and access to supporting website.

$5.99

  • Example Game Rules
    Following the Game Recipes, these are 3 game rules examples
  • Free Affiliate Guide
    Learn how to use this document and leverage revenues in our Gaming Community.

5th Edition Book Resources and Game Developer Certification Course

Minimum price

Suggested price$169.99

Earn your respect in the industry with Phaser v3.x.x Game Developer Certification course includes free access to the Phaser v3.x.x Game Development Workshop Course.

$99.99

  • Book and Game Developer Certification Course
    This book and the Phaser III Game Design Workshop Course and Certification. Available after 95% book complete. Bonus Content: x,xxx files xxx MB (2018xxxx unzipped)
  • Free Affiliate Guide
    Learn how to use this document and leverage revenues in our Gaming Community.
  • Book 2D Rooms Creation (66 files; 17.2 MB)
    Following the book examples of generating Room Movement table with 2D arrays. (66 files; 17.2 MB
  • Book Artificial Intelligence (73 files; 3.91 MB)
    A*Star path finding for Phaser.
  • Book Back-end server-side middleware for ARRA (91 files; 1.94 MB)
    Two website back-ends to support ARRA games in ASP and PHP (91 files; 1.94 MB)
  • Book Bonus Games Source Code (416 files; 58 MB on disk)
    The book describes several games beyond ARRA rv_8 and rv_15. Here is the collection of software code for those bonus games. (416 files; 58 MB on disk). Life-Time licenses included a value of $180.
  • FREE Amazon Rule Books (2 files; 3.35 MB)
    Legends of Renown Deeds rulebook (Amazon edition - $2.99) - an active online RPG since 1993!
  • Book Labyrinth Generators Source Code (32 files; 4.02 MB)
    various methods to generate dynamic mazes in JavaScript, C/C++, and Java. Content includes a rare and hard to find document of Jamis Buck.
  • Phaser v3.x.x game project template (91 files; 37.9 MB)
    game project template using OLOO style game construction.
  • Blood Pit Walk-through Tutorial
    Step-by-step Game Recipe Series creating the Blood Pit In-Game-Module for Legends of Renown Deeds Gaming System.
  • Example Game Rules
    Following the Game Recipes, these are 3 game rules examples

Author

About the Author

Stephen Gose

Avatar is an adorable cartoon sketch of my wife. My 48th anniversary is this coming Sept 1, 2026!

Stephen Gose, Ph.D. Information Systems (honorary) (and second-generation German) is a retired Professor Emeritus with a 41-year career as a certified network engineer, and "Certified Cisco Academy Instructor" (CCAI) since 2002. He is listed in the Who's Who for Information Technology for his directly related work for the Internet backbones in the Caribbean, Netherlands, Israel, and Russia. He was awarded "Letters of Appreciation" from AT&T, and the German, Israeli, Dutch, and Russian Governments. Steve has nearly three decades of international "teaching and conference lecturing" in both Local-Area and Wide-Area Networks, network security, Internet backbones, software engineering, and program/project management. He is a retired US Army Signal Corps Officer. He earned, in 2014, the ITT Technical Institute's "Instructor of the Year" out of 8,000 instructors across 144 campuses throughout the USA. 

He graduated from Grand Canyon University with his first B.A. in Religions and Music Education, then a B.S. in Business Admin. from the University of Maryland, and an M.B.A. in International Management from Liberty University.

He is currently pursuing his Th.D. He has been a licensed minister since 1972 and a missionary to Okinawa, Japan. He earned the US Army Chaplain Outstanding Service Award in 1983. 

In his spare time(?), Steve enjoys creating online casual games, software engineering, and managing his online gaming businesses. 

My driving theme: "Always stay humble and kind"

His website is: https://www.Stephen-Gose.com/

His game showcase is: http://www.renown-games.com

His theology website: http://kingdomofgodprinciples.com/

Game Support Site: http://makingbrowsergames.com/

Review my profile on LinkedIn.com: https://www.linkedin.com/in/stephen-gose/

Contents

Table of Contents

Distribution Permission

  1. Supporting website

Forwards

Disclosures

Disclaimer

About this Workbook:

  1. Viewing the Source Code
  2. Links and References
  3. Who should use this workbook?
  4. 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. IPart I - Concept & Design

1Game Studio & Project Setups

  1. ACTUALLY START THE DAMN GAME …
  2. 1.1Workstation Setup
  3. Batteries not included … Web Server Required
  4. Deeper Dive: Testing MMoGs Locally
  5. Development Tools
  6. 1.2Project Setup
  7. Project Structure
  8. And its name shall be called …
  9. Project Directories & Files
  10. 1.3Game Project Preparations
  11. What makes a “Good” Game?
  12. Quoted Recommendations from Modd.io
  13. Game Copyrights
  14. Quoted from: http://www.copyright.gov/fls/fl108.pdf
  15. 1.4Game Design System™
  16. How it works
  17. 1.5Game Genres
  18. Deeper Dive: Game Genres
  19. GGInteractive — Game Design Course
  20. Deeper Dive: Game Modes
  21. 1.6Game Recipe™ Summarized:
  22. Development:
  23. Design:
  24. Encoding:
  25. 1.7Summary
  26. 1.8Chapter References:

2Building a Game Prototype

  1. How to Succeed at Making One Game a Month
  2. 2.1Example: Using Box Graphics
  3. 2.23D Prototypes
  4. 2.3“ToTo, … we’re not in Kansas anymore” — Dorothy
  5. 2.4Creating Prototype Mechanisms — 4-Step method
  6. Step 0) Preparation and Research
  7. Step 1) Generate Game Phases (as needed).
  8. Step 2) Generate code for triggering events.
  9. Step 3) Generate transition
  10. Step 4) Create your Game’s Core & auxiliary functions
  11. Deeper Dive: Writing D.R.Y. JS code

3Making a “Game Recipe”™

  1. 3.1Step #1) the Front-Door
  2. Task #1-1 Instructions:
  3. Compare your code
  4. Mobile “Single Web Page Applications” (SWPA)
  5. Cocoon.js Cloud Alternatives
  6. 3.2Task #2: Launching a Game
  7. Launching the Game.
  8. Game Config
  9. 3.3Deeper Dive: To Infinity and Beyond!
  10. 3.4Summary
  11. 3.5Chapter References:

4Game Phases, Scenes & Roses.

  1. You Don’t Know JS- How We Organize in JS by Kyle Simpson
  2. 4.1Bare-Bones Prototypes
  3. 4.2Using a Phaser Scene as a “Game Phase”
  4. 4.39 Essential Functions of a Phaser “Scene”
  5. 4.4Game Phases as Modules
  6. “Phaser.Game” — One File to Rule them all …
  7. Yes, Gandalf got it wrong!
  8. Main.js (aka “launch” or index.js)
  9. Boot.js
  10. Preload.js
  11. Deeper Dive: Artwork & Resources Security
  12. Deeper Dive: Phaser Cache
  13. Working with the Phaser Cache:
  14. Deeper Dive: Loader Examples
  15. Splash.js or Language.js?
  16. Main Menu.js
  17. Play.js
  18. Deeper Dive: JS Modules
  19. You Don’t Know JS Get Started - 2nd Edition by Kyle Simpson (Quote)
  20. 4.5Step #1 of 4: Generate Game Phases
  21. Dynamically Including Game Phases
  22. Deeper Dive: D.R.Y. Stand-alone
  23. Step #2 of 4: Game Phase Transitions
  24. Deeper Dive: The CMS “Game Shell”
  25. Deeper Dive: When to use a game shell
  26. 4.6Encoding Phaser Scenes as a “Game Phase”
  27. Vanilla, Chocolate, or Strawberry Creme-filled?
  28. Overriding Essential Functions inside Phaser.Scene
  29. Creating Scenes using ES5 Prototypes
  30. Creating Scenes using Phaser.Class
  31. Creating Scenes by extending Phaser.Class
  32. ES6 Considerations: “Strawberry”
  33. Creating Scene Configuration files
  34. Deeper Dive: Defining Other Scene Properties
  35. Deeper Dive: ES9 Modules
  36. 4.7Summary
  37. 4.8Chapter References:

5Game Recipe™ Automation Tool

  1. 5.1Deeper Dive: Database Protection Considerations
  2. 5.2Database Schema Construction (Copyright-able!!)
  3. Database Record Construction
  4. Database structure
  5. 5.3Remote Codebase Using AppML
  6. 5.4Building an AppML application
  7. 5.5Sample AppML codebase (Public Access)
  8. 5.6Remote codebase Using JSON
  9. Per-user storage
  10. 5.7Chapter Source Code & Demo
  11. 5.8Summary
  12. 5.9Chapter References
  13. IIPart II - Mechanisms & Mechanics Production

6Building Game Prototypes, Mechanisms & Tools

  1. 6.1Task #3: Mini-Me
  2. Creating an Avatar - “visual display”
  3. Deeper Dive: Display selected frames from a sprite-sheet.
  4. Displaying a particular sprite from sprite-sheet
  5. Deeper Dive: Using Base64 Images
  6. Creating an Avatar’s metadata
  7. Deeper Dive 3.19+ Tweens
  8. 6.2Task #4: Moving Game Elements
  9. Deeper Dive: Phaser III Input Manager
  10. Quoted from Dev Log 90 & Dev Log 133!
  11. Callbacks and Events
  12. 6.3NEW in v3.16.x (JAN 2019!)
  13. Deeper Dive: Future Proofing your source code.
  14. Deeper Dive: Configuring the Keyboard (Phaser v3.16+ updated)
  15. 6.4Task #5: Things that go bump …
  16. Walls and Camera boundaries
  17. Interior Decoration
  18. Deeper Dive on Game Objects hit areas.
  19. Doors, Knobs, and Buttons
  20. Deeper Dive: Writing Optimized Code
  21. Deeper Dive: Buttons as a “Class” or “Scenes”?!!?
  22. Deeper Dive: Button size considerations
  23. Deeper Dive: Adding Buttons & Mobile Touch
  24. 6.5Task #6: When Worlds Collide …
  25. 6.6Task #7: It’s curtains for you …
  26. 6.7Other Game Mechanics Categories
  27. 6.8The Finish Line: You’re AWESOME … Gloat, Gloat …
  28. 6.9Chapter Source Code & Demo
  29. 6.10Summary
  30. 6.11Chapter References

7Game Mechanics Systems

  1. 7.1Game-Play vs Game Mechanics vs Game Mechanism
  2. 7.2Game Mechanics (GM) Overview
  3. Game Mechanics Suggested by Schell
  4. Game Mechanics: “Actions”
  5. Game Mechanics as: Attributes, Objects, & States
  6. Deeper Dive: Game Phases Revisited
  7. Apple’s GameplayKit
  8. Deeper Dive: StateManager
  9. Deeper Dive: Object Manipulation in ES5/6/7/8/9/10+
  10. Game Mechanics: “Chance”
  11. Game Mechanics: Rules
  12. Deeper Dive: Rules
  13. Deeper Dive: Rule Categories
  14. Game Mechanics: “Skills”
  15. Game Mechanics: “Space”
  16. 7.3Phaser III API Relation to Game Mechanics
  17. Deeper Dive: Input Manager Event Horizon
  18. Quote Phaser Newsletter #118
  19. 7.4Summary

8Dem’s fightin’ words

  1. 8.1Launching Web Sockets
  2. 8.2Dynamic Combat Menus
  3. 8.3So, Give Me Some Space …
  4. “The Four Virtues of a good tactical turn-based combat system”
  5. Melee Weapons
  6. Ranged Weapons
  7. Is your game ‘juicy’ enough?
  8. 8.4OO!, OW! AH!, OW! Stayin’ alive! Stayin’ alive!
  9. Grid-less Combat
  10. Grid-ed Combat
  11. 8.5Tactical Tiled-Maps
  12. 8.6Squares and Checkered Grids
  13. References from Mozilla Developers:
  14. Deeper Dive: Phaser III Grids
  15. Grid Plugin
  16. Hexagonal Grids
  17. Red Blob Games
  18. Deeper Dive: Real hexagonal grids
  19. Squishes
  20. 8.7Rules of Engagement: Take 5 paces, turn, and …
  21. Been there … done that …
  22. 8.8“Where’s the beef?”
  23. Click-fest
  24. Guitar hero - Time to get it Right!
  25. Days of our Lives - Drama Theater
  26. SCA Virtual “Fighter Practice” by Steve Echos
  27. En Guard method
  28. Yeap! Ya betcha’ ‘ur life!
  29. 8.9Story narrative
  30. 8.10Frisking, Fondling, or Groping
  31. 8.11Chapter Source Code
  32. 8.12Complete Combat Prototypes
  33. 8.13Summary
  34. 8.14Footnotes

9Phaser III Game Mechanism Components

  1. 9.1“ToTo, we’re not in Kansas …” — Dorothy
  2. Index page inline script - Reviewed
  3. Adding Display objects
  4. Adding Control Mechanisms
  5. Adding Buttons & Mobile Touch
  6. Phaser III “Actions”
  7. Components
  8. What’s the Difference Between Class & Prototypal Inheritance?
  9. DOM
  10. Game Objects
  11. System Components
  12. 9.2Tile Map
  13. Tilemap Rendering - new Dynamic method
  14. Tilemap Rendering - new Static method
  15. Quote from Devlog 82:
  16. 9.3Phaser III Systems
  17. v3 Boot
  18. v3 Cache
  19. v3 Device Manager
  20. v3 Events
  21. v3 Input Manager
  22. Callbacks and Events
  23. Deeper Dive: v3.16+ New Keyboard rewrite!
  24. Keyboard Input - New Features
  25. v3 Loader
  26. v3 Sound
  27. v3 Scene Manager
  28. From v2.x.x States to Scenes
  29. v3 Texture Manager
  30. v3 Tween Manager
  31. Deeper Dive 3.19+ Tweens
  32. 9.4Phaser3 Finish Line: You’re AWESOME … Gloat!, Gloat!
  33. Phaser v3 Source Code & Demos
  34. Quote from Devlog 85
  35. 9.5v3 Animations
  36. Deeper Dive: History of Animation
  37. Animation Today
  38. Animation Recommendations
  39. Frame Rates Recommendations
  40. Tweens
  41. 9.6Camera & Viewports
  42. 9.7Summary
  43. 9.8Chapter Footnotes:

10Whazzz-sUP! …. HUD Development

  1. 10.1HUD Housing Development
  2. Quote Newsletter 146
  3. 10.2HUD as Panels
  4. 10.3HUD Panels outside the Canvas?!?
  5. 10.4HUD Demos
  6. 10.5Summary
  7. 10.6Footnotes

11Don’t make me think or “Artificial Intelligence for Dummies”

  1. 11.1The “6 of 9”
  2. 11.2Chasing
  3. 11.3Evading
  4. 11.4Patterns
  5. 11.5Fuzzy logic
  6. 11.6Finite State Machines (FSM)
  7. FSM Resolving Combat Outcomes
  8. FSM Resolving AI behaviors
  9. 11.7Recursive World Feedback
  10. Probability Data Tables
  11. 11.8Complete AI Prototypes
  12. 11.9Chapter Source Code
  13. 11.10Summary
  14. 11.11Footnotes
  15. IIIPart III: Distribution!

12Game Distribution

  1. “How to publish a game on the web??”
  2. 12.1Introduction: 8-Step Deployment Method.
  3. 12.2Distribution Preparation
  4. Development vs. Production
  5. 12.3Create A Game Pipeline
  6. 12.4Preparing for WebXR Deployment
  7. Does mobile gaming still need publishers?

13Marketing Channels

  1. 13.1Channel Selection
  2. 13.2What do I need?
  3. Advertising
  4. Quoted from Pocket Gamer.biz JAN 2020
  5. Deeper Dive: “Playable” Ads
  6. Partnerships & Sponsors
  7. Retail
  8. Billing
  9. Data
  10. Player Interactions
  11. Paraphernalia Merchandising
  12. 13.3Chapter Reference
  13. IVPart IV - Resources & “Walk-thru” Tutorials

14Phaser III Game Prototype Library

  1. 14.1Walk-through Tutorial Series
  2. Difficulty Rating #1: Introductory
  3. Difficulty Rating #2 to #3: Intermediate
  4. Difficulty Rating #4: Advanced - “The Full Monty!”

15What’s next?

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

More Resources

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

Appendix: Online Game Development

Appendix: Making WebXR Games!

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

Common Pitfalls

  1. Lacking Debugging Tools?
  2. Deeper Dive: Console Commands
  3. Same “Name-spaces”
  4. Callbacks
  5. Missing Documentation
  6. Deeper Dive: What is Dragon Speak

Phaser III Book Examples & Samples

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:

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earned over $14 million writing, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub