Phaser Game Prototyping
Building 100s of games using HTML5 & Phaser.js Gaming Frameworks (6th Edition includes v2.x.x & v3.24+)
The large print 6th edition workbook is your guide into the "Game System Designtm" & Microservices for Phaser v2.x.x, v3.24+, or any JS Game Frameworks. Easy to read, humorous approach to "full-stack" game development in single-player mode using WebSockets. Worksheets facilitate the creation process. Included are 1,506 files (184 MB uncompressed).
Buying multiple copies for your team? See below for a discount!
About
About the Book
This large print workbook is the 6th edition - a hands-on tutorial guide for Game Prototype creations using Micro-services and component object programming with an emphasis on Phaser v2.x.x, CE, v3.16+ and any JavaScript Gaming Frameworks.
Phaser Game Prototyping is a hands-on guide for making browser games using Phaser's official, CE (community edition) JavaScript Game Frameworks. Master the important skills and techniques you need for Phaser using 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 game projects. You'll also download supporting tools to classify the book’s snippets and add your own modification.
- Part I demonstrates basic game mechanisms and components from the Phaser JS Game Framework using the OLOO paradigm. It starts by showing you how you to build game mechanisms in any Phaser version! By the end of Part I, you’ll have a complete, fully-functional Game Prototype , reusable components, and the supporting tools to manage further game production. You’ll have a game character’s visual and its meta descriptions. Learn to control your avatar through either the keyboard, mouse, or touch-screen interfaces. Develop game environments, create game scene migrations and then learn how to use collision detection within a standard game loops. Build dynamic menu response system,and an interactive game world.
- Part II demonstrates how to connect all your new game prototypes and components into various game mechanics using the raw power of native JavaScript OLOO. What I show you, will open the pathway to building a game within a month or even 7-days! This is not hipe; I eat my own dog food and have pushed game prototypes out for final artwork within 7 days. You’ll learn to make RPG maze games, code 6 different combat systems, develop heads-up displays (HUD) that are both internal to and outside of the Phaser canvas, apply 6 different artificial intelligence systems, create tiled-maps with the Phaser features, and other fast-paced actions that cover all the popular game perspective of 2D and 2.5D gaming. I'll reveal what I'm doing with Phaser 3D and WebXR games too. You’ll discover how to develop games and multi-level isometric scenes using existing features in Phaser v3.13+. All these techniques -- and supporting source code -- are explained in an easy-to-understand manner for game designers to gain new skills or simply update your skills from Phaser v2.x.x.
You’ll find detailed working examples on the book's website (with dozens of illustrations and many concepts) you can freely apply to your own gaming projects. All the source code comments enhance the book’s explanation.
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 agile software development.
- Organized a standard file structure for developing games in general;
- Used a blank game template to scaffold further game projects;
- Imported resources and game assets;
- Displayed, animated and moved game avatars on various screen renderings;
- Managed groups of game objects;
- Deployed heads-up display (HUD) on 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;
- Included graphics effects (gfx) (particle systems, rotations, fades, shaders and more);
- Created and managed game state-phases;
- Managed permanent game assets across state-phases;
- Optimized your game for various mobile devices;
- Integrated 3rd-party scripts and services;
- Deploy single-player games.
- Web Sockets demystified for scalable massive online game deployments.
Who This Book Is For:
Students -- and professionals in -- game development with some experience in HTML5 and JavaScript who want to enhance -- or begin learning the essential techniques of -- Phaser v2.x.x JavaScript skills. If you are interested in making browser games, especially for the mobile market, then Phaser Game Prototyping is a perfect choice.
Categories
Feedback
Installments completed
17 / 17
Packages
Pick Your Package
All packages include the ebook in the following formats: PDF, EPUB, and Web
6th Book edition and 5th edition Bonus Content
Minimum price
Suggested price$39.99515+ page, Game Prototyping guide focused on Phaser JavaScript Framework in standard JavaScript and ES6, Phaser versions 2.x.x and 3.x. Bonus! Content: Free Affiliate Guide, 300+ page bonus content (1,508 resource files; 310+MB (uncompressed)). Total of 815+ pages! All chapters with complete source code available on the supporting book's website http://makingbrowsergames.com/book/. Bonus Content: 232 MB (20171216 - zipped)
$5.99
- Free Affiliate GuideLearn 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 Book (2 files; 3.35 MB)Legends of Renown Deeds rule book (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 a document of Jamis Buck.
Buying multiple copies for your team? See below for a discount!
6th edition Book (only)
Minimum price
Suggested price$90.39Special pre-release discounted price. DOES NOT INCLUDE BONUS CONTENT. 507+ pages, Game Prototype guide (only).
Free!
- Free Affiliate GuideLearn how to use this document and leverage revenues in our Gaming Community.
Team Discounts
Team Discounts
Get a team discount on this package: 6th Book edition and 5th edition Bonus Content
Up to 3 members
- Minimum price
- $19.00
- Suggested price
- $99.00
Up to 5 members
- Minimum price
- $31.00
- Suggested price
- $159.00
Up to 10 members
- Minimum price
- $55.00
- Suggested price
- $279.00
Up to 15 members
- Minimum price
- $79.00
- Suggested price
- $399.00
Up to 25 members
- Minimum price
- $119.00
- Suggested price
- $599.00
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
- 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
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.