Phaser III Game Design Workbook

Phaser III Game Design Workbook

Game Development Guide using HTML5 & Phaser III JavaScript Gaming Framework

Stephen Gose

© Copyright 1997-2016 Stephen Gose. All rights reserved.

ISBN for EPUB version: 9780463950098

For my student@ Early Career Academy, Tempe, AZ

and @ ITT Technical Institute, Tempe, AZ

and more currently

To my students @ University of Advancing Technology (UAT), Tempe, AZ

Table of Contents

Distribution Permission

Viewing this eBook:

Disclaimer

Forwards

About this Workbook

Disclosures

Workbook Content

Book formatting:

Who should use this workbook?

Your newly obtained skills…

Bonus Content

Game Design System™ Recipes:

Our References:

Tweet This Book!

Part I - Concepts & Design

1 Business Considerations

1.1 Chapter One Self-Evaluation Quiz

1.2 Grade Your Readiness

1.3 Formal Business Launch Required?

1.4 Common Marketing Sense

1.5 Target Audience Considerations

1.6 New Dog, Old Tricks?

1.7 Copyrights & EULA

2 Building a Game Studio Workshop

2.1 Workstation Set-up Environment

2.2 Development Tools

2.3 Project File Structure

2.4 Summary

Part II - Capturing Your Ideas

3 The Art of Game Design

3.1 Generating Game Ideas & Mechanics

3.2 Concept Phase

3.3 Creating a Game Design Document (GDD)

3.4 Game Introduction

3.5 Game-Play Overview

3.6 Game Mechanics (GM)

3.7 Game Mechanics Suggested by Schell

3.8 Game-Play vs Game Mechanics vs Game Mechanism

3.9 Key Game Mechanism Categories

3.10 Using Phaser III API as Game Mechanics (GM)

4 Building a Game Recipe™

4.1 What makes a Good Game?

4.2 What makes a Great Game by Tony Paton

4.3 Preparing a Game Recipe™

4.4 What are you making?

4.5 What technology will you use?

4.6 What features are included?

4.7 What features are mandatory?

4.8 How will you encode it?

4.9 What’s your time line?

4.10 Are you ready?

4.11 Game Recipe™ Summarized:

4.12 Creating Prototype Mechanisms — 4-Step method

4.13 Summary

4.14 Chapter FootNotes:

5 Game Design Architecture

5.1 Game’s Front Door — its web page

5.2 Phaser Essential Functions

5.3 Bare Bones Prototypes

5.4 Game Menus as Modules

5.5 Skeleton Phase file

5.6 Summary

5.7 Chapter Footnotes

6 Distribution Preparation

6.1 Development vs. Production

6.2 Create A Game Pipeline

6.3 Preparing for Mobile Deployment

6.4 Chapter References:

7 Marketing Channels Deployment

7.1 Marketing Plan

7.2 8-Step Deployment method:

7.3 Channel Selection

7.4 Targeting Markets with the Tower of Babel

7.5 Channel Preparations

7.6 Chapter Reference

8 Game Mode

8.1 Perspectives and Viewpoints

8.2 Single Player

8.3 Massive Multi-player Online Games (MMOG):

8.4 Mixing & Matching

8.5 Summary

8.6 Chapter Footnotes:

9 Game Mechanism Components

9.1 ToTo, we’re not in Kansas … — Dorothy

9.2 Tile Map

9.3 Phaser III Systems

9.4 Phaser3 Finish Line: You’re AWESOME … Gloat!, Gloat! …

9.5 Phaser v3 Source Code & Demos

9.6 Animations

9.7 Camera & Viewports

9.8 Summary

9.9 Chapter Footnotes:

10 Network Concepts

10.1 Security Concerns

10.2 Game Services (Back-end)

10.3 CMS - Server-side Frameworks

10.4 Index Page (Non-Traditional Method)

10.5 Membership Login

10.6 Summary

10.7 Chapter Footnotes

Part III - Mozart Music Match Tutorial

11 Game Construction Walk-through

11.1 Production release version.

11.2 CodeIgniter & Phaser Integrated CMS

Appendix

Official Phaser III Tutorial

JSWiki

JS OOP Comparisons

Distribution Permission

This is 4th edition 25 JUL 2019.

All copyrights are reserved under the Pan-American and International Copyright Conventions. You may not reproduce this book, in whole or in part, in any form or by any means electronic or mechanical, including photocopying, recording, or by any information storage and retrieval system now known or hereafter invented, without written permission from the author.

NOTE: Book Editions Bonus Download Content is available from the book’s website: http://makingbrowsergames.com/design/ Thank you for your patronage.

Viewing this eBook:

This e-Book includes programming code which is optimally viewed in single-column, landscape mode and adjust the font size to a comfortable setting.

Disclaimer

All the information contained within is for the convenience of its readers. All information is accurate as can be reasonably verified at the time of original publication. However, content suggested may not reflect current industry recommendations after original publication date for ECMA-262 (also known as — aka — JavaScript, ES5, ES6, ES7, ES8 or ES9) or for Phaser III JS Game Framework. There are no guarantees nor warranties stated nor implied by the distribution of this information. Using the information in this document at the reader’s own risk, and no liability shall carry to the author. Any damage or loss is the sole responsibility of the reader.

This book’s intent is not to teach HTML5, CSS, nor JavaScript fundamentals, game design best practices of game design nor software encoding paradigms. Its content provides simple-to-follow worksheets, step-by-step instructions, and a straightforward, yet innovative approach, to building games from component prototypes using the Game Design System™ method. This process and source code are merely one way, and hence do not claim to be the best nor most efficient way of implementing these game mechanisms and mechanics. Stephen Gose LLC reserves the right, at any time and without notice, to change modify or correct the information contained in this publication. All websites listed herein are accurate at the time of publication but may change in the future or cease to exist. It is best to research dead websites links on The WayBack Machine The listing of website references and resources does not imply publisher endorsement of the site’s entire contents.

Warning: The Phaser newsletter dated 21 September, 2018 includes projected development on Phaser III. In August 2017, many features in pre-Phaser v3.16.x were removed. There were many business decisions on why they were removed based on financial support and sponsorship deadlines imposed. Phaser v3.14.0 (released OCT 2018) saw the return of these deleted features. In other words, Phaser v3.14.0 returns to the original vision of January 2017 after several rewrites. Phaser v3.15+ was the next massive re-write (released OCT 2018); followed by v3.16.0 DEC 2018. My best guess is that any and all books, tutorials and how to articles — written prior to Phaser v3.16.0 (NOV 2018) — are not fully functional with Phaser III (as v3.16+) and should be re-written to the Phaser v3.16.0 minimum standard baseline. Hence the reason this book is dedicated and updated to the official Phaser III (release v3.16.x) and has removed any references to previously released versions prior to v3.16+ (See newsletter #139 dated 20190211) Breaking Changes

Forwards

by Terry Paton: — "Copying or imitating is an awesome way to learn how to do something, traditional artists have done it for centuries. This practice was generally considered a tribute, not forgery, — If you want to get better at something, then trying to do it like those who already have mastered it. Look at the choices they have made and consider why they made those decisions, often important things are hidden in subtlety and the only way we learn those subtleties is by creating the same thing. The balance here is stealing versus inspiration. Ripping off ideas from someone else in a way that harms their hard work compared to producing something which is inspired by their work. If you plan on publicly releasing something, I recommend you should inject some of your own vision into any game you make, take a concept but then extend or change it to create something of your own."

by Christer Kaitila: The McFunky-pants Method — "Challenge yourself to create a code-base that compiles and runs in the first few hours. Make it so that you can accept inputs, move around, animate something, and trigger some sounds. This prototype, lousy a game as it may be, is going to be your best friend. The sooner you can have a working early playable prototype, the more likely you are to succeed. No-art prototypes also have one other major advantage: in previous games, I would make beautiful mock-ups in PhotoShop and gather hundreds of lovely looking sprites in preparation for the game. After development was complete, the vast majority of the art had to be replaced, re-sized, or thrown out. I’ve wasted thousands of hours making game-ready artwork before coding; these days I know that the tech specs and evolving game-play mechanics will mean that much of what you make at the start won’t make it into the finished game."

About this Workbook

This 4th edition offers new development tools and production methods I call the Game Design System™ in which you create Game Recipes™. Expert game developers already understand the Don’t Repeat Yourself (D.R.Y.) concept, yet few have taken a step back to the 10,000 foot view on their game production pipelines. We’ll do that aerial view in this book as we follow my newly proposed game development process for prototypes, mechanics and artwork integration. Along with our game construction, we’ll build tools that automate our production pipeline. I believe you will be surprised how quickly and easily we build games using the Game Design System™ with its Game Recipes™ tools. Although this workbook is intended to be a hands-on guide to HTML5 game development with emphasis on the Phaser JavaScript Gaming Framework. Yet, our project management applies to any popular game development framework.

Most of the content in this book is actually not inside these pages. The Internet is a living, dynamic resource of information that doubles every 35 days! I explain why this book refers to external resources in the Book Formatting Section below. You’ll find the external content in the footnotes, as reference links, and in the Bonus Content files (which are available from the supporting website.

http://makingbrowsergames.com/design/

All the source code is written in pure JavaScript or Phaser III Framework; it doesn’t use any additional abstraction layers such as TypeScript, CoffeeScript, or JQuery. JSLinting, minification/compression and obfuscation/security topics are discussed in the Marketing and Distribution Chapter.

I’ve gone to great lengths to make this book skim-friendly — even for my International customers. I have provided links to English (American) Jargon phrases that will help translate this content directly into your native language. The entire new 4th edition has more screen shots, step-by-step worksheets, thoroughly annotated source code listings and diagrams. I use Notes, Tips, Warning and Best Practices icons to encapsulate those ancillary topics for your further education from other experts in the gaming industry.

I assume that many readers will want to use this book as a reference (as demonstrated from the previous three editions) as well as a tutorial workbook. So, I’ve included references to other games, gaming engines, frameworks, indie developers, authors, their open source contributions, their articles, books, artwork, applications tools and their wisdom. **If you’d like a link to your content included in future updates, please use my contact information on the supporting website.

Disclosures

In this book, I am not paid to recommend any of the tools or services presented but I do use affiliate links. Here’s how it works. When I find a tool, service, author’s content, idea, or product I admire, I investigate if they have an affiliate program. If it exists, I get a special link and when you click it or confirm a purchase I receive a small percentage from that activity. In short, it’s the same methods everyone finds on any typical website; only now, those reference links are available inside books.

I think everyone, with any business savvy, should do this too; especially when you recommend books, services, and tools to your own products. Many publishers offer affiliate links. Whenever you recommend anything (hopefully this book? hint, hint!), use your affiliate links.

By law, I must disclose that I am are using affiliate links to help fund my publishing efforts.

Thank you for your patronage! I truly appreciate it.

Workbook Content

This abridged book is a hands-on guide to HTML5 game development using the Phaser III JavaScript Gaming Framework. By following my steps toward developing a complete system of games, you will translate my process into your own bespoke game design product(s) in a matter of hours! I will explain my rationale behind each decision so that you can adapt my methods into your products’ pipeline in a similar manner. When you finish this workbook and all the exercises, unlike every book on the market today, you should have a working copy of your own bespoke game — not merely a duplicate copy of mine! Several well-known game mechanics are provided as plug-ins or blueprints to scaffold your game prototypes and templates; this provides an agile-software development process to bootstrap your creations quickly into your own unique product releases. The appendices are reference guides into the necessary, free, and open-source assets. Here are the main topics we cover in the 4th Edition’s NEW content:

Game Generation Tools construction for Game Recipes™.

Game Category alignment with App Stores and the gaming industry.

Distribution and Marketing: who, where, and how to deploy finished game products with supporting data from current marketing analysis.

Coding Style Appendix: Migration away from classical OOP to OLOO compositions (A section for interested Senior Programming Engineers and the rationale on why and how. OR you could consume the You don’t know JS series.)

The Deeper Dive: dedicated sections for interested Software Engineers concerning Phaser v3.x.x.

The Game Design System™ development methods for Software Project Management.

Here are the main topics we will cover:

Part I. Concepts & Design Chapters 1 to 4: Dedicated to indie start-up and those moving from game hobbyist to commercial endeavor.

Part II. Production & Deployment Chapters 5 to 10: This content is what you typically find in other Phaser tutorials and Phaser Starter-Kits on the market today. Dedicated to the curious, students, teachers, and those new to Phaser JavaScript Framework.

Part III. Chapter 11: Mozart Music Match Tutorial

Book formatting:

Editor’s Note on eBook formatting: Why have separate external links and files?, you say?

Firstly, the WWW is a dynamic place with new content and methods appearing daily. In 1997, the Internet doubled its information every 7 years; by 2015, the Internet doubled its information every 35 days! What was once the cutting edge becomes deprecated and obsolete in a matter of a few years or even months! (for example, using window.onload initially mentioned in 2004 and now recanted & retracted by the original author!)

References linking to external concepts preserve this workbook’s integrity and freshness (and thereby your investment in my research), avoids copyright infringements, and permits featured and referenced authors to recant or update their own recommendations (as in the case of using window.onload and especially in the case Phaser v3.x.x JavaScript Gaming Framework frequent updates).

In general, this book’s narrative shows you how things work, whereas the aside call-outs, footnotes, and reference links delve into why things work as they do. It provides valuable information from other notable game industry experts. My research places the best current recommendation in this workbook, and filters out the cruft.If you follow all my reference links, you’ll have a greater store of knowledge and develop a better understanding about my concepts since we’ll share the same common knowledge foundation.

It shortens my book by hundreds of pages and lowers my publishing costs which then lowers your purchase price. By keeping the associated source code separated into a Bonus Content areas on the supporting website, it allows you to focus on and compare this book’s content discussions side-by-side with the source code. This permits you to read this workbook without interruptions — unlike many technical books to date. Now, Admit it, Honestly! Don’t you just hate reading miles of UN-commented, UN-documented source code only to arrive, finally, dozens of pages later, at the text explaining everything you just studied? Or some authors place their pages of explanation in front of their UN-commented, UN-documented source code. Neither method is satisfactory in my opinion. I would rather have the text explanations and source code side-by-side. Wouldn’t you?

Furthermore, it allows me to update my external online source code and supplements without republication. You are purchasing my months of research, investigations, synthesis, and experiments derived from those investigations as links within this book to its supporting website. I have trail-blazed the path for you to follow. It saves you the time of doing it yourself as you review my original research and learning paths. This is a great benefit for both of us concerning Phaser v3.x.x rapid release trends.

Who should use this workbook?

This workbook is aimed at both hands-on novices — those who enjoy learning by doing, and at experienced expert programmers in web application development; and, of course, those who want a finished game by their own designs and efforts. If you are interested in making browser games, especially for the mobile market, then this book is a perfect choice along with its companion volumes: the Phaser III Game Starter Kit Collection and Phaser III Game Prototyping. With this in mind, you will do a lot of writing, thinking, and coding in both HTML5 and JavaScript in this workbook. You may prefer using paper (external physical- or soft-paper) to organize your development ideas and processes.

This workbook is a tutorial guide into the Game Design System™ method using HTML5, CSS3, and JavaScript technologies with an emphasis on the Phaser III JavaScript Gaming Framework. I know that many senior software developers already have these technologies in their arsenal; but, I have received dozen of email complaints about this book’s former editions as being … too difficult for those just starting their own game studios. Therefore, if learning any of these mentioned technologies is what you are initially seeking, then I recommend a visit to W3Schools as your first FREE starting point. By following their instructions, you will learn a complete foundation in HTML, CSS, and JavaScript in a matter of hours! … then, return to this workbook and learn how to combine those technologies into your own game creations.

In this guide, I show each step of my design process, and my rationale behind those decisions so that you can adopt or modify them for your own customized games. If you are working with a team, I suggest you read the Appendix on Project Management before any sincere work begins in Part II. The source code (found in the Bonus Content downloads and supporting web site) is well-commented so you can easily understand my approach and keep focused on your conversion process into your final game product(s).

Therefore, my workbook is written for small- to medium-sized, business-to-consumer (B2C) game developers who sell physical or soft digital-goods. If you are a game development hobbyist, student or teacher, you should still find a wealth of information on project management, game design, game mechanisms, game mechanics, and insider tips on the Phaser III JavaScript Gaming Framework. Within these scopes mentioned, there are several types of indie-developers who would benefit most from this workbook:

Established game companies looking to explore new sales channels on the Web and develop an agile software process.

Former Flash Game Developers —like myself and thousand others — who are evaluating the Web/html5/JavaScript as a primary sales channel or trying to determine simply where to go next month (September, 2016!) since only