Building Hidden Object Browser Games: Codeless Game Construction using Construct2 & Construct3. (Construct Game Starter Kit Collection) 9798376366059

Citation preview

Building “Hidden Objects” Browser Games Codeless Game Construction using Construct2 & Construct3. Stephen Gose This book is for sale at http://leanpub.com/cgc-c23-hidden This version was published on 2023-02-06 ISBN 9798376366059

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do. © Copyright, 2009-2023, Stephen Gose. All rights reserved.

Tweet This Book! Please help Stephen Gose by spreading the word about this book on Twitter! The suggested tweet for this book is: I’m making HTML Hidden Object games using the Construct Game Design workbook. The suggested hashtag for this book is #PBMCube. Find out what other people are saying about the book by clicking on this link to search for this hashtag on Twitter: #PBMCube

For my students @ Culpeper Public Schools, Culpeper, VA; @ ITT Technical Institute, Tempe, AZ; @ Early Career Academy, Tempe, AZ; and @ University of Advancing Technology (UAT), Tempe, AZ

CONTENTS

Contents Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . Distribution Permission . . . . . . . . . . . . . . Forewords . . . . . . . . . . . . . . . . . . . . . . . Disclosures . . . . . . . . . . . . . . . . . . . . . . Disclaimer . . . . . . . . . . . . . . . . . . . . . . . Workbook Content . . . . . . . . . . . . . . . . . About this Workbook . . . . . . . . . . . How to Read & Use this workbook: . . Viewing the eBook: . . . . . . . . . . . . The “Community” Workbook Editions External Links . . . . . . . . . . . . . . . . References Used . . . . . . . . . . . . . . Your newly obtained skills … . . . . . . . . . . . More Resources . . . . . . . . . . . . . . . . . . . Programming Courses . . . . . . . . . .

. . . . . . . . . . . . . . .

Part I — Concept & Design

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. . . . . . . . . . . . . . .

. i . i . i . ii . ii . iv . iv . v . vi . vi . vi . viii . ix . x . x

. . . . . . . . . . . . . . . . . . . . .

1

1. “Hidden Objects” Design Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . 1.1 About this Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2 2

2. Building “Hidden Objects” Games . . . . . . 2.1 Hidden Objects Genre Description . . > Game Genre Deconstruction . . . . . 2.2 Historical Background . . . . . . . . . . 2.3 “Hidden Objects” Gameplay Concepts .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

5 6 6 7 7

3. Introduction to Game Design . . . . . . . . . . . . . . . . . . 3.1 Game Design SystemTM & Components . . . . . . . . . 3.2 Game Mechanics (GM) — Logic & Rules . . . . . . . . 3.3 Game Mechanics (GM) — Data Structure . . . . . . . > “Free Forum Advice” on “Hidden Games” Creation > Deeper Dive: Solving Replayability . . . . . . . . . . 3.4 Game Framework Mechanisms . . . . . . . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

9 11 13 14 14 15 16

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

CONTENTS

3.5

Cashing In with “Hidden Object” Games . . . . . . . . . . . . . . . . . . . . . . 18

Part II: Construct2 Production . . . . . . . . . . . . . . . . . 20 4. Lesson 1: Game Project Launch . . . . . . . . . . . . . . 4.1 About Your Project: . . . . . . . . . . . . . . . . . . . 4.2 Project Settings: . . . . . . . . . . . . . . . . . . . . . 4.3 Configuration Settings . . . . . . . . . . . . . . . . . 4.4 Design Consideration: CMS, PWA, or SWPA! . . . > Creating a C2 SWPA Game Version? . . . . . . . > FYI: Creating a C2 CMS or PWA Game Version? 4.5 Comparing your code . . . . . . . . . . . . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

21 22 23 24 25 27 28 29

5. Lesson 2: Scaling Objects & Layouts . . . . . . . . . . . . . . . . . . . . . 5.1 What is Your Competition Doing? . . . . . . . . . . . . . . . . . . . . > Game Competitor Examples . . . . . . . . . . . . . . . . . . . . . . 5.2 My Evaluations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . > Game #1: Smurfs Interactive Game . . . . . . . . . . . . . . . . . . > Game #2: Highlights Kids: Hidden Pictures . . . . . . . . . . . . . . > Game #3: Spot the Difference — HTML5 Game (Construct 3) > Game #4: Ryan Guitar GitHub Example . . . . . . . . . . . . . . . > Game #5: Garage Sale . . . . . . . . . . . . . . . . . . . . . . . . . . . > Game #6: Messy Room . . . . . . . . . . . . . . . . . . . . . . . . . . 5.3 Competitors’ eCommerce Website Examples . . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

30 31 31 32 32 32 32 33 33 33 33

6. Lesson 3: Loading & Placing items. . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 6.1 Lesson Instructions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 7. Lesson 4: Game Mechanics Mgmt. . . 7.1 Inside The “Game Loop” . . . . . . . 7.2 Game Mechanics Structure . . . . 7.3 How to Create Events . . . . . . . . 7.4 Game Set-up . . . . . . . . . . . . . . 7.5 Game Play Phase . . . . . . . . . . . > Making the “Magnifying Glass” . > Managing Cooty Spiders . . . . . > Debugging Cooty Sizing . . . . . > Debugging the Cooty Inventory 7.6 Practice Method #1 . . . . . . . . . > Bonus Game & Download . . . . 7.7 Download Lesson 4 “.capx” file . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

42 43 44 45 45 47 48 50 50 51 51 51 51

8. Lesson 5: Game Conversion Methods. . . . . . . . . . . . . . . . . . . . . . . . . . 52

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

CONTENTS

8.1 8.2

8.3 8.4 8.5

Conversion Method #2 . . . . . . . . . . . . . . Lesson Instructions . . . . . . . . . . . . . . . . > Step #1: Building a Grid. . . . . . . . . . . . . > Step #2: Create more Layers. . . . . . . . . . > Step #3: Load images. . . . . . . . . . . . . . > Step #4: Deploy Hidden Objects. . . . . . . > Step #5: Game Mechanics & Events Used. Practice Method #2 . . . . . . . . . . . . . . . . Competitor Games Revisited! … . . . . . . . . Download Lesson 5 “.capx” files . . . . . . . . . > Available Bonus Games … . . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

52 53 53 54 55 55 56 57 58 58 58

9. Lesson 6: He says, “He’s already Got One”! . . . . . . . . . . . . . . . . . . . . . . 59 9.1 Modify a Gamer’s “Score & Discoveries” . . . . . . . . . . . . . . . . . . . . . . 59 9.2 Download Lesson 6 “.capx” files . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 10. Lesson 7: Find the Difference! . . . . . . . . 10.1 Lesson Instructions . . . . . . . . . . . . 10.2 Customized Margins . . . . . . . . . . . . 10.3 Deeper Dive: AI Project Preparations . 10.4 Download Lesson 7 “.capx” files . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

61 62 63 63 65

11. Lesson 8: “Game Lost & Won” Scenes! . . . 11.1 Hidden Item Inventory . . . . . . . . . 11.2 “Game Finished” Scene(s) . . . . . . . . > Determine Rules for “Game Won” . > Determine Rules for “Game Lost” . 11.3 Global Objects & Layouts . . . . . . . 11.4 Practice Session . . . . . . . . . . . . . . 11.5 Download Lesson 8 “.capx” file . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

66 67 67 67 68 68 68 69

. . . . . . . . . . . . . . . .

70

. . . . . . . .

Part III: Construct3 Production

12. Lesson 1: Game Project Launch . . . . . . . . . . . . . . . 12.1 About Your Project: . . . . . . . . . . . . . . . . . . . . 12.2 Project Settings: Color Theme, Start-up & Display 12.3 Configuration Settings: Advanced & Editor . . . . . 12.4 Design Consideration: CMS, PWA, or SWPA! . . . . > Creating a C3 SWPA Game Version? . . . . . . . . > FYI: Creating a C3 CMS or PWA Game Version? . 12.5 Comparing your code . . . . . . . . . . . . . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

71 72 73 74 75 77 78 79

13. Lesson 2: Scaling Objects & Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . 80

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

CONTENTS

13.1 13.2

13.3

What is Your Competition Doing? . . . . . . . . . . . . . . . . . . . . > Game Competitor Examples . . . . . . . . . . . . . . . . . . . . . . My Evaluations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . > Game #1: Smurfs Interactive Game . . . . . . . . . . . . . . . . . . > Game #2: Highlights Kids: Hidden Pictures . . . . . . . . . . . . . . > Game #3: Spot the Difference — HTML5 Game (Construct 3) > Game #4: Ryan Guitar GitHub Example . . . . . . . . . . . . . . . > Game #5: Garage Sale . . . . . . . . . . . . . . . . . . . . . . . . . . . > Game #6: Messy Room . . . . . . . . . . . . . . . . . . . . . . . . . . Competitors’ eCommerce website Examples . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

81 81 82 82 82 82 83 83 83 83

14. Lesson 3: Loading & Placing items. . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 14.1 Lesson Instructions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 15. Lesson 4: Game Mechanics Mgmt. . . 15.1 Inside The “Game Loop” . . . . . . . 15.2 Game Mechanics Structure . . . . 15.3 How to Create Events . . . . . . . . 15.4 Game Set-up . . . . . . . . . . . . . . 15.5 Game Play Phase . . . . . . . . . . . > Making the “Magnifying Glass” . > Managing Cooty Spiders . . . . . > Debugging Cooty Sizing . . . . . > Debugging the Cooty Inventory 15.6 Practice Method #1 . . . . . . . . . > Bonus Game & Download . . . . 15.7 Download Lesson 4 “.c3p” file . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. 92 . 93 . 94 . 95 . 95 . 97 . 98 .100 .100 . 101 . 101 . 101 . 101

16. Lesson 5: Game Conversion Methods. . . . . . . . 16.1 Conversion Method #2 . . . . . . . . . . . . . . 16.2 Lesson Instructions . . . . . . . . . . . . . . . . > Step #1: Building a Grid. . . . . . . . . . . . . > Step #2: Creating More Layers. . . . . . . . > Step #3: Load images. . . . . . . . . . . . . . > Step #4: Deploy Hidden Objects. . . . . . . > Step #5: Game Mechanics & Events Used. 16.3 Practice Method #2 . . . . . . . . . . . . . . . . 16.4 Competitor Games Revisited! … . . . . . . . . 16.5 Download Lesson 5 “.c3p” files . . . . . . . . . > Available Bonus Games … . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

.102 .102 .103 .103 . 104 .105 .105 .106 . 107 .108 .108 .108

17. Lesson 6: He says, “He’s already Got One”! . . . . . . . . . . . . . . . . . . . . . .109 17.1 Modify a Gamer’s “Score & Discoveries” . . . . . . . . . . . . . . . . . . . . . .109 17.2 Download Lesson 6 “.c3p” file . . . . . . . . . . . . . . . . . . . . . . . . . . . .110 © Copyright, 2009-2023, Stephen Gose. All rights reserved.

CONTENTS

18. Lesson 7: Find the Difference! . . . . . . . . 18.1 Lesson Instructions . . . . . . . . . . . . 18.2 Customized Margins . . . . . . . . . . . . 18.3 Deeper Dive: AI Project Preparations . 18.4 Download Lesson 7 “.c3p” files . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. 111 .112 .113 .113 .115

19. Lesson 8: “Game Lost & Won” Scenes! . . . 19.1 Hidden Item Inventory . . . . . . . . . 19.2 “Game Finished” Scene(s) . . . . . . . . > Determine Rules for “Game Won” . > Determine Rules for “Game Lost” . 19.3 Global Objects & Layouts . . . . . . . 19.4 Practice Session . . . . . . . . . . . . . . 19.5 Download Lesson 8 “.c3p” file . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

.116 . 117 . 117 . 117 .118 .118 .118 .119

. . . . . . . .

Part IV: Expanding this Prototype 20. Lesson 9: Adding Unique Features. . . . . . 20.1 “Play Again?” . . . . . . . . . . . . . . . . . > Lesson Instructions . . . . . . . . . . . > Reset the Global Variables. . . . . . . 20.2 A Better “Game Start” . . . . . . . . . . . 20.3 Integrating Multiple Languages?? . . . 20.4 Main Menu as a “Picture Gallery”? . . . 20.5 “Levels & Campaigns” Layout . . . . . . . 20.6 “Create Your Own Adventures” (CYOA) > Customized Margins . . . . . . . . . . 20.7 Touch & Mouse Controls . . . . . . . . . 20.8 Game Count-down Timers . . . . . . . . > Visual Timer Bar . . . . . . . . . . . . . > Kitchen Egg Timers . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . .120

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. . . . . . . . . . . . . .

. 121 .122 .122 .122 .123 . 124 .129 .130 . 131 .133 .133 . 134 .136 . 137

21. Lesson 10: Search Lists & Scoring . . . . . . . . . . . 21.1 Method #2 Static Lists . . . . . . . . . . . . . . . 21.2 Restricted Search with Random Deployment 21.3 Dynamic Search Lists & Quantities . . . . . . . > “Alchemist’s ApprenticeTM ” Example . . . . . . > “Agents From U.N.C.L.E.TM ” Example . . . . . . 21.4 Saving & Loading Game Sessions . . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

.140 .140 .143 .149 .149 .150 . 151

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

CONTENTS

Starting Your Own Game Studio!

. . . . . . . . . . . . . . .152

22. Lesson 11: One “GM” to Rule them all … . . . . . . . . . . . . . . . . . . . . . . .153 23. Lesson 12 Capstone: Exchanging Artwork . . . . . . . . . . . 23.1 Japanese Shinro Puzzles . . . . . . . . . . . . . . . . . . . . 23.2 Irezumi vs. Horimono Tattoos . . . . . . . . . . . . . . . . 23.3 Cooty Queen! . . . . . . . . . . . . . . . . . . . . . . . . . . . > Game Option Settings! . . . . . . . . . . . . . . . . . . . . 23.4 “It takes a Thief” — RPG Integration! . . . . . . . . . . . . 23.5 Computer Security Technician! . . . . . . . . . . . . . . . . 23.6 Interpol Agent . . . . . . . . . . . . . . . . . . . . . . . . . . . 23.7 3D Tomb Raider — a Hidden Objects RPG! . . . . . . . . . 23.8 Lyme Disease . . . . . . . . . . . . . . . . . . . . . . . . . . . 23.9 The Alchemist’s ApprenticeTM — a Hidden Objects RPG! 23.10 U.N.C.L.E. Agents — a “Hidden Objects” RPG! . . . . . . .

What’s next?

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. 154 .155 .156 .158 .158 .159 .160 . 161 .162 .163 .163 .165

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166

24. Game Distribution & Marketing . . . . . . . . . . 24.1 Introduction: 8-Step Deployment Method. 24.2 Selling Directly — The Advantages . . . . . 24.3 Book Review Protocol . . . . . . . . . . . . . . 24.4 Tell the world about your game! . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. 167 . 167 .170 .172 .173

25. Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 26. Bonus Development Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .176 26.1 Certification Examination . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .176

Appendix

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .177

More Resources … . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .178 “You don’t know JS Yet” by Kyle Simpson . . . . . . . . . . . . . . . . . . . . . . . . .178 Construct Demos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .178 Appendix: Game Developer Tool Kits . Artwork Resources . . . . . . . . . . . . Selling your Game Artwork & Assets JavaScript Garden . . . . . . . . . . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

.180 . 181 .182 .183

Additional Appendices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

CONTENTS

Appendix: Making WebXR Games! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185

Appendix: Safe JavaScript Using OLOO Deeper Dive: JS Delegation (aka “Inheritance”?) . . The old way . . . . . . . . . . . . . . . . . . . . . . . . . . Objects Linking to Other Objects (OLOO) . . . . . . Compare your code . . . . . . . . . . . . . . . . . . . . Object.create . . . . . . . . . . . . . . . . . . . . . . . . . Exercise Lesson 9: . . . . . . . . . . . . . . . . . . . . . . Game Singletons . . . . . . . . . . . . . . . . . . . . . . Deeper Dive: Object Manipulation objects in ES5/6 Lesson Summary . . . . . . . . . . . . . . . . . . . . . . Resource References: . . . . . . . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

Answers to Exercises

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

.187 .190 .190 .195 .196 .196 .198 .199 .200 . 201 . 201

. . . . . . . . . . . . . . . . . . . . . . . . . . . .202 Appendix: Safe JavaScript Using OLOO . . . . . . . . . . . . . . . . . . . . . . . . . .202

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

i

Preface

Preface Distribution Permission All rights 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 that is now known or hereafter invented, without written permission from the author. Brief quotations in critical reviews or articles are permitted without the author’s permission. Supporting website and bonus content: http://makingbrowsergames.com/

Forewords • 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 1 , — If you want to get better at something, then try to do it like those who’ve already 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 as compared to producing something which was “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.”

1 http://en.wikipedia.org/wiki/Art_forgery

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

ii

Preface

Disclosures • I refer to “Construct 2” under the moniker of “C2” and Construct 3 as “C3” to distinguish it as a clear demarcation between the versions. • Stephen Gose LLC reserves the right, at any time and without notice, to change modify or correct the information contained in this publication. 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 method everyone finds on any typical website; only now, those reference links are available inside ebooks and I use them as a substitute for “crowd-funding” websites. I think everyone, with any business savvy,2 should do this too; especially when you recommend books, services, and tools for your own products. Amazon and other publishers offer affiliate links. Whenever you recommend anything (hopefully this book? hint, hint!), use your affiliate link. By law, I must disclose that I am are using affiliate links. Amazon, in particular, requires the following: “We are a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.” Thank you for your patronage! I truly appreciate it.

Disclaimer • All the information, contained within, is for the convenience of its readers. It is accurate, as can be reasonably verified, at the time of original publication. However, this content may not reflect migrating application improvements nor industry recommendations after the original publication date for ECMA-2623 (aka (also known as) “JavaScript”, ES5, ES6, ES7, ES8, ES9, or ES10) or for any versions of this JavaScript Gaming Framework. 2 https://www.inc.com/neil-patel/11-mental-habits-that-will-improve-your-business-savvy.html 3 http://www.ecma-international.org/publications/standards/Ecma-262.htm

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

iii

Preface

• 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 these “dead websites” links in “The WayBack Machine” 4 . The listing of website references and resources does not imply my endorsement of any site’s entire contents. • There are no guarantees nor warranties stated nor implied by the distribution of this educational information. Using this information is at the reader’s own risk, and no liability shall carry to me — the author. Any damage or loss is the sole responsibility of the reader.

CONSTRUCT 2 — End-of-Lifea As of July 1st, 2020, Construct 2 was “sun-setted” (e.g.: “taken off sale”) and was no longer available for new purchases. On July 1st, 2021, Construct 2 was fully retired. This means that: • No further Construct 2 releases are made. • No official Construct 2 support will be provided — except for email support regarding any historical payment or license issues. • No further official NW.jsb updates will be issued for Construct 2. • All existing valid Construct 2 licenses will continue to work indefinitely. You will still be able to use the full features of Construct 2 if you’ve purchased it in the past - it is only continuing support and updates that will stop. Bear in mind though that if changes in other software impact Construct 2 features to stop working, no further updates will be forthcoming. • The online manual and tutorials will remain available. • The Construct2-related forums will remain accessible (but will be collapsed into a sub-category in the main forum list). a https://www.construct.net/en/blogs/construct-official-blog-1/sunsetting-construct-1505 b https://nwjs.io/

4 https://web.archive.org/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

iv

Preface

Workbook Content This book is a “workshop guide” to Construct5 , and an intermediate-level guide to HTML56 , CSS7 , WebSockets, efficient JavaScript programming fundamentals8 , and game design’s “best practices” 9 . (see Appendix: “JS OLOO for Modern Game Development Method”) I assume you (the reader) already know some of these technologies. If not, then a few hours spent on W3Schools10 can quickly remedy any deficiency and earn valuable certifications. The workshop instructor’s packaged edition includes PowerPoint slides and lecture notes. This workbook does provide simple-to-follow worksheets, step-by-step instructions, and a straightforward approach to building specific Game Mechanics from Construct components using my Game Design System™ methods discussed in the supporting “Code-less Game Construction” series. This tutorial workbook is written in a fun, friendly, conversational style with one or more example projects and numerous open-ended exercises that encourage you to include your bespoke game assets and features. When you finish this workbook, you should have your very own finished bespoke game — not just a mirror copy of mine — provided that you followed the exercises and guidelines.

About this Workbook This workbook is intended to be a hands-on guide for C2 and C3 game development for all registered book patrons! Our game production and project management could apply to any “code-less game development” framework! It’s not exclusive to only the Construct Gaming Framework family. C3 can load and run any C2 project with only a few extreme exceptions. You could begin your game studio products using C2, start selling your product line, then once revenues are coming in, subscribe to C3. This edition reveals different production methods which I call the Game Design SystemTM — in which, we’ll create Game Recipes™11 for specific “Game Mechanics”. Expert game developers 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 own game production pipelines. We’ll do that aerial view in this book at first, and then, as we follow this game’s development, we’ll “nose dive head-first” directly into those controlling 5 https://www.construct.net/en/tutorials/beginners-guide-construct-1 6 http://amzn.to/2nAYjxr 7 http://amzn.to/2mG01Zv 8 http://amzn.to/2nAYA34 9 https://gameprogrammingpatterns.com/ 10 https://w3schools.com 11 https://www.nateliason.com/blog/become-expert-dreyfus

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

v

Preface

events that breathe life into this “Game Mechanics”. I believe you will be surprised how quickly, and easily, we can build games using the Game Design System™ and its Game Recipes™. But more importantly, how quickly you can “construct” an entire gaming series.

How to Read & Use this workbook: Start by reading — or skimming through — the Introduction Section, so that together, we are speaking the same “game references” and terminologies. Then, select the Construct version that interests you and begin your bespoke game project development. Here are the topics in this edition: • Game creation for this Game Mechanics in either Construct2 (C2) ( …and coming soon for all registered book patrons … FREE the Construct3 (C3) instructions). • How to integrate these “Game Mechanics” with other “Gaming Genres” — for example, RPGs, or Combat Systems! • Deploy games as either a “Content Management System” (CMS), a “Progressive Web Application” (PWA), or a “Single Web-Page Application” (SWPA) for any device. • Analyze the current market demand for this specific Game Mechanics and Game Genre, where and how to deploy it. • Automatically generate various game board environment themes. • Instructor Guides and teaching resources are available for workshops in the Teacher’s edition with online course content. • Where to find and Access several online courses included with this book. • Coding Style Appendix: sections dedicated to interested Senior Programming Engineers12 and the rationale on why and how 13 migration away from classical OOP to OLOO compositions is important. • “The Deeper Dive” sections for interested Software Engineers concerning Construct Gaming Framework. • Each Part contains several sub-sections. The workbook starts with an “Introduction Overview” into the goals, game ludology, workstation set-up, and generation tools. In a matter of minutes, you will have a working game prototype for this Game’s Mechanics. All that remains to do is to add your own artwork and additional game features; after a few days, you’ll have a completed game ready to deploy to any “apps” store. • You’ll find detailed working examples, with dozens of illustrations and many concepts you can freely apply to your own gaming projects. • All the source code is externally linked and annotated with enhanced explanations. 12 https://medium.com/better-programming/how-i-outperformed-more-experienced-developers-as-a-juniordeveloper-and-how-you-can-too-19bc6206fa68 13 https://www.saturnflyer.com/blog/the-gang-of-four-is-wrong-and-you-dont-understand-delegation

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

vi

Preface

Viewing the eBook: This book includes programming code that is optimally viewed in single-column landscape mode, and adjust the font size to a comfortable setting.

The “Community” Workbook Editions The Community Edition is a subset of this workbook in which you give away your email address in exchange for either the step-by-step instructions from Part II (Construct2) or Part III (Construct3). If you provide insight, advice, corrections, etc. I will include your “LeanPub Account name”14 in the workbook’s “contributions”. You’ll need to validate your email address to get this Community Edition so that I am sending your a “stamped copy” to a legitimate email address. The benefits you receive from this “Community Edition” is that your “LeanPub Library” (you’ll get a new LeanPub account — if you do not already have one) will have the latest FREE updates, just as with any LeanPub book purchased.

External Links I’ve “gone to great lengths” 15 to make this book “skim-friendly” — even for my International customers by emphasizing important concepts in bold font type. I have provided links to (American) “English Jargon phrases” 16 that will help translate this content directly into your native language. 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. The Internet is a living, dynamic information resource that doubles every 35 days! There are several reasons this book points to external content because — 1. It provides you with the “research path” I took to present and develop my ideas. It takes all the guesswork out of it and conserves your research time and efforts. It saves you 100s of hours of your personal time searching for supporting facts and opinions. 2. It avoids copyright infringements and provides the required acknowledgments to all those “Open-source authors” for their contributions and use of their resources under these various licenses17 and EULA. 14 https://leanpub.com/about 15 https://dictionary.cambridge.org/us/dictionary/english/go-to-great-lengths 16 https://www.smartling.com/blog/40-american-slang-words-and-phrases-you-need-to-know/ 17 https://choosealicense.com/licenses/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

vii

Preface

3. It provides external authors the opportunity to recant (or update) their published content. Technology is a fast-moving target, and what was once “cutting edge” soon becomes obsolete. For example, the use of “window.onload” was recanted by its originator back in 2014 as an unsafe method for launching browser applications. 4. Finally, and most importantly, it reduces your initial purchase price from the reams of “padded source code content” — don’t make me embarrass those authors who do this and sell their books with 90% source code double-spaced — while keeping your investment in this book’s information “fresh”. This book would be double the size and triple the price if I had embedded all of the source code as others do. You’ll find your Bonus content, source code, and references — • in the footnotes links, • external reference links, and in the various linked files which are available directly from my supporting website — without registration nor logon thus keeping your personal information safe! • or from the latest edition updates found in your LeanPub.com personal library (assuming that you purchased this copy as a LeanPub patron). All the source code is provided as Construct project files and “pure” JavaScript (JS) — it doesn’t use any additional “abstraction layers” such as “TypeScript”, “CoffeeScript”, or “JQuery” for obvious reasons. I assume that many readers will want to use this book to quickly build their bespoke18 game projects. So, I’ve included reference examples to other similar game examples, gaming engines, frameworks, GUI game kits19 , indie developers, authors, their “opensource” contributions, articles, books, artwork 20 , application tools, and their wisdom. You’ll soon discover why I do this …

18 https://www.urbandictionary.com/define.php?term=bespoke 19 https://craftpix.net/categorys/2d-game-kits/?affiliate=112238 20 https://www.gamedevmarket.net/?ally=GVgAVsoJ

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

viii

Preface

References Used This tutorial is a derivative work and transpiled from single chapters of a larger collection of 16+ Game Mechanics and 19 sub-genres for the Phaser JS Gaming Framework found on http://leanpub.com/pgskc/. Single chapters are also available from the upcoming Construct Game Starter Kit Collection21 bundle. Later in this tutorial, you’ll discover that the raw JavaScript code is very similar to that provided for either version of Construct. • Construct Game Starter Kit Collection22 Bundle — in paperback or Kindle from LeanPub.com23 • Construct2 Official Online Manual24 • C2 Addon SDK Online Documentation25 • Construct2 JavaScript SDK Documentation26 • Construct3 Online Manual27 • C3 Addon SDK Online Documentation28

21 https://leanpub.com/b/cgskc 22 https://leanpub.com/b/cgskc 23 https://leanpub.com/b/cgskc 24 https://www.construct.net/en/construct-2/manuals/construct-2 25 https://www.construct.net/en/construct-2/manuals/construct-2-javascript-sdk/sdk-documentation/c2addonpackages 26 https://www.construct.net/en/construct-2/manuals/construct-2-javascript-sdk 27 https://www.construct.net/en/make-games/manuals/construct-3 28 https://www.construct.net/en/make-games/manuals/addon-sdk/guide/c3addon-file

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

ix

Preface

Your newly obtained skills … By the end of this workbook, you’ll have integrated into your own bespoke29 game design: • Built “future-proof” and flexible game architecture. • Used the Game Design System™ to create Game Recipes™30 from the Construct tools. • Adopted processes for software project management using “agile development31 ”. • Imported resources and game assets; • Displayed, animated, and moved sprite objects on various scene layouts and layers; • Incorporated “sound effects” (sfx) and theme music across various game scenes; • Deployed “heads-up display” (HUD) on game scenes both inside and outside the canvas; • Used customized web fonts; • Incorporated multiple user interfaces (touch, multi-touch, accelerometer, mouse, and keyboard); • Created and managed various Game Phases for CMS, SPWA, & PWA; • Managed permanent game artwork, and assets across this game series; • Optimized your games for various user IoT gaming devices32 ; • Integrated several 3rd-party scripts and services.

29 https://www.urbandictionary.com/define.php?term=bespoke 30 https://www.nateliason.com/blog/become-expert-dreyfus 31 https://www.interaction-design.org/literature/topics/agile-development 32 https://internetofthingsagenda.techtarget.com/definition/IoT-device

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

x

Preface

More Resources “Game Recipe™” Courses (purchased separately on specific Gaming Mechanics) using the Game Design System™ management method and concepts. These courses enhance your skills and are available from my educational websites hosted by LeanPub.com33 or Training By Blackboard, Books, and Browsers34 . You can earn your Game Development Certifications from my online courses35 , or (my personal favorite!) Zenva36 ; to enhance your resume.

Programming Courses See the growing catalog of courses for college credit, home-schooling, or personal skills development at Training by Blackboard, Books & Browsers37 • Using JavaScript OLOO in game development38 — Abandon OOP for Composition Game Development. • Codeless Game Design Workshop39 — Game Development Course using Construct 2 & 3 Gaming Frameworks. Instructor presentation materials included.

33 https://leanpub.com/u/pbmcube 34 http://tbcube.com./ 35 https://leanpub.com/u/pbmcube 36 https://academy.zenva.com/?a=47&campaign=RPGCaaS 37 https://www.tbcube.com/ 38 https://leanpub.com/c/jsoloo 39 https://leanpub.com/c/cgc-design-workshop

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Part I — Concept & Design

Part II: C2 Production

Hint: Affixing your idea to “physical media” secures your Copyrights © as an expression of your idea. You cannot Copyright ideas! You must use a “Patent” 40 or “Trade Secrets” to protect ideas. Use your idea to publish “multiple tangible expressions”.

40 https://en.wikipedia.org/wiki/Patent

“Hidden Objects” Design Workshop

2

1. “Hidden Objects” Design Workshop A step-by-step Game Recipe™1 Tutorial using Construct (C2 & C3) NOTE: Navigate to your Course “Downloads” folder, and unzip these “Artwork Assets”. You will need all these images and “demo” files for the following lessons. • https://makingbrowsergames.com/cgc-books/demos/ho-demos.zip • https://makingbrowsergames.com/cgc-books/artwork/ho_ArtworkAssets.zip

The Instructor Content Package is available here2 .

1.1 About this Workshop This tutorial is a single chapter from a larger collection of 16+ Game Mechanics (GM) found in Construct Game Starter Kit Collection3 . Furthermore, you can review many other Game Mechanics from this collection — it has 16+ of the greatest classical and popular game mechanics with 19 sub-genres. In this “Game Recipe™” 4 , we’ll create several simple “Hidden Objects” 5 Game Prototypes written in Construct2 (C2) or Construct3 (C3) Gaming Frameworks. Every lesson has editable, end-of-lesson examples6 that are available to play so you can compare your work to what each lesson is teaching. You will learn the basics of using either Construct Gaming Framework to create fundamental Game Mechanics (GM — the rules, logic, and data) and various Game Display Mechanisms — such as displaying image animations, detecting mouse, touch, collisions, inserting gamer’s controls and gameplay scenes. 1 https://www.nateliason.com/blog/become-expert-dreyfus 2 https://leanpub.com/cgc-c23-hidden 3 https://leanpub.com/b/cgskc 4 https://www.nateliason.com/blog/become-expert-dreyfus 5 https://en.wikipedia.org/wiki/Hidden_object_game 6 http://makingbrowsergames.com/cgc-books/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

“Hidden Objects” Design Workshop

3

• Part I Concept & Design — is an introduction to the Game Design System™ and using Game Recipes™ to build a “Hidden Objects” game prototype. • Part II C2 Production and Part III C3 Production — our goal is to “construct” a fully functional “Hidden Objects Game Prototype”. There are simple stepby-step “Game RecipeTM instructions” for each task. We’ll catalog and create various Game Mechanism Components7 — those “visual elements” that are separate from the core Game Mechanics rules, logic, and data. From this simple foundation, we can combine them as easily as a child would use “Lego”™ blocks to construct a toy castle. • Part IV Expanding Your Prototype — begins your final bespoke game edition(s). We discuss several game features that allow you to choose what your final game release will have. • Part V Building Your Game Studio — takes your “Hidden Objects” game prototype and proposes seven (7) other game variations you might create from this single foundation.

7 http://www.michael-richardson.com/processes/rup_for_sqa/core.base_rup/guidances/concepts/component_ A2E2B3B1.html

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

“Hidden Objects” Design Workshop

4

Step-by-step tutorial in 12 sequential lessons for C2 or C3. 1. Initialize the Construct Framework. 2. Scaling Game Objects & Layouts. 3. Loading & placing items. 4. Game Mechanics & Event Management. 5. Game Conversion Methods. 6. He says, “He’s already Got One”! 7. “Find the Difference” Games! 8. Displaying “Game Lost or Won” Scenes. 9. Adding Unique Features. 10. Search Lists & Scoring. 11. One “Game Mechanics” to Rule them all. 12. Capstone: Exchanging Artwork Themes. To get the most out of these lessons, you will refer often to the supporting documentation in the Construct3 (C3) Online Manual8 or the Construct2 (C2) Online Manual9 . After working through this tutorial you should be able to build your own Web games using either Construct Gaming Frameworks. 8 https://www.construct.net/en/make-games/manuals/construct-3/getting-started/get-construct-3 9 https://www.construct.net/en/construct-2/manuals/construct-2

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Building “Hidden Objects” Games

5

2. Building “Hidden Objects” Games

Part I Introduction to Game Design System™

We will pull inspiration from “Eipix Creating Worlds” 1 and “Hidden 4 Fun” 2 websites to see what we must do with the Construct Gaming Framework and “Hidden Objects” Game Mechanics. If you are an artist, then you have a strong advantage in creating “Hidden Objects” games over software engineers since the technical code is quite minimal — the primary reason why large game development studios prefer this game genre. Affixing your idea to “physical media” secures your Copyrights © as an expression of your idea. Never go public during your “Concept” and “Design” phases. You cannot Copyright ideas! 3 Use your idea to publish “multiple tangible expressions”.

1 https://www.eipix.com/hopa-games/ 2 https://www.hidden4fun.com/ 3 Now might be a good time to review what the US Copyrights & Patent Office says about game ideas.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Building “Hidden Objects” Games

6

2.1 Hidden Objects Genre Description This game genre is a highly addictive and mentally rewarding game to play. “Hidden Object” (HO) games (aka “Photo Hunt”, “Spot the Difference”, “hidden picture”, “Hidden Object Puzzle Adventures” (HOPA)4 , “click-and-go adventure” or “Seek & Find”) are highly popular and trending in the casual gaming market. Hidden Object games are largely visual games in which a gamer is asked to find particular items located somewhere on a cluttered screen. Hidden Object games help children develop abstract reasoning through their exploration of these cluttered images. It is similar to creating “pictures, people, and animals” in cloud formations. They are comparatively inexpensive to purchase but have a considerable investment in time, money, and artwork. The gamer controls their mouse and clicks to “find” hidden objects. Using customized artwork and one of several software packages (even Microsoft PowerPoint!), you can easily create your own hidden object games. “Hidden Picture” games typically revolve around a theme; popular themes might include murder mysteries, Gothic horror, Victorian, crime-scene investigations (aka “film noir” or “dark films” 5 ). Using a theme helps to brand your game, and potentially increase its popularity and recognition.

> Game Genre Deconstruction Deconstruction Process From a game programming perspective, basic Game-Play can be deconstructed — revealing tactical components inside a game’s overall mechanics and rules. For example, a fighting game deconstructs into various tactics such as attacks (or punches, throws, and kicks), defensive moves, and dodges. These tactics are assigned to game prototypes and mechanismsa — input keys, mouse clicks, and mobile screen interactions. These maneuvers are further enhanced into a strong or weak punch/kick from the various input controls. Therefore, game control mechanisms (e.g., buttons, mouse, touch-screen) are more of an engineering programming concept while Game-Play is more of a design heuristic concept. a http://gameprogrammingpatterns.com/command.html#configuring-input

4 https://www.eipix.com/hopa-games/ 5 http://www.filmnoirfoundation.org/filmnoir.html

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Building “Hidden Objects” Games

7

2.2 Historical Background Its origins were inspired by printed publications such as Highlights6 (a US Children’s activities magazine) and Scholastic Press’s7 “I Spy” book series written by Jean Marzollo and photographs by Walter Wick. Quoted from Wikipedia:a “An early hidden object game (circa 1991) was “Alice: An Interactive Museum” b . Computer Gaming World reported, back in 1993, that “one disadvantage of searching through screen after screen for ‘switches’ is that after a while one develops a case of ‘click-Titus’ of the fingers as one repeatedly punches that mouse button like a chicken pecking at a farmyard”. Other early incarnations are the video game adaptations of the I Spy booksc published by Scholastic Corporation since 1997.” a https://en.m.wikipedia.org/wiki/Puzzle_video_game#Hidden_object_game b https://en.m.wikipedia.org/wiki/Alice:_An_Interactive_Museum c https://en.wikipedia.org/wiki/I_Spy_(Scholastic)

2.3 “Hidden Objects” Gameplay Concepts A “Hidden Objects” game is a genre of puzzle game. Basically, a “Hidden object” game is a simplified point-and-click adventure with plenty of artwork images. Its features are: a first-person perspective, event-driven, “2D Puzzle” Game Mechanics. The gamer must find items — possibly provided by a search list — that are concealed within a cluttered picture. These games are comparatively inexpensive for a gamer to buy, but are quite expensive to build. This game genre is the most popular within the “casual gaming” category. “Hidden object” games became popular in 2005 as casual gaming began trending. Casual games generally involve simpler rules, shorter gaming sessions, and require fewer learned skills. They don’t expect familiarity with gaming console controls.

6 https://en.wikipedia.org/wiki/Highlights_for_Children 7 https://en.wikipedia.org/wiki/I_Spy_(Scholastic)

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Building “Hidden Objects” Games

8

Some game editions provide a list of items to find within its “cluttered photograph”. Several “events” happen when a gamer clicks on an item. 1. If an item is correctly identified, the gamer scores a point and perhaps other benefits. 2. If their selection is incorrect, a penalty “strike” is earned. The gamer has a limited number of incorrect guesses. 3. If a game session count-down timer is used, the gamer must find all the prescribed items before their session expires. The goal is to discover all the required items within the session’s time limits or with the fewest incorrect guesses.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Introduction to Game Design

9

3. Introduction to Game Design Approaching Game Development An Excerpt from “Macromedia Director Game Development” available from Amazon.coma Whether you are an experienced game developer, a master of video games, or even new to computers, a great computer game will offer you entertainment and often some type of competition. Over the years, basic games have evolved to encompass numerous genres such as role-playing, first-person shooter, side-scrolling, strategy, education, and simulations. Role-play games involve a main character or characters thrust into a heroic plot. A first-person shooter, however, involves adrenaline-fed killing and destruction. Although simulations are generally designed to be as realistic as possible, most side-scrolling, strategy and educational games tend to be a bit more simplistic. With the wide variety of games available today, the average person will have no trouble finding a game that suits their desires. As you develop your game design skills, avoid simply mimicking existing games. In most cases, however, any game you develop will fit clearly into a specific genre.

Focusing Your Game When you begin the process of designing a game, you must first decide how to approach the task. Determining the focus of your game is the best way to begin. You should decide on a topic, purpose, and theme for your game. Listing objectives that you want to accomplish through your game is often a smart way to begin. You might have objectives that direct the activities you will build into the game and a different set of objectives for the person who plays the game to accomplish. Through your thinking process, you will determine exactly what your game is about and how you should go about creating it. How you focus your game will affect all the decisions you make later in the design process. a https://www.amazon.com/gp/product/0761532277/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&tag= pbmcube-20&camp=1789&creative=9325&linkCode=as2&creativeASIN=0761532277&linkId= 1e873aeea3ace187eb3bec58fba906c8

“Why should I study a “systems-based” design?”, you say? Answer: Yes! Why indeed! The earliest decisions about what kind of game(s) a studio builds will impact the following development and production activities of that project’s management. It affects how … © Copyright, 2009-2023, Stephen Gose. All rights reserved.

Introduction to Game Design

10

• Construct “encodes” your features, • The scenes, layouts, and layers will optimize Game Mechanics’ Events, and • The “time-consuming animations” and “cut scenes” are handled — just to mention a few. There’s also a heavy cost associated with how much creative freedom is permitted. Historically, games with “open-ended” possibilities tend to be much more difficult to accurately schedule. The Game Design System™ addresses those shortcomings in its project management approach. Creating your own bespoke game is an exciting adventure in creativity using the Construct Game Framework (or with any Gaming Framework 1 for that matter); and, at the same time, it’s fun! However, dealing with all those “full-stack” technical details2 — such as web pages, artwork production3 , collisions, sprites, “game phases” (and there’s more!) — can be quite intimidating; especially, if this is your first experience with such game components.4 In general, Construct, — and any other code-less Framework — generates all the JavaScript resource libraries for us that run inside our browser or Internet device. Any of these “code-less frameworks” simplifies and abstracts those gaming programming patterns and algorithms5 into an easy-to-use, high-level “worksheet(s)” for those JavaScript functions. Using these “worksheets”, we can quickly build various twodimensional ( aka “2D” or 2.5D6 ) and possibly even 3D!!7 games inside a simple HTML5 tag 8 . Construct does 95% of all that “work” for us; and beyond that, all you need is your imagination and some basic logic. If you’d like to create “complex game interactions” then JavaScript knowledge becomes handy; and with only a few hours spent, you can gain that knowledge for FREE from W3Schools9 . So, let’s begin by creating a simple “Collapsing Blocks Game Mechanics and Mechanisms”. Hint: JavaScript is NOT the end-all for online gaming! To “future-proof” 10 your time spent developing any game, you should begin reading about the “Internet-of-Things” (IoT)11 , cloud-based “DevOps” 12 and “web assembly” 13 . 1 https://makingbrowsergames.com/gameDesigner/index-randommechanic.html 2 https://roadmap.sh/frontend 3 https://www.gamedevmarket.net/?ally=GVgAVsoJ 4 http://www.michael-richardson.com/processes/rup_for_sqa/core.base_rup/guidances/supportingmaterials/use_ component_architectures_CBC2F6B5.html 5 https://web.archive.org/web/20200516234514/http://gameprogrammingpatterns.com./ 6 https://en.wikipedia.org/wiki/2.5D 7 https://en.wikipedia.org/wiki/Three.js 8 https://www.w3schools.com/graphics/game_canvas.asp 9 http://www.w3schools.com 10 https://medium.com/@george3d6/stop-future-proofing-software-c984cbd65e78 11 https://www.sas.com/en_us/insights/big-data/internet-of-things.html 12 https://azure.microsoft.com/en-us/overview/what-is-devops/ 13 https://developer.mozilla.org/en-US/docs/WebAssembly

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Introduction to Game Design

11

3.1 Game Design SystemTM & Components

Game Design System™ creating new Games by “re-skinning” (changing the Artwork Themes!)

Game classification is diverse. So, I’d like to agree on some standard definitions as we “cook up” our game using the Game Design system™, its Game Recipe™14 , and tools. • “game prototypes” — are a blend of three components: the “Game Mechanics” (GM) data, logic, and rules; the visual “Artwork Theme” assets; and the “Game Framework Display Mechanisms” (GFDM). Quoted from “Construct Game Starter Kit Collection15 ” (page 69), “By combining all of our game mechanisms, with a set of game mechanics — its gameplay “rules and logic” system — as noninvasive aspects in our gaming product16 — along with an artwork theme17 , we’re able to create multiple game products quickly. It simply becomes a matter of exchanging any of those “3 cross-cutting” components18 into a new innovative mixture for a new game product. This is the secret to concocting a new game19 every month or even every week! For example, swopping a “Guitar Hero” 14 https://www.nateliason.com/blog/become-expert-dreyfus 15 https://leanpub.com/b/cgskc 16 https://web.archive.org/web/20150328191148/https://know.cujojs.com/blog/oop-is-not-my-hammer 17 https://craftpix.net/categorys/2d-game-kits/?affiliate=112238 18 https://web.archive.org/web/20210306051048/http://know.cujojs.com/tutorials/aop/intro-to-aspect-orientedprogramming 19 https://www.vocabulary.com/dictionary/concoct

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Introduction to Game Design

12

artwork theme with a “Plants & Zombies”. The new game uses the same “Game Mechanics” and “Game Display Mechanisms” but with an “organic garden” look and feel! From Page 117, “… let me write that code once and reuse it for similar items in other games as a “component prototype” — this is the secret sauce in our Game Recipes™! Keep your “featured ingredients” D.R.Y (Don’t Repeat Yourself) and use it everywhere in your game Studio!” Construct has already given us many “Plug-ins” components to help us. (See the Construct Manual for more Plugins, Behaviors, and Effects!) • “mechanics” — are written into Construct’s “Event sheets”. You merely describe how your game “works” using a “logical block system”. Quoted from “Construct Game Starter Kit Collection20 ” (page 68), “From a game programming perspective, basic Game-Play can be deconstructed — revealing tactical components inside a game’s overall mechanics, logic, and rules. For example, a fighting game deconstructs into various tactics such as attacks (or punches, throws, and kicks), defensive moves, and dodges. These tactics are assigned to game prototypes and mechanisms — the input keys, mouse clicks, and screen interactions …” and • “mechanisms” — are those visible objects placed in Construct’s “Scenes, Layouts, and Layers”. Quoted from “Construct Game Starter Kit Collection21 ” (page 85), “The gameboard grid defines the Game Mechanics (GM) movement rules; how the grid is drawn is a Game Framework Display Mechanism (GFDM). Players will send their decisions from their device’s inputs — keyboard, mouse, gamepad, etc. — and other “widget” mechanisms we’ll design as “drop-down” menus, “buttons”, and “sliders”. Mechanisms are the “visual-display elements” of a Construct’s Game Framework Display Mechanism (GFDM).” • game genres — can be confusing too! The inconsistency comes from trying to describe a game’s mechanics, a game’s delivery with details associated with its theme. “Genres are not usually defined by the actual content of the game or its medium of play but by its common challenge.” quoted from (Fundamentals of Game Design)22 . The usual challenges are the rules which govern gameplay. Game genres are separate from their interfaces, and management operating system platforms. If we turn to ludology (aka “gaming theory”23 ), it classifies games according to several criteria —

20 https://leanpub.com/b/cgskc 21 https://leanpub.com/b/cgskc 22 http://amzn.to/2eVj1VO 23 https://en.wikipedia.org/wiki/Game_theory

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Introduction to Game Design

13

whether a game is symmetric24 or asymmetric, what a game’s “sum” is (zero-sum25 , constant sum, and so forth), whether a game is a sequential game26 or a simultaneous one27 , whether a game includes perfect information28 or imperfect information29 , and • whether a game is determinate30 . • • • •

Exercise: Download Free Bonus Content: “Game Category Classifications Compared” 31

3.2 Game Mechanics (GM) — Logic & Rules The game mechanics seem simple enough; they are a visual/optical illusion puzzle game that involves hidden items and optical illusions in which the player must find objects from an assigned task list. The listed items are hidden/concealed within a clutter-filled background picture. The game’s task lists are a series of difficulty levels. They comprise a variety of “hidden” items to find throughout a jumble of clutter throughout a scene. Variations of this game’s mechanics include “finding the differences” between two nearly identical pictures, a flashlight (visual masking), and other “seek and find” puzzles or “journey adventures”. Sometimes a count-down timer is used and creates a sense of urgency to find specific items quickly in “easy levels” — less cluttered — scenes. If a “camouflaging” or “alpha transparency” is used. A player may be given a limited number of “hints” and or attempts to discover items. Exercise: Read this article32 about different variations applied to Hidden Object games. Exercise: Read this article33 on tools to develop Hidden Object games.

24 https://en.wikipedia.org/wiki/symmetric_game 25 https://en.wikipedia.org/wiki/Zero-sum_game 26 https://en.wikipedia.org/wiki/sequential_game 27 https://en.wikipedia.org/wiki/simultaneous_game 28 https://en.wikipedia.org/wiki/Perfect_information 29 https://en.wikipedia.org/wiki/Complete_information 30 https://en.wikipedia.org/wiki/Determinacy 31 https://makingbrowsergames.com/starterkits/_GameCategoriesSubmissions.pdf 32 https://medium.com/@sellsourcecode/get-your-own-thrilling-hidden-object-game-on-playstore-within-days880c2d98cfb7 33 https://tiie.w3.uvm.edu/blog/2-tools-for-building-hidden-object-games-with-students/#.XbIJEehKiUm

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Introduction to Game Design

14

3.3 Game Mechanics (GM) — Data Structure “Hidden Objects” games are artwork-intensive. SpriteSheets will only help consolidate various items per level. See how slow this example34 runs on your mobile device. A second major flaw, in Hidden Object games, is that their “replay value” is mostly none existent. A quote from a “discourse.group”35 and summarized from this blog 36 provide several clues about this genre’s construction; but, they offer nothing about the “replay value” — “Replayability” equals “popularity hits”.

> “Free Forum Advice” on “Hidden Games” Creation • “Load a scene” — this is typically a cluttered room stuffed with items … a hoarder’s paradise! • “Add an image to the scene” — in my opinion, here’s where this recommendation falls apart. Taking this development path and advice ultimately ends with games rich in artwork and thereby resulting in a multitude of graphic files to download. I’ll show some tricks later to avoid this poor bulky recommendation. • “Add a lot of images to the scene” — in my opinion, another “thoughtless” recommendation. Following this advice leads to “z-index” and “overlapping layer” problems, specifically for their specific framework’s displays (aka Game Mechanisms Component). A better recommendation implements a single 2D array (grid) shown later in this workbook that resolves the “overlapping items. • “Position all the images correctly” — once again, in my opinion, poor advice or rather a piece of advice that is attempting to “offset” the problems introduced from the previous bullet. I reveal a better recommendation with image rotation further on. • “Display a list of images to be found” — in other words, a task list — yet again, in my opinion, another poor long-term solution. Instead of “permanently gluing” an “assignment list” to each level, it should be randomly generated and dynamically allocated per game session. It would be far better to use MVVM described in Construct Game Starter Kit Collection37 and load initially fixed JSON data per level and then randomly generate content per game session. Replayability is discussed below. • “Listen for clicks on images” — finally some rock-solid advice, but how would this work on a mobile device? Yeap, covered later in this workbook. 34 https://games.finfunmermaid.com/games/spot/release/index.html?gameid=finfun&p=finfun 35 https://phaser.discourse.group/t/hidden-object-game-tutorial/737/3 36 https://itstillworks.com/12174945/how-to-make-a-hidden-object-game 37 https://leanpub.com/b/cgskc

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Introduction to Game Design

15

• “Show some reward when a correct image is clicked” — again some rock-solid advice … but wouldn’t that just be common sense when using a “Heads-UpDisplay” (HUD)? Why not limit the number of incorrect selections? Perhaps, we might additionally add “hints” or “penalties” for wrong guesses? • “Etc….” — as if to say, follow the Steps provided in Construct Game Starter Kit Collection38 !

> Deeper Dive: Solving Replayability Opinion: Expanding The “Replay Value” Of Games Quote: “One of the nebulous terms that game journalists seem to use to taunt developers is “replay value.” According to many reviewers, a game’s not very good unless it’s fun to play multiple times. This is partly an issue of its economy; a game that bears replaying provides more hours per dollar than one that does not. It’s more an issue of breadth, however. Replay value comes from many things, and one of them is the ability of the game to let players have a different experience each time they play. This breadth of experience means that players who enjoy a game the first time can experience more entertainment from the game by replaying it in various ways. Replay value’s not just a buzzword. It means that players that like a game can see more of it without the developers creating an expansion pack or a sequel. It increases the longevity of the game in the hearts of individual players and, on a more mercenary level, increases the amount of time word-of-mouth can spread about the game. There are three basic kinds of replay value. The first is the ability to re-experience previous game content, in relatively unaltered form, with a minimum of fuss. The second is the ability to reinvigorate the game’s challenge by making it more difficult or adding constraints to the gameplay. The third is the ability to reimagine the gameplay by changing the goals or the style of the game on a second play-through. Each of these three has a different appeal to different players. There’s really no excuse for a developer making a large game to leave any of these three types out. Each of the three kinds of replay value “re-experiencing content, reinvigorating challenge, and re-imagining gameplay” can be added to a game with little additional effort. …” Read more recommendations …a a https://www.gamedeveloper.com/pc/opinion-expanding-the-replay-value-of-games

38 https://leanpub.com/b/cgskc

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Introduction to Game Design

16

3.4 Game Framework Mechanisms

Game Design System™ User Interactions to Game Mechanics (GM)

Hint: The “Game Mechanics” (GM) component could be either local (on a gamer’s device) or remote (on a web server managing Multi-player games).

So then, “What’s a game prototype”, you asked? Answer: It is an operational gaming foundation that can: 1. accept inputs (Game Framework Mechanism (GFM)); 2. move game elements and components (Game Framework Mechanism (GFM)); 3. transitions between game phases, and translate “game actions” (Game Mechanics (GM) which dictates a change in the visual elements displayed Game Framework Mechanisms (GFM).) 4. reacts to internal game object collisions with visual animation and “Heads-Up Display” (HUD) feedback (both Game Mechanics (GM) and Game Framework Mechanisms (GFM)). What are the benefits of creating a game prototype first? © Copyright, 2009-2023, Stephen Gose. All rights reserved.

Introduction to Game Design

17

Answer: See the latest comments from various gaming experts here39 and here40 ; and other software engineers’ opinions about prototyping in general — here.41

Using Construct as a Component Manager — “Objects Linking to Other Objects” (OLOO)

The Game Design SystemTM concept is clearly echoed in the Construct Gaming Framework, GDevelop, Apple’s Game-Play Kit, and Play Canvas as “Entities and Components42 ”. Apple’s Game-Play Kit plainly states, “The Entity-Component design pattern is an architecture that favors composition over inheritance. To illustrate the difference between OOP inheritance-based and composition-based architectures, consider how you might design an example “tower defense” style game, with the following features …” Read the complete article “Designing with Entities and Components” 43 . 39 https://www.quora.com/What-is-the-benefit-from-creating-the-prototype-of-a-game-first# 40 https://www.quora.com/Do-game-developers-create-prototypes-first-before-programming-the-actual-game 41 https://www.sqa.org.uk/e-learning/IMAuthoring01CD/page_06.htm 42 https://developer.apple.com/library/archive/documentation/General/Conceptual/GameplayKit_Guide/ EntityComponent.html#//apple_ref/doc/uid/TP40015172-CH6-SW1 43 https://developer.apple.com/library/archive/documentation/General/Conceptual/GameplayKit_Guide/ EntityComponent.html

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Introduction to Game Design

18

Exercise: Read Entities and Components44 / Inheritance-Based Architecture Hinders Game Design Evolution. Exercise: Read Entities and Components45 / Composition-Based Architecture Makes Evolving Game Design Easy.

3.5 Cashing In with “Hidden Object” Games Exercise: Scout out your competition on Code Canyon46 for “hidden objects” games (aka hidden “photo”, “pics” or “items”, “seek and find”, “spot” or “find” the differences). How many did you find? Here’s what I found …

• As of 20191031, this developer 47 sold 18 Hidden Object games, for $23 each, since 10 November 18. That’s $414 in total sales in barely over a year! If you’ve read Construct Game Design Workbook 48 then you already know that the top 50% of all games, from all the app stores combined, earn only $150(!) total annual revenues. This developer has managed a 276% increase (i.e., $414/$150) beyond the average “app stores annual return”. • Another game developer 49 earned $688 since 16 October 18 (as of 20191031) with a different style of Hidden Object game that we’ll develop next — “Find the Difference”. For this one game alone, he has 43 sales (as of 20191031), at $16 each, for a 458% increase beyond average app store returns. He has earned total revenues (from his entire product line) of $40,000+ over the past 10 years — an average of $4,000 per year ROI.

If your game(s), in all the app stores combined, is earning more than $150, you’re on your way toward the next “high-water mark” of the top 80% ($3,100 annually).

44 https://developer.apple.com/library/archive/documentation/General/Conceptual/GameplayKit_Guide/ EntityComponent.html#//apple_ref/doc/uid/TP40015172-CH6-SW1 45 https://developer.apple.com/library/archive/documentation/General/Conceptual/GameplayKit_Guide/ EntityComponent.html#//apple_ref/doc/uid/TP40015172-CH6-SW1 46 https://codecanyon.net/item/hidden-object-html5-game-capx/22825769?ref=PBMCube 47 https://codecanyon.net/item/hidden-object-html5-game-capx/22825769?ref=PBMCube 48 https://leanpub.com/cgdw 49 https://codecanyon.net/item/spot-the-differences-html5-game/22714755?ref=PBMCube

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Introduction to Game Design

GG Interactive — FREE Game Design Course Genres don’t help market a game — instead, the selection of a genre affects what (the size of) the audience is likely to be interested in and willing to purchase a game. Genres do help an audience understand the basics of a game by promising them a certain amount of familiar elements they desire (or demand) in a particular genre. For example, fans of medieval fantasy will expect some common themes in a Fantasy Real-Time Strategy (FRTS) game: knights, castles, troop combat, and magic, to name a few. As a game designer, it is important to understand what kind of audience expectations exist across different genres. Stray too far from these expectations without designing a brilliant alternative and the game will lose its audience. Stick too close to what has come before and the game will be overlooked as offering nothing new. Even the bold designer that intends on rewriting all that we know about how a genre game is played, needs to understand what, to this point, has made the genre popular before deconstructing it and making it better.

Exercise: Launch your personal FREE Game Design course50 .

50 http://store.gginteractive.com/launch/9fe770a6-c876-a921-80d7-36a7-7e0e034a/GDC-GD-0100

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

19

Part II: Construct2 Production

Part II: C2 Production

Hint: Affixing your idea to “physical media” secures your Copyrights © as an expression of your idea. You cannot Copyright ideas! You must use a “Patent” 51 or “Trade Secrets” to protect ideas. Use your idea to publish “multiple tangible expressions”.

Quote52 , “Note that “Creative Commons” does not recommend53 its licenses be used for software or hardware.”

51 https://en.wikipedia.org/wiki/Patent 52 https://creativecommons.org/faq/#can-i-apply-a-creative-commons-license-to-software 53 https://choosealicense.com/non-software/

21

Lesson 1: Game Project Launch

4. Lesson 1: Game Project Launch Construct2 (C2) uses a programming-free event system to design games. With just a single click, we can create a new game project. (I’m assuming you’ve already read the “Beginner’s Guide to Construct2” 1 about how to do that? If not, take just a few minutes and review how to set up a new project.) Let’s begin by creating a “New Empty Project” …

Creating a New C2 Project 1 https://www.construct.net/en/tutorials/beginners-guide-construct-47

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

22

Lesson 1: Game Project Launch

Completing the Project’s metadata

We’re not finished just yet … We should complete the project’s metadata.

4.1 About Your Project: • Project Name — for internal staff references and your customer service. • Version — I use “Semantic Versioning 2 ” and have encouraged all my students to do the same. Labeling version releases is NOT a new science! In fact, software engineers probably do something extremely close to this already. The problem that they’re trying to solve is: “close” isn’t good enough. Without compliance with some formal specification, versioning numbering is essentially useless for “dependency management”. By giving a name and a clear policy for versioning 2 https://semver.org/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 1: Game Project Launch

• •

•

•

•

23

ideas, it becomes easy to communicate your intentions to clients about your software. Once these intentions are expressed clearly, flexible dependency specifications (but not too flexible, mind you …) can finally be achieved. Read more details about “Why Use Semantic Versioning?” 3 Description — This is a SHORT description of your project! ID — is used by “app stores” about your game product. Yes! It is critical for those folks and uses a “reverse” DNS identification. Here’s why! Domain names are registered as unique WORLD-WIDE! It is a unique identification — just as your email address is unique within a domain name. Supplying a “reverse DNS” uniquely identifies your application worldwide by your registered domain name. It would be wise to have a registered domain name4 and website. Author — here’s your chance to gain fame and popularity or CRASH AND BURN by “Stealing Some Else’s IDEA”?!? (re-read Part I about “Copyrighting IDEAS!”) Don’t get “greedy … be innovative with your own expressed IDEA”. Karma DOES catch up to you5 — unless that is your intent for living this lifetime … to “get caught”! Think about it!6 Email — YES! Add your customer support contact email! I assume you do have a “business website”7 (or at least) some dedicated Internet presence? 8 so those major game publishers — such as Big Fish, the 7th largest game worldwide distributor!)9 of which I am a “Silver Partner” or other such game distributors — may contact you directly. Website — This declares your game as an “Official” legitimate business endeavor. Yes, you can sell your game even with a valid Personal License. In fact, over 50% of the game sold from http://codecanyon.com are games created in Construct.

4.2 Project Settings: • Window Size — Due to the quantity of artwork used, the scale of the game area must be fixed and changed to match the “Golden Ratio” of 800 x 500. I’ve run an experiment for the past 25 years(!) and have learned that my games that use the “Golden Ratio10 ” outperform any games that used other dimensions (i.e.: 4:3 or 16:9 — which is very close to the Golden Ratio. This is discussed thoroughly 3 https://semver.org/#why-use-semantic-versioning 4 https://gose-internet-services.net/domain-names-registration/ 5 https://leanpub.com/feedinghislambs 6 https://leanpub.com/feedinghislambs 7 https://gose-internet-services.net/hosting-plans/us-hosting/ 8 https://gose-internet-services.net/hosting-plans/ 9 https://www.geekwire.com/2014/churchill-downs-acquires-big-fish/ 10 https://www.canva.com/learn/what-is-the-golden-ratio/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 1: Game Project Launch

24

in the “Construct Game Starter Kit Collection11 ”. Take a sneak peek at how it relates to Facial Beauty Analysis12 or Gaming Markets13 .

4.3 Configuration Settings • If you plan to use “special effects” in your game edition, set “Enable WebGL”. C2 will fall back to “2D Context” 14 if the gamer’s device cannot support “WebGL” 15 , and your game effects will not work in this mode. C3 has dropped the canvas “2D context” entirely. • Physics Engine — manages how game objects interact in realistic ways. Construct uses the “Box2D” engine16 exclusively. Construct strongly recommends using the “Box 2D asm.js” engine since the “Box 2D web” is “deprecated” (i.e.: no longer maintained). • If you would like a “custom loader” (aka a “Sponsored by” Splash Scene, or White Labeled “loading Scene”), then choose your preferred “Loader style”. See the following tutorials for more details … Construct3 Tutorial — Building Custom Loaders17 Construct2 Tutorial — Building Custom Loaders18

Construct2 (C2) uses the event system exclusively and does not support any scripting in the editor at all. This is because the event system is powerful enough to replace scripting completely. However, if you are a programmer, you may be interested in extending Construct2 (C2) using the “Javascript SDK” 19 .

Performance Tip: If you’re using an opaque background, set “Clear background” to No. This avoids redundantly clearing the entire background in every frame. 11 https://leanpub.com/b/cgskc 12 https://www.goldennumber.net/facial-beauty-golden-ratio-florence-colgate/ 13 https://www.goldennumber.net/category/markets/ 14 https://www.w3.org/2015/04/2dcontext-lc-sample.html 15 https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API 16 https://box2d.org/about/ 17 https://www.construct.net/en/tutorials/loader-layouts-custom-loading-9 18 https://www.construct.net/en/tutorials/loader-layouts-custom-loading-179 19 https://www.construct.net/en/construct-2/manuals/construct-2-javascript-sdk

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

25

Lesson 1: Game Project Launch

4.4 Design Consideration: CMS, PWA, or SWPA!

Essential Events & Game Play

Are we making a Content Management System (CMS) — such as a Progressive multiWebpage Application (PWA) — or a “Single Web Page Application20 ” (SWPA)? Construct naturally follows the SWPA architecture — a game with an internal “Splash” scene, a “Game Won” scene, a Game “Lost” scene, and perhaps a “Leader-board” scene or “Credit” scene. You’ll find that nearly all the Scirra Arcade games21 were constructed in this way and their deployment file can become quite large. If you need to update anything — such as your “White Label” branding 22 scene — it requires a new export and uploads into all of your deployment channels again! This can be very timeconsuming — your time could be better spent building more game content instead. You could reduce the size by using artwork assets as “External Files” for all your artwork theme assets. If that’s the path you choose, then you’ll need to use the “System > Load image from URL” option. I prefer the “CMS architecture” using the “Browser” plug-in for single-player games. I use “Progressive Web Apps” 23 for my multi-player games. My games either load or 20 https://www.monocubed.com/blog/what-is-single-page-application/ 21 https://www.construct.net/en/free-online-games 22 https://www.thatcompany.com/white-label-marketing/what-is-white-label 23 https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 1: Game Project Launch

26

redirect to external HTML5 pages such as: about me, log-in, MMoG24 and MMoRPG25 Lobby, customer support, mandatory privacy policies, Frequently Asked Questions (FAQs), game setting options, a catalog of my gaming product line, “purchase a license” PDF form, donations, social media sharing, etc. For example, I create a single vanilla “About Me” page and have all games link to it — using the “Browser > Open URL in new Window”; instead of “Browser > Go to URL”! Read why here! 26 — and each game applies its unique CSS style to that page. I can make changes, whenever necessary, to only one page on my webserver, and then all my games reflect those newest updates. We going to jump directly into the “Play Phase” of our game development. This drops us into a “WHAM! you’re playing now” mode. Later in this tutorial, we’ll surround our “gameplay loop” with a proper “game shell”. Exercise: Read about using HTML files as “Menu User Interfaces27 ”. Exercise: Read “Using Project Files28 ” and adapt it to your game designs.

Read the warning about using the “Browser” object executing JavaScript29 ” with external JavaScript files. 24 https://en.wikipedia.org/wiki/Massively_multiplayer_online_game 25 https://www.masterclass.com/articles/what-does-mmorpg-stand-for 26 https://www.construct.net/en/construct-2/manuals/construct-2/plugin-reference/browser 27 https://www.construct.net/en/blogs/construct-official-blog-1/design-uis-html-css-construct-1585 28 https://www.construct.net/en/tutorials/using-project-files-12 29 https://www.construct.net/en/make-games/manuals/construct-3/plugin-reference/browser

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 1: Game Project Launch

27

> Creating a C2 SWPA Game Version?

Example: Adding internal SWPA Game Scene Layouts

Step 1) Right-click on the “Layout folder”, and add your planned Scene Layouts — “Customer Loader”, “Splash”, “Instructions”, “Game-play”, “Game Won”, “Interstitial Ads30 ”, and “Game Lost” are just a few suggestions from the Part I Design. Step 2) Go to the “Project Settings > First Layout” and choose which Scene your gamer will initially see.

30 https://developers.google.com/admob/android/interstitial

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

28

Lesson 1: Game Project Launch

> FYI: Creating a C2 CMS or PWA Game Version? This workshop will focus on creating an SWPA version. This section is provided for your information as you continue your game development career.

Example: Adding external CMS Pages

Step 1) Right-click inside the “Layout”, and “Insert New Object”. Find the “Browser” plugin and click “Insert”. (See “Insert New Object Dialog” 31 for more details.) Step 2) Then, go to the Layout’s Event Sheet. Add a new event, System condition, and Browser Action. Enter your URL destination and the new window’s name.

Example: Adding external CMS Pages Game Mechanics

Step 3) Repeat step #2 for every planned CMS external page. 31 https://www.construct.net/en/construct-2/manuals/construct-2/interface/dialogs/insert-new-object

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 1: Game Project Launch

“Progressive Web Apps” (PWA)32 are similar to CMS in that they both use “server-side and client-side rendering”, and also other back-end services. In an SWPA, everything happens in the client-side browser.

4.5 Comparing your code Here’s the full source code from the first lesson: • Hidden Objects Lesson01-example33 32 https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps 33 https://makingbrowsergames.com/cgc-books/ho_c2_Lesson1.capx

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

29

Lesson 2: Scaling Objects & Layouts

5. Lesson 2: Scaling Objects & Layouts

Typical Hidden Object Cluttered Game Scene.

Buying all those images will be costly in both searching, creating, scaling, and compiling! Read the next exercise to lighten your initial investment.

Exercise: Reduce the work of creating traditional “cluttered Rooms”. Read How to simplify Hidden Object Game background art1 .

1 https://www.gamedeveloper.com/design/the-making-of-a-hidden-object-game-2d-background-art

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

30

Lesson 2: Scaling Objects & Layouts

31

5.1 What is Your Competition Doing? Before we begin creating our project, let’s explore what other developers have done. This is the fun part when developing a new game — so, enjoy! (Boy and Girl Scouts: Earn your Merit Badge! 2 ) This will show us how their games are perceived and impact gamers, their expectations, and their gameplay. (This is also the first step of 8 for “Game Deployment” covered more thoroughly in Construct Game Prototyping.) • Research, find, and play similar “Seek & Find” games currently on the market that match your ideas and appeal to similar target audiences. • Record which websites host this game genre and • Investigate their submission policies. • Record what game features your competitors have in their games. • Make a list of the theme and minimum features you initially want. This becomes your encoding task list.

> Game Competitor Examples Exercise: Play at least two games from the following “Hidden Object” websites. Write down what you like and dislike about their games. Record your findings on Worksheet 2.1 and the features seen. Then write down how you might improve those dis-satisfactory issues and adjust your desired features.

• Smurfs Interactive Game3 — source code available in student’s “Demos” folder. • Highlights Kids: Hidden Pictures4 — helping children develop their abstract reasoning skills. • Spot the Difference — HTML5 Game (Construct 3)5 • Ryan Guitar GitHub Example6 — An example of how to make a hidden object game with vanilla JavaScript. No libraries or dependencies were used. This is a perfect example for C3! This is a PWA and is best viewed after being installed. • Garage Sale7 • Messy Room8 2 https://makingbrowsergames.com/book/Game_DesignMeritBadge.pdf 3 https://smurfsgame.netlify.app/ 4 https://www.highlightskids.com/games/hidden-pictures/book-clubhouse 5 https://www.construct.net/en/free-online-games/spot-difference-html5-game-24428/play 6 https://github.com/RyanGuitar/Hidden-Object-Game-Example 7 https://makingbrowsergames.com/starterkits/hidden/game1/indexp3.html 8 https://makingbrowsergames.com/cgc-books/demos/ho/game1/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 2: Scaling Objects & Layouts

32

Hint: After completing Lesson 5 & 6, consider converting these games into C2 or C3.

5.2 My Evaluations > Game #1: Smurfs Interactive Game • • • • •

Starts with good instructions. No “clues” are provided about who to search for. No feedback when “Hot” or “Cold”. Smurfs always appear in the same hidden locations. No language selection. The Gamer is assumed to read English.

> Game #2: Highlights Kids: Hidden Pictures • • • • • • • •

Options are provided for both name or picture. Brief instructions were given. No language selection. The Gamer is assumed to read English. Perhaps too many items to find? Sound and visual feedback when correctly identified. Items are rotated and not on the same scale. This increases the difficulty. The game degenerates into a “grid search” with multiple clicking. Too easy to cheat by looking into the html div.

> Game #3: Spot the Difference — HTML5 Game (Construct 3) • as of 202301011, the game has had 1,871 game sessions and 1,429 players since 20210207. This sample reveals “market interest” in this type of genre and reveals its “replayability” ratio of 1.3 per player — gamers give up on the second game session! • Universal symbols are used instead of language text. • No language selection. The Gamer is assumed to read English. • Game Levels earned: brilliant feature for “Hidden Object” games. • Superior artwork and theme music. • Gamer options to stop the music and re-size the window. • Gamer earns “Stars”. The Game Timer determines how many stars are earned. • Gamer earns penalties for incorrect guesses.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 2: Scaling Objects & Layouts

33

> Game #4: Ryan Guitar GitHub Example • JavaScript ES6 used. • Unable to launch his game despite several adjustments.

> Game #5: Garage Sale • We’ll study this in Lesson 5 using a different creation method.

> Game #6: Messy Room • We’ll study this in Lesson 5 using a different creation method.

Exercise: Take your lists and add any features or ideas you might like for your “Hidden Objects” game.

5.3 Competitors’ eCommerce Website Examples • Hidden Object Kids Adventure9 — example eCommerce site — perhaps a future distribution channel for your released game? • Hidden Objects Game Source Code — Reskin10 — example eCommerce site — here’s what your efforts will return; see what other developers are doing! • Hidden Expedition11 — example eCommerce site — Quote: “… is a series of singleplayer hidden object casual games developed by the internal studios of Big Fish Games12 for the first five installments (using Big Fish Games Framework as the engine and with the help of Flood Light Games in the 5th game), and by Eipix Entertainment13 for all subsequent installments. As of 2018, a total of seventeen games in the series have been released. The Hidden Expedition series marks the second major hidden object game brand from Big Fish Games. The second game in the series, Hidden Expedition: Everest, would go on to be the first game Big Fish released on the iPhone.” 9 http://www.sellmysourcecode.com/item/hidden-object-kids-adventure/1930/ 10 https://appngamereskin.com/product/hidden-objects/ 11 https://en.m.wikipedia.org/wiki/Hidden_Expedition 12 https://www.bigfishgames.com/download-games/genres/15/hidden-object.html 13 https://en.m.wikipedia.org/wiki/Eipix_Entertainment

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 2: Scaling Objects & Layouts

34

• Liz’s Hidden Picture Puzzles14 — example eCommerce site — Liz Ball is the author/illustrator of the popular Hidden Treasures hidden picture puzzle book series. Over 3,000 of her hidden pictures are published in more than 150 newspapers, magazines, and publications throughout the U.S. and internationally. • Teachers Pay Teachers (TPT)15 — example eCommerce site — selling “Hidden Object” and “Find the Difference” pamphlets for classroom activities.

Hint: Our second “Hidden Object” game deconstruction will be a “conversion” process later in this course. We will take a standard “Hidden Picture” game and migrate it into the Construct Gaming Framework using different methods.

14 https://hiddenpicturepuzzles.com/free-hidden-picture-puzzles 15 https://www.teacherspayteachers.com/Browse/Search:hidden%20pictures

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

35

Lesson 3: Loading & Placing items.

6. Lesson 3: Loading & Placing items.

Essential Events & Game Loop

Our goal in this lesson is to “load” and “create“ our game’s images, symbols, and text objects that the gamer sees in our “Layout 1” scene. We will insert all the Artwork Assets and information text (i.e.: Title, subtitle, and copyrights) into our game project at this development stage. We will load all the symbols, reward certificates, “Cooty”, “lens Frame”, and “lens Magnifier” items into the layout’s margin. The background theme image sets the story and the gamer’s motivation. The gamer will manage a “Magnifying Glass” with their mouse movement. The “Magnifying Glass” will expose the hidden “cooties”. When a gamer finds an item and — while over it — clicks their mouse, the hidden item should disappear, and points should be awarded. We could easily use the “Magnifying Glass” as a weapon scope — the more centered a “Cooty” is targeted, the higher their score earned.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 3: Loading & Placing items.

36

6.1 Lesson Instructions Step #1: Launch Construct2. Step #2: Open your game project from Lesson 1. Step #3: Click on the “Layout tab”. Step #4: Find your downloaded Artwork folder (aka “directory”), and drag only these “.png” items (i.e.: the “Cooty”, “lens Frame”, and “lens Magnifier” items) and drop them outside the Layout 1 Margin. As you do this, you should see the artwork items appear in the “Projects > Object types” folder. We’ll load our “background theme” later. The reason we initially left all this artwork in the Layout is to avoid “Jank”! Arrange those objects neatly in or beyond the Layout. Hint: If you drag all the images at once onto the Layout, Construct will combine them into a sprite sheet — all the images consolidated into one file. “How will you know?” Double-click one of your images in the Layout. If you see “animation frames” each with an imported image, then Construct created a sprite sheet. You’ll need to start over and drag one image at a time.

From the Manual: How to avoid “JANK” If objects are not placed in a layout but are created by run-time events, Construct will load the textures for those objects the moment they are created. This will cause a momentary pause (or “jank”) and make the game feel less responsive. This could be avoided by placing any objects used within the Layouts. Construct will preload all their textures when a Layout starts, thus avoiding any “Jank”. They could be “placed off-screen” and destroyed on start-up to avoid interfering with the initial gameplay.

Step #5: Let’s place our “Copyright Notice” and “Title” text objects. Right-click inside the Layout, and select “Insert new Object”. The “Insert New Object” pop-up appears. Use the “Search box” and find “General > Text”. I’ll create two text objects one for the game’s Title — “Lyme Disease Inspector” — and a proper © copyrights notice (by typing “ALT 0169”; never use “(C)” because it is legally invalid!) When you click on “Text”, you can provide a unique “Name when inserted” located at the bottom; I’m calling my first text field “Copyright” and the second one “Title”. Click the “Insert” button and then place the new text field onto the Layout. (See “Insert New Object Dialog” 1 for more details.) If you right-click on your text field, you can “Align” the field to the “Layout”. 1 https://www.construct.net/en/construct-2/manuals/construct-2/interface/dialogs/insert-new-object

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 3: Loading & Placing items.

37

Exercise: Review US Copyright & Patent Office Circular #3 “Omission of Notice and Errors of Notice” 2 . Exercise: Review US Copyright & Patent Office Circular #3 “Advantages to Using a Copyright Notice” 3 . Exercise: Read More information about game copyrights from a lawyer 4 .

Quote5 , “Note that “Creative Commons” does not recommend6 its licenses be used for software or hardware.”

Step #6: Configure each text field’s properties. Use the information below to guide your decisions.

Serif vs Sans-Serif: How to increase your website’s readability by more than 50% (Excerpt Quote) “Most popular Sans-serif fonts such as Helvetica, Verdana, Arial, Century Gothic, and Calibri, work well in digital design because it carries a reputation of being contemporary. … In a study conducted by Heydon Pickering, more than 51 percent of websites, that participated in their study, used Sans-serif font design for headlines, as they are perceived to stand out better and are readable regardless of distance. The same preference for Sans-serif is found in a website’s body. The most popular typefaces used are Georgia (utilized by The Guardian and Financial Times), Helvetica, and Lucida Grande. Consequently, font sizes determine website readability. Most popular headline font sizes range from 18 to 29 pixels; with 24 to 26 pixels on average. On the other hand, website fonts for the text body are between 12 to 14 pixels, with 13 pixels on average. As a rule of thumb, heading font size to body copy font size ratio is 2:1. Meaning, the size of your heading is ideally twice the size of your body.” Read more details herea . a https://medium.com/rareview/typography-on-the-web-4cd494d6b165

The Text object does not display anything whenever its rectangle boundaries are too small to fit a single letter of its text. If the text object appears to go invisible, try resizing its boundaries taller. Click one of the “square handles” on a boundary and drag. For more help, read about using fonts in the C2 Text Object7 2 https://www.copyright.gov/circs/circ03.pdf 3 https://www.copyright.gov/circs/circ03.pdf 4 https://www.dbllawyers.com/board-game-designers-guide-2/ 5 https://creativecommons.org/faq/#can-i-apply-a-creative-commons-license-to-software 6 https://choosealicense.com/non-software/ 7 https://www.construct.net/en/construct-2/manuals/construct-2/plugin-reference/text

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 3: Loading & Placing items.

Using Web Fonts inside a Text Object To set the Text object to use a Web Font, use the Set web font action. You probably want to call “Set web font“ in “On start of layout“ to immediately give it a styling. You need to provide both the Family name and CSS URL to the Set web font action. The “Family” name is the font’s name shown in “Google Web Fonts”. You can cut and paste this from their website. For this tutorial, we’ll use the Flavors web font, so Flavors should be entered for the family name. A problem with web fonts, since they are downloaded (… but then, so are images?!?), is there may be a little delay before the font becomes available. Meanwhile, the browser will either display a native font, or nothing at all. (ed.: and hence, all the more reason to use native browser fonts!) This can make the text appear to flicker momentarily and is the reason why many authors resort to bulky “font images” which increases download delay even more! The good news is that the font is cached; so, the next time it will load almost instantly — there’s only an initial delay for the first time a font is downloaded. However, you can work around this by loading all the “non-native” web fonts on start-up. For each different web font, you use inside a project, add a text object representative in your first layout’s margins; then the “Set web font” Action to load it. Make the text object invisible so it’s never seen — its purpose is merely loading the web font. Splash screens or title screens are ideal for this. If your splash or title screens use web fonts, you might want to use an image there instead, or introduce a second or two “Wait” to give the fonts a chance to load. Then, nobody would ever know that those fonts loaded. Read more details herea . a https://www.construct.net/en/tutorials/using-web-fonts-text-object-109

Hint: An easy way to always keep text centered, despite the browser’s window size, is to stretch the text field to the full width of the viewport. Then go to the Text Properties and choose “Horizontal alignment” and “Vertical alignment” as centered. In the “Text Properties > Text”, type your game’s text information, and choose a “font type” and “size”.

Always use “Safe” web fonts! See the “commonly available” with sample font comparisons8 in various operating systems. 8 http://web.mit.edu/jmorzins/www/fonts.html

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

38

Lesson 3: Loading & Placing items.

39

Exercise: Review the complete article “How to increase your website’s readability by more than 50%” 9 .

9 https://www.dvginteractive.com/serif-vs-sans-serif-how-to-increase-your-websites-readability-by-more-than-50-2/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 3: Loading & Placing items.

40

Step #7: Let’s choose another background theme. I plan to use the “Irezumi-Tattoos > find-Cooty.jpg” for my “Adult” game. I chose a tattoo theme because they are “busily cluttered” images without all the intense artwork so typical of “Hidden Object” games. You might like a different background image; search the Internet for “Japanese Irezumi or Horimono tattoos”. • Set both your “Layout properties > Layout size” and the “Project settings > Window Size” to match your background picture’s dimensions.

Sample Horimono Tattoo from www.tattoodo.com

Hint: After completing Lesson 4, consider converting this Horimono picture into C2 or C3. I’ve created a “Find My Flaws™” 10 game series that includes this picture.

10 https://renown-games.com/sg-games/fmf-dragon-master/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 3: Loading & Placing items.

Microsoft Office to the Rescue! Look in your Artwork Asset directory for “Cooties Sets.doc”. It has a variety of “WingDings” that are easily converted into images and very difficult to find when placed on “Japanese Horimono tattoo themes”.

Cooties Set from Web Dings — “ee-yew!”

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

41

Lesson 4: Game Mechanics Mgmt.

42

7. Lesson 4: Game Mechanics Mgmt. We have our “symbols, magnifying glass, and background” showing up (i.e., “rendering”) on the “Game Play” scene, but they’re not doing anything. It would be cool to make our magnifying frame and glass lens move around. Remember, the “Game Play Loop” from the last Lesson? The code inside the Event Sheets runs every frame — 60 frames per second (fps) — so that’s the perfect place to put our instructions for anything that’s “animated or moves” in a scene (i.e., changing the Lens, Lens Frame’s “X” and “Y” coordinates). Step #1: Click on the “Event Sheet 1” tab. Layouts1 typically have an associated “Event Sheet”; but “Event Sheets” could be shared between different Layouts using “include” statements2 . For example, you can use different “Event Sheets” for different parts of your Game Mechanics. You could have event sheets called “Player input”, “Enemy control”, “Special Effects”, etc. Then each game scene could include those “Common Event Sheets” inside the current layout’s own event sheet. This allows you to share those same events between multiple layouts, without having to “copy and paste” all your events over and over again. Software engineers call this “Don’t Repeat Yourself” (D.R.Y.) coding. 1 https://www.construct.net/en/construct-2/manuals/construct-2/project-primitives/layouts 2 https://www.construct.net/en/construct-2/manuals/construct-2/project-primitives/events/includes

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

43

Lesson 4: Game Mechanics Mgmt.

7.1 Inside The “Game Loop”

Input, Process, Output!

The Event Sheet defines the Game Mechanics, rules, logic, and data structures. The Construct2 (C2) manual tells us that, “Events are the alternative to programming or scripting. Instead of complicated scripting or programming languages with fiddly syntax and difficult errors, you can define how your game works using this easily readable “logical block” system.” Construct3 (C3) is more lenient and does allow scripting inside its “Event Blocks and Actions”. “Event Sheets” run from the top to the bottom every frame per second (fps) (aka “Every Tick”). After an event ends, the next event begins from scratch. Its conditions will start picking from all game objects (aka “instances”) again. The Layout is finally “Rendered” once all events have finished, then the “Game Loop” starts over again. This means if one event does something and another event undoes it, you’ll never see those changes. The order of “Events” is important!

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

44

Lesson 4: Game Mechanics Mgmt.

7.2 Game Mechanics Structure An “Event Sheet” contains “Event Blocks”. These blocks — simply called “Event(s)” — have three sections:

An Event Block Structure

1. An “Event Block” contains the margin and condition(s). The left “margin” allows you to select the entire event block and by “Right-clicking” add more Condition criteria. Events have specific, well-defined ways of working. 2. “Conditions” filter out all Layout objects that meet its criteria. Think of conditions as starting with all the “instances” being picked, and progressively filtering them from that point. You can add “Sub-Event Conditions” to a “Parent Condition” by “Right-clicking” in its “margin” — these new “sub-event conditions” will appear as indented and further “fine-tune” selections where its parent left off. This allows you to control unique items independently, especially when it is used with assigned characteristics (aka “variable properties”). A common misconception is that all instances of an object type must act the same. That is simply not the case: the fundamental way events work is to filter out individual instances, and then run actions on just those that met the condition(s). 3. “Actions” make things happen. They only affect those objects that were filtered out (i.e.: collected) by their governing parent’s condition(s). For example, if the condition “Bullet collides with monster“ is met, its actions — “Subtract 1 from Monster's health“ and “Destroy Bullet“ — will run. The “Destroy” action affects only that specific bullet involved in this collision. If other Bullets and Monsters are running around in the Layout, they are not affected by these actions — “Subtract 1 from health” and “Destroy”. In summary, if all an “Event Block’s Condition(s)” are met then its “Actions” run on just those game objects meeting those conditions.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 4: Game Mechanics Mgmt.

45

Multiple Actions running from a single condition

Exercise: Read more details about “How Events Work” 3 . Take notes about “Multiple Conditions”, “Un-referenced objects” and “Triggered Events” for your certification quiz.

7.3 How to Create Events There are several ways to add events. • Double-click inside the event sheet. • Click the “Add event” link which appears under the last event. • Right-click and then choose a menu item to add. Whenever you add a new event, a dialog pop-up appears for adding the first condition (see “Add Condition dialog” 4 ). To add more conditions to an event, right-click the margin or an existing condition and select Add another condition. Actions can be added by clicking the “Add action” link, or right-clicking in the “Margin” of an existing action and then selecting “Add another action”. (See also Add Action dialog 5 ).

7.4 Game Set-up Now that we understand what the “Event Blocks” are, let’s begin creating the game’s setup. We’ve already loaded the “Cooty”, “lens Frame”, and “lens Magnifier” sprite images to avoid “Jank”. What we want is to randomly deploy those “Cooty” spiders within the game area. But we need some more information about our game design: • How many “Cooty” spiders (i.e.: the hidden items) should we deploy? I plan to use a dozen (12). You might like to deploy more or less. 3 https://www.construct.net/en/construct-2/manuals/construct-2/project-primitives/events/events-work 4 https://www.construct.net/en/construct-2/manuals/construct-2/interface/dialogs/add-conditionaction 5 https://www.construct.net/en/construct-2/manuals/construct-2/interface/dialogs/add-conditionaction

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 4: Game Mechanics Mgmt.

46

• What are the dimensions of this background image? Construct makes this easy by giving us the “Layout properties > Layout Size > Width” and “Height”. This is the reason the background image, Window Size, and Layout Size should all be the same dimensions. If you plan to allow gamers to load their own background images, you can either: 1) dictate what dimensions are permitted or 2) re-size their images. We’ll discuss these options later in the course • What deployment restrictions should we use? Should we use a marginal boundary inside the background image to restrict the placement of the hidden items? I plan to use a 20-pixel margin inside the background image. As we develop more games, we could use this “internal margin” to fine-tune hidden items into a more focused area. For example, go to the “Artwork Assets directory / irezumi-Tattoos” and look at the girls in swimsuits. They centered in the picture; the “Cooties” should be restricted to their skinny profiles. • How do we dynamically generate new placement locations for each game session? For now, let’s use the “System Expression > Values: random” 6 command. If consistent placement per game is important for your bespoke game, you might consider loading an XML or JSON file with preset deployment values. Step #1: Click on the “Event Sheet 1” tab. Then either click on the “Add Event” at the bottom of the “Event Sheet”, or right-click inside the “Event Sheet” and then click “Add Event”. The “Add Event” pop-up will appear. Select the “System” icon then click the “Next” button or simply double-click the “System” icon. Another new pop-up appears with a list of “System Conditions”. Search for “on start”; this will filter the list and present a triggered event called “On start of layout”. Select it and click “Done”. • Click “Add Action” for our new event. Select the “System” then click “Next” or simply double-click the “System” icon. Another new pop-up appears with a list of “System Actions”. Search for “Create”; this will filter the list and present several choices. We want to double-click “Create object”. Another new pop-up appears with a list of “Parameters for System: Create Object”. In the “Object to create” drop-down list, choose the “Cooty” sprite; the Layer will be zero (“0”). Now for the tricky part! In the “X” input field, you must type precisely (without quotes): floor(random(LayoutWidth-40)) + 20 Let me explain what this does. • “floor” will round down a number. • “random” will generate a number using the “LayoutWidth“ minus the left and right 20-pixel margins that I mentioned before. 6 https://www.construct.net/en/construct-2/manuals/construct-2/system-object-reference/system-expressions# internalH1Link7

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

47

Lesson 4: Game Mechanics Mgmt.

• add 20 pixels to this randomly generated number. This will indent the left margin by 20 pixels. • Type a “comma” then enter the same command modified for “LayoutHeight”. • Click “Done”.

Deploying 12 Cooties!

Step #2: As you can see, this Event has an additional condition that will repeat 12 times. Right-Click inside the “Margin” of the “System > On start layout”. Select “Add > Add another Condition (C)”. Double-click the “System” icon and search for “repeat”. Double-click “repeat” and another new pop-up appears asking for “Count” — the number of times to repeat this action. I’m using “12” that will generate my 12 “Cooty” spiders. • I’ve added another new action that will scale down the “Cooty” image to 1/10th its original size. I clicked “add action”, double-clicked the “Cooty” symbol, searched for “set scale” and double-clicked it. Then I entered “0.1” and finally clicked “Done”. You may want to experiment with scaling your hidden items.

7.5 Game Play Phase Let’s discuss what we’ll do next, and then we’ll do it. The “Lens” has the “magnifying” capability. The “lens Frame” is merely eye-candy. Whenever the “Lens” rolls over a “Cooty” spider, the spider will scale to “normal size”. When the “Lens” rolls off of the spider, it should return to 1/10th its size again. If the gamer clicks on the spider, it should disappear and points awarded. Here are some examples of what we’re attempting to do from these Scirra Arcade Demonstrations: Prototype Experiment7 7 https://www.construct.net/en/free-online-games/magnifying-glass-23047/play

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 4: Game Mechanics Mgmt.

48

and Advanced Zoom Feature8 . (Download his files and see how he’s doing it! He’s using “Pin”.)

> Making the “Magnifying Glass” There are three different ways we could bind the “Magnifying Glass” pieces together. We could: • create two separate events; one for the frame and another for its lens. Then bind both of them to the gamer’s mouse coordinates (“X” and “Y”). OR • “Pin” 9 the frame and lens together. Doing so would conserve one event statement when compared to the method above. OR • Add the lens as a “child” of the frame. This is the Construct’s recommended method to use. Doing this still only conserves one event statement when compared to the first method above.

Magnifying Frame & Lens Relationship The scene graph feature is a modern built-in replacement for the Pin behavior. Consider using the Add child action to connect objects together instead of the Pin behavior. This has better support for connecting chains of objects together and provides conditions that can pick instances across the hierarchy. Add child:a Add another object as a child of this object, which becomes its parent. The relative differences between the objects are remembered at the time the action is used. Then as the parent moves, scales, and rotates, the child will move, scale and rotate with it. A series of checkboxes allows the selection of which properties are to be updated. For example ticking only the X and Y options will keep the child at the same relative position, but not change its angle. The “Destroy” with parent option can also be enabled to automatically destroy its child whenever its parent is destroyed. a https://www.construct.net/en/make-games/manuals/construct-3/plugin-reference/commonfeatures/common-actions

SO! The “Pin” option is eliminated according to Construct’s recommendations. I do not plan to “… scale, rotate nor destroy …” the “Magnifying Glass”. So our third option above is merely an academic study for later experiments. Step #1: Click on the “Event Sheet 1” tab. Then either click on the “Add Event” at the bottom of the “Event Sheet”, or right-click inside the “Event Sheet” and then click “Add 8 https://www.construct.net/en/free-online-games/magnifying-glass-multi-level-40618/play 9 https://www.construct.net/en/make-games/manuals/construct-3/behavior-reference/pin

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 4: Game Mechanics Mgmt.

49

Event”. The “Add Event” pop-up will appear. Select the “System” icon then click the “Next” button or simply double-click the “System” icon. Another new pop-up appears with a list of “System Conditions”. Search for “Every Tick”; this will filter the list and present a General > Every tick and a Time > Every X seconds. I’m using “Every Tick” for my game. You might like to experiment with the “Every X seconds” if your event sheet becomes too crowded with commands. Select “Every Tick” for now and then click “Done”. • Click “Add Action” for our new event. Select the “Mouse” then click “Next” or simply double-click the “Mouse” icon. Another new pop-up appears with a list of “Mouse Actions”. We want to double-click “Set cursor style”. Another new pop-up appears with a list of “Parameters for Mouse: Set cursor style”. In the “Cursor style” drop-down list, choose “None”. You might like to experiment with the mouse styles that match your game’s theme. I could have selected “Normal”, “Hand”, “Crosshair”, “Move”, and “Help” as possible alternative themes. • Click “Add Action” again for this event. Select the “lensFrame” then click “Next” or simply double-click the “lensFrame” icon and search for “Set position”. Doubleclick “Set position” and a new pop-up appears asking for the new coordinates. This is the tricky part! In the “X” input field, you must type precisely (without quotes): Mouse.X Let me explain what this does. • As you type “Mouse” in the “X” field a pop-up will appear with verified options. You could simply “TAB” when the correct term appears, and Construct will type the remainder for you. When you type “ . “ (period) a new list of properties will appear. If you type “X”, the list will slide down to that property. Press “TAB” and Construct will type it for you. • Click on the “Y” field and do the same steps above for “Y”. • Click “Done”. Step #2: Now return to Step #1: and do all these steps for the “Lens” sprite this time.

Option #1: Binding Magnifying Glass pieces together

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

50

Lesson 4: Game Mechanics Mgmt.

> Managing Cooty Spiders If you test your game at this point, you’ll see the “Magnifying Glass” and small specks (aka “Cooties”!) throughout the background image. We still need to reset the “Cooty” spiders to their normal size whenever the “Magnifying Glass” rolls over them. Step #3: Click on the “Event Sheet 1” tab. Then either click on the “Add Event” at the bottom of the “Event Sheet”, or right-click inside the “Event Sheet” and then click “Add Event”. The “Add Event” pop-up will appear. Select the “Lens” icon then click the “Next” button or simply double-click the “Lens” icon. Another new pop-up appears with a list of “Lens Conditions”. Search for “Is overlapping another object”; this will filter the list and present a couple of Collisions options. Choose “Is overlapping another object”. Another new pop-up appears with a list of “Parameters for Lens: Is overlapping another object”. In the “Object” drop-down list, choose “Cooty” and click “Done”. • Earlier, we added an action that will scale down the “Cooty” image to 1/10th its original size. We need to reverse that. let’s now click “add action”, double-click the “Cooty” symbol, search for “set scale” and double-click it. Then enter “1” to set this discovered “Cooty” to its normal size, and finally click “Done”. You may want to experiment with scaling your hidden items. • When the mouse leaves a “Cooty” simply return it back to its miniature size as we did before.

Re-sizing Cooties

> Debugging Cooty Sizing If you test your game at this point, you’ll see the “Magnifying Glass” and discover “Cooties” throughout the background image. The problem we still have is that the “Cooties” never shrink back down. They just remain visible. Our game degenerates into a simple scan of the background image to find all 12 Cooties. Where’s the challenge in that?!? © Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 4: Game Mechanics Mgmt.

51

The problem is the “event order from top to bottom”. • Find event #7 and drag it above event #5. Now re-test the game.

> Debugging the Cooty Inventory “You wanted 12 Cooties but I’m counting 13! What’s with that?!?”, you say? Well, remember when we inserted that initial spider to avoid JANK? We should compensate for it by subtracting 1 in event #2.

7.6 Practice Method #1 Now that you’re gaining skills in “Hidden Object” games. Let’s apply it to a Competitor’s game — “The Smurf Village” from Lesson #2. Play my interpretation of that game converted into C2 …

> Bonus Game & Download • Play transpiled “Smurf Village” 10 — Re-imagined using method #1! All the Smurfs are now a single image inside a multiple-framed sprite, randomly deployed with our familiar “Magnifying Glass”. • Download this game transpiled into C2 here11 .

7.7 Download Lesson 4 “.capx” file • You can download the Lesson 4 “.capx” file12 to compare your progress. • You can download the Lesson 4 Find & Hide “.capx” file13 bug fix to compare your progress. 10 https://makingbrowsergames.com/cgc-books/demos/ho/smurfVillage/index.html 11 https://makingbrowsergames.com/cgc-books/demos/ho/smurfVillage/ho_c2_Lesson2-SmurfVillage-Final.capx 12 http://makingbrowsergames.com/cgc-books/ho_c2_Lesson4.capx 13 http://makingbrowsergames.com/cgc-books/ho_c2_Lesson4-findHide.capx

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 5: Game Conversion Methods.

52

8. Lesson 5: Game Conversion Methods. At this point — the end of Lesson 4 — in our development, we have a fully operational “Hidden Objects” game prototype using “method #1” with only 7 event blocks! ( You could now begin selling your Hidden Objects game(s) and afford a “C3 subscription”1 . ) We have substituted the volumes of artwork images, typically found in this game genre, for a simple “single-frame” icon in method #1. In this lesson, we will learn several more tricks to substitute the ridiculous amounts of artwork used in “Hidden Objects” games. Exercise: Open your student “Demos/Hidden-Object-game-master” directory. Exercise: Create a New Project and save it as “Lesson 5” or open and save this file — Lesson 5 Start Game Conversion2 .

8.1 Conversion Method #2

Garage Sale Background Image 1 https://www.construct.net/en/make-games/buy-construct 2 http://makingbrowsergames.com/cgc-books/ho_c2_Lesson5-startGC.capx

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 5: Game Conversion Methods.

53

Our next “conversion” will be a different process for creating “Hidden Object” games. We will take a typically “cluttered Hidden Picture” game and migrate it into the Construct Gaming Framework. You will need this GitHub repository 3 or retrieve it from your student downloads. I’ve chosen the “Garage Sale” background image. Once you discover how this process works, there are dozens of other such “Hidden Object” games available on GitHub4 . This is just one of three backgrounds abandoned by this author 7+ years ago. You can download his public project from GitHub here5 .He attempted to use JavaScript source code without a gaming framework. Use your browser to scroll and find images. Exercise: Play his original JavaScript “Messy Room” 6 and study his source code.

8.2 Lesson Instructions > Step #1: Building a Grid. I’m using a “2D grid” to neatly align the “Hidden Objects” in rows and columns instead of experiencing the random overlapping deployment problems that we discussed earlier. To do this, let’s look at a couple of configurations. • Click the “View” tab — or “ALT V” — along the top of the editor. Inside it, you’ll find the “Snap to grid” and “Show Grid” checkboxes. We need both selected and I recommend a grid size of 32 pixels. “Why 32 pixels”, you say? Because I’m looking at several of the images in the background pictures (i.e.: “Garage Sale”) and “guesstimating” that the variety of things is roughly 32 pixels squares. Many game developers and authors are rather cavalier 7 with their grid sizes. Computer CPUs think in Binary; they count from “0 to 1” or electronically “off and on” respectively. It is critical to work with the CPU and select numbers that are multiples of “2” — such as 2, 4, 8, 16, 32, 64, … do you see the pattern? I cringe when I read authors instructing others about creating sprites that are “40 pixels square” on grids that are “23 pixels by 21 pixels”! They tell you that they are accounting for a “margin” around their sprites — without any consideration for memory consumed! Apparently, they’ve never read about “Construct Export Optimization”. 3 https://github.com/MakingBrowserGames/Hidden-Object-Game 4 https://github.com/search?q=hidden+object+javascript 5 https://github.com/nairuzabulhul/Hidden-Object-Game 6 http://makingbrowsergames.com/cgc-books/demos/ho/game1/ 7 https://www.merriam-webster.com/dictionary/cavalier

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 5: Game Conversion Methods.

54

Construct Export Optimizations Performed Construct does a lot of work for you on exporting your games. Some of this article’s highlights are: • Don’t worry about having duplicate images — they’re automatically removed. • The image format (e.g. PNG or JPG) only affects the download size, not the runtime memory use. • If possible make sprite images just under a power-of-two size, so they can pack into a sprite sheet efficiently. However, try to make “Tiled Backgrounds” exactly power-of-two sized. • Don’t import “lossy image files” (e.g. PNG-8 or JPG) into Construct. They are always stored as lossless PNG-32 until you export, at which point it respects what you’ve set in the “Image Format” dialog. • Don’t worry about the fact that Construct splits up sprite sheets into separate files when you import them into the editor. It will reassemble images in a memory-efficient way into a newly exported sprite sheet. • Don’t bother trying to run the exported image files through other compression tools or services. Construct is probably already doing a very good job. • Don’t try to manually delete audio files before exporting. Construct automatically removes any that are not needed on export. • If exporting is slow, try exporting on a workstation with more CPU cores! Knowing what Construct services do for you during an export can help you work effectively with Construct and avoid any unnecessary work. Read more details from Construct Export Optimizationa . a https://www.construct.net/en/tutorials/construct-3s-export-4

> Step #2: Create more Layers. Let’s create • a “background” (BG) layer that will have the specific image and will be “locked”, • an “Objects” (OBJ) layer where all the “things to find” are deployed, and • a “User Interface” (UI) layer which will be the “Magnifying Glass.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 5: Game Conversion Methods.

55

Layers inside a Layout By default the “Project Bar” and “Layers Bar” are tabbed together here. The “Project Bar” contains an overview of everything in your project. The “Layers Bar” could be used to add different layers inside a layout. Layouts also consist of multiple Layers, which can be used to arrange objects into “background” or “foreground” layers. A layer is like a sheet of glass onto which game objects are painted. This allows an easy arrangement of objects displayed in front of each other. For example, showing foreground objects in front of the background sprite and images. It also allows for interesting depth effects like parallax a . Layers can be individually scaled and rotated as well. The number of layers usually has no effect, unless most of the layers have changed their opacity, have effects applied, have a blend mode other than ‘Normal’, or use ‘force own texture’. However, typically there is no performance impact from using multiple layers with their default settings. Layers can be “dragged and dropped” inside the “Layers Bar” to change their “Z-order”. Layers at the bottom of the list are displayed at the back (e.g. background objects), and those at the top of the list are displayed at the front (e.g. HUD objects). a https://en.wikipedia.org/wiki/Parallax

> Step #3: Load images. • Select a background image and carefully load it into the “BG” layer. I’m using the “Garage Sale” as my “BG”. My background, window size, and layout are all 800x500 (i.e.: the Golden Ratio). • Load the “convertion2Square.png“ into the Layout on the OBJ layer. It is “64x64” pixels to match my “32x32” grid. If you’re using a different grid size, you might like to tailor the “square”. • Load the “lensFrame” and “Lens” into the Layout on the UI layer. I’ve re-sized both to a smaller size for this game — the frame is “125x125” and the lens is set at “20x20” after several experiments.

> Step #4: Deploy Hidden Objects. Now the fun begins! We can either dynamically (discussed later) or manually distribute the “square” around the grid — it becomes our “Hidden Object”. The squares are visible for now and represent the “item list” to find. Let’s start with the manual deployment and demonstrate how this new method works. I’m using 12 squares with inserted “Instance variables” of “name” and “points” for each item. © Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 5: Game Conversion Methods.

56

In a dynamic deployment, the squares are deployed from a JSON configuration file and the item’s name, row, column, and points awarded come from this JSON file. When the “Magnifying Glass” rolls over a “square” the text prompt will appear and reveals the name of the item. If the gamer clicks the “square”, it is removed, and points are awarded but the image still remains in the background.

Step #4 Deploy Hidden Objects using Method #2

> Step #5: Game Mechanics & Events Used. These events should look familiar; they are similar to the previous method from Lesson 4 except for the new “Text Object”. This “Text Object” follows the mouse and reveals the name of the item.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

57

Lesson 5: Game Conversion Methods.

Step #5 Method #2 Game Mechanics & Events

Test the game now — YES! with the blue square on top of the background image. For the finalized game, you’ll simply turn all the blue squares invisible. Hint: If the larger “lensFrame” is not working as you’d like for mouse roll-overs. Simply exchange it for the “Lens” Magnifier.

8.3 Practice Method #2

Cluttered Desk

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 5: Game Conversion Methods.

58

Take this background — found in your student downloads8 — and apply what you’ve learned from this lesson to it. • Try a different Grid size. • Try different “square” shapes — such as “rectangles”, “triangles”, or perhaps even “circles”? • Play my game interpretation of Messy Desk 9 with “hints”.

8.4 Competitor Games Revisited! … Now that you’re getting familiar with method #2, why not revisit some competitor games from Lesson 2 and see what you can do with them. Play my interpretation of those games converted into C2 … • Messy Computer Desk 10 — using C2 with method #2 with “hints” and scoring. • Messy Room11 — Spring Cleaning using C2 with method #2 with “hints” and scoring. The Search List are dynamically generated, and scoring is based on those dynamic generated search list. (We’ll review dynamic search lists in Lesson 10.)

8.5 Download Lesson 5 “.capx” files You can download to compare your progress or start new method #2 games with the: • Lesson 5 Start Game Conversion “.capx” file12 • Lesson 5 Steps 1 to 5 “.capx” file13 • Lesson 5 Final Game “.capx” file14

> Available Bonus Games … • “Messy Room” — download and instructions found in Lesson 10. • Messy Computer Desk 15 . 8 http://makingbrowsergames.com/cgc-books/demos/ho/game1/images/background2.jpg 9 https://makingbrowsergames.com/cgc-books/demos/ho/messyDesk/index.html 10 https://www.construct.net/en/free-online-games/messy-computer-desk-47669/play 11 https://makingbrowsergames.com/cgc-books/demos/ho/messyRoom/ 12 http://makingbrowsergames.com/cgc-books/ho_c2_Lesson5-startGC.capx 13 http://makingbrowsergames.com/cgc-books/ho_c2_Lesson5-steps1-5.capx 14 http://makingbrowsergames.com/cgc-books/ho_c2_Lesson5-final.capx 15 https://www.construct.net/en/game-assets/games/domain-licenses/messy-computer-desk-3145

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 6: He says, “He’s already Got One”!

59

9. Lesson 6: He says, “He’s already Got One”! We have a “Magnifying Glass” that responds to the mouse and when a gamer clicks an object, they should earn points or penalties for their guesses.

9.1 Modify a Gamer’s “Score & Discoveries” Adding a “Heads Up Display” (HUD) In Lesson 3, we inserted several “Text Objects”. Let’s now create two more text objects in the “UI layer” — one to display the accumulated score, and the other to show the total items found. I’m assuming the gamer can read English; we’ll learn more about developing a “Multilingual” game later. Step #1: • Decide if you are using method #1 (Lesson 4) or method #2 (Lesson 5). • Decide if the new “Heads Up Display” (HUD) is located at the top, bottom, left, or right of the background image. I recommend placing this information according to a gamer’s native language — some read from left to right, others read from right to left, while still others read from top to bottom. A gamer’s eyes will instinctively follow their native language. • Right-click in the Layout, and select “Insert new Object”. The “Insert New Object” pop-up appears. Use the “Search box” and find “General > Text”. We will create two more text objects — one for the gamer’s accumulated “Score” and the other for “Correct Guesses” — “Strikes” for incorrect guesses. When you click on “Text”, you can provide a unique “Name when inserted” at the bottom. Click the “Insert” button and then place the new text field onto the Layout. (See “Insert New Object Dialog” 1 for more details.) I’m inserting the default text: “You have found: “. • For both method #1 and method #2: Go to the “Event Sheet” and create two new “Global variables”. I’m calling one “Score“ which will store the gamer’s accumulated points earned. The other I’m calling “itemsFound“ is to tell the gamer how many items they have correctly discovered out of how many were deployed. Set both “types” to a number, and its initial value to zero (“0”). 1 https://www.construct.net/en/construct-2/manuals/construct-2/interface/dialogs/insert-new-object

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

60

Lesson 6: He says, “He’s already Got One”!

• For both method #1 and method #2: Add two new “Actions” above “Destroy”. These will add “1” to the global Score variable, and then “Destroy” the “Hidden Object”.

HUD text Updated

If you plan to have a variety of points awarded instead of entering “1”, you’d enter the assigned “Instance variable conversion2Square.points”.

Method #2: Varied Points Earned from Item

9.2 Download Lesson 6 “.capx” files You can download to compare your progress or start new games using: • Lesson 6 “method 1 .capx” file2 • Lesson 6 “method 2 .capx” file3 2 http://makingbrowsergames.com/cgc-books/ho_c2_Lesson6-method1.capx 3 http://makingbrowsergames.com/cgc-books/ho_c2_Lesson6-method2.capx

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

61

Lesson 7: Find the Difference!

10. Lesson 7: Find the Difference! So far, we have two different methods to create “Hidden Object” games. There’s still a third method for “Hidden Object” games known as “Find the Difference”.

Find the Covid-19 Germ Variants

Exercise: Play this game1 in the Scirra Arcade.

Dual Picture creation: I found a free image and inserted it twice into a PowerPoint slide. Then took a “screen capture” and modified it to the Golden Ration with my graphics software. Yeap! nothing to it! OR, you might download files from “PrintItFree.net” 2 . OR, make images the traditional way 3 . 1 https://www.construct.net/en/free-online-games/covid-exposure-47752/play 2 https://www.printitfree.net/spot-the-difference-picture-puzzles/ 3 https://www.culturepk.org.uk/wp-content/uploads/2020/05/Create-A-Spot-The-Difference-Game.pdf

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 7: Find the Difference!

62

10.1 Lesson Instructions This third method is very similar to what we’ve already learned up to this point. The only “difference” is that the gamer has a “reference” picture without contamination. The other picture has the inserted “flaws”. Step #1: Choose which image will have the inserted changes — the left or right one. OR better yet, dynamically switch between images for each game session! Also, carefully notice where I’m randomly choosing a new sprite animation frame.

Random Infestation in Left or Right Image with Various Germs

Step #2: Choose “how many” and “what single type” of symbol(s) to use. I plan to deployed 12 germs and a variety of different types of symbols from Microsoft Office WingDings. I’ll place all the symbols inside one sprite as its animation frames. This gives me an option to either: randomly pick from among all the sprite’s frames or just use a single random frame per game session.

Random Infestation in Left or Right Image with One Germ

Step #3: Symbols will adopt a “modest 1/10th down-scaling” that we’ve learned before. © Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 7: Find the Difference!

63

Step #4: Symbols are randomly deployed within an image for each new game session. Step #5: Use modified margin settings for the “changes” — a “left image” or “right image” deployment margins.

10.2 Customized Margins In Steps #1 and #2 above, I hard-coded where the germs were created between the game’s margins. This becomes an import “Game Settings Options” when we let gamers “Create Your Own” (CYO) adventures in Lesson #9. What we’ll do then is create some global variables — top, bottom, left, and right — for customized margins for width using random(left,right), and then again for height using random(top,bottom).

10.3 Deeper Dive: AI Project Preparations The problem, with these following “Find the Difference” algorithms, is the game is static. It never changes. The hidden pictures are always in the same locations. If a gamer does “re-play” this game, it is no longer a “Find the Difference” game but changes into a “Memory Game” — can the player remember where all the objects were located. The game’s new challenge becomes finding those objects in a faster time. This novelty change quickly looses the gamer’s interest and “re-play” value becomes zero! • A Hidden-picture Puzzles Generator 4 — dynamically generate “Find the Difference” puzzles with this AIBot algorithm. 4 https://citeseerx.ist.psu.edu/pdf/1eefc3d7560efcb56d28b84943357efe605c1d85

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

64

Lesson 7: Find the Difference!

9-page Research System Overview

Abstract: A hidden-picture puzzle (aka “Find the Difference”) contains objects hidden in a background image, in such a way that each object fits closely into a local region of the background. Our system converts the image of the background and objects into a line drawing, and then finds places in which to hide transformed versions of the objects using rotation-invariant shape context matching. During the hiding process, each object is subjected to a slight deformation to enhance its similarity to the background. The results were assessed by a panel of puzzle solvers. • Another approach for Hidden Pictures5

AI System Overview

Abstract: Our system detects the edges of the object to be hidden, and then finds a place where it can be embedded within the scene, together 5 https://citeseerx.ist.psu.edu/pdf/5cc61b57d66e6d03542a24b2df09f1700171d0eb

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 7: Find the Difference!

65

with a suitable transformation for doing so, by optimizing based on edge differences. Embedding is performed using a modified Poisson blending approach, which strengthens matched edges of the host image using the edges of the embedded object. We show various hidden images generated by our system.

Showing my ignorance … but couldn’t this just be an opacity adjustment?

10.4 Download Lesson 7 “.capx” files • Lesson 7 initial file6 . • Lesson 7 Random Left or Right7 with 12 deployed germs and different variants. • Lesson 7 Single Variant8 with 12 deployed germ with single variant. 6 http://makingbrowsergames.com/cgc-books/ho_c2_lesson07-startGC.capx 7 http://makingbrowsergames.com/cgc-books/ho_c2_lesson07-step1.capx 8 http://makingbrowsergames.com/cgc-books/ho_c2_lesson07-step2.capx

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

66

Lesson 8: “Game Lost & Won” Scenes!

11. Lesson 8: “Game Lost & Won” Scenes!

Game Finished Phase

We have three (3) fully functional “Game Play” prototypes! Let’s now focus on ending our game properly. There are a couple of conditions we’re looking for: • All the “Hidden Items” were discovered or eliminated. OR • The gamer has incorrectly guessed too many times. Let’s set (aka “hard-code”) “too many times” to three (3) or to any number you like. OR • Optional Design: add a game “count-down timer” and when the time “runs out”, the game ends on that condition too. If you like this option, then you’ll need another text field in the HUD layer just to show the time remaining. I’ll provide more details about this feature later in Part IV.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 8: “Game Lost & Won” Scenes!

67

11.1 Hidden Item Inventory Our first “Game Finished” option happens when all the “Hidden Objects” are discovered or eliminated. Construct has a command that “counts” how many objects are on the Layout and layers. This makes it too easy except that we set one item on the layout to avoid JANK! We must adjust for that first deployment.

11.2 “Game Finished” Scene(s) There are several ways to do this. If we were clever, this could be a single scene with dynamic text stating “Won OR Lost”, with a final score, a “Play Again” button, and a button to “Submit Score” into a leader-board. But, we’ll start with the simplest by just adding two separate scenes. • Go to the “Projects > Layouts” folder, right-click it and add two new layouts and their associated “Event Sheets”. Rename one new layout as “Game Won”, and the other as “Game Lost”. I’m renaming their associated “Event Sheets (es)” as “es_Game Won” and “es_Game Lost” respectively. • Inside the “Game Won” Layout, add a text field with “Won” as its text. • Inside the “Game Lost” Layout, add a text field with “Lost” as its text.

> Determine Rules for “Game Won” • • • •

• • • •

Go to the “Event Sheet 1” and Add an event. Double-click “System”. Search for “Compare two values” and double-click it. A pop-up window appears asking for three pieces of information. Type in the first value: “hiddenItemName.Count” (without the quotes). In the “Comparison” dropdown list, select “≤ Less or to” and for the “second value” type in the number 1. What this rule does is watch for the “germ” inventory to reach “0” in the layer. If you’ll remember, we have “an extra “Hidden Item” beyond the margins to avoid Jank. Add an “Action” for this event. Double-click “System”. Search for “Go to layout” and double-click it. In the pop-up, select the “Game Won” Layout because the gamer has eliminated all the bricks and won the game.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 8: “Game Lost & Won” Scenes!

68

> Determine Rules for “Game Lost” Now let’s set up the losing condition. • • • •

Go to the “Event Sheet 1” and Add an event. Double-click “System”. Search for “Compare two values” and double-click it. A pop-up window appears asking for three pieces of information. Type in the first value: “Strikes” (without the quotes). In the “Comparison” drop-down list, select “≥ Greater or Equal” and for the “second value” type in 3 ( three; or any number you’d like ). What this rule does is watch for the gamer to “strike out”. • Add an “Action” for this event. • Double-click “System”. • Search for “Go to layout” and double-click it. • In the pop-up, select the “Game Lost” Layout because the gamer has exceeded the number of allowed strikes. Press “F4” and test your game.

11.3 Global Objects & Layouts If you would like the gamer’s final score displayed when the Game has “Finished”, go to the Layout 1 and click the “Score” text field. In the left-hand panel, select “Object type properties > Global” and change it to “Yes”. The HUD score will now become available on all “Layer 0” throughout the game. Press “F4” and test your game.

11.4 Practice Session Return and add scoring, Game Won, and Game Lost to: • Lyme Disease (Lesson 6 method #1) • Garage Sale (Lesson 6 method #2)

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 8: “Game Lost & Won” Scenes!

11.5 Download Lesson 8 “.capx” file • Lesson 8 Covid file1 — the final game prototype!

1 http://makingbrowsergames.com/cgc-books/ho_c2_Lesson8-Covid.capx

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

69

Part III: Construct3 Production

Part III: C3 Production

Hint: Affixing your idea to “physical media” secures your Copyrights © as an expression of your idea. You cannot Copyright ideas! You must use a “Patent” 2 or “Trade Secrets” to protect ideas. Use your idea to publish “multiple tangible expressions”.

Quote3 , “Note that “Creative Commons” does not recommend4 its licenses be used for software or hardware.”

2 https://en.wikipedia.org/wiki/Patent 3 https://creativecommons.org/faq/#can-i-apply-a-creative-commons-license-to-software 4 https://choosealicense.com/non-software/

71

Lesson 1: Game Project Launch

12. Lesson 1: Game Project Launch Construct3 (C3) uses the same programming-free event system to design games as found in Construct2 (C2). Unlike the former C2, it also allows scripting inside events and actions. C3 is backward compatible with C2 — we could merely import Part II and we’re done! So, instead of following Part II steps verbatim, we’ll focus on those various new features now available in C3. Warning: If your C2 project(s) used any third-party add-ons, these must be available also in Construct3 format as well before you can import any Construct 2 project that utilized them. Construct 2 add-on files (“.c2addon”) cannot be used inside Construct3. Those “.c2addons” must be updated to work with Construct3, and distributed as a Construct3 add-on file (“.c3addon”).

With just a single click, we can create a new game project. (I’m assuming you’ve already read the “Beginner’s Guide to Construct3” 1 about how to do that? If not, take just a few minutes and review how to set up a new project.) Let’s begin by creating a “New Empty Project” …

Creating a New C3 Project 1 https://www.construct.net/en/tutorials/beginners-guide-construct-1

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

72

Lesson 1: Game Project Launch

Completing the Project’s metadata

We’re not finished just yet … We should complete the project’s metadata. Even if you completed the information in the initial “New project pop-up”, there’s more information we need to enter. When your new project opens, click on the project folder in the Project Bar. On the left-hand side, you’ll find more project properties to fill in.

12.1 About Your Project: • Project Name — for internal staff references and your customer service. • Version (found inside) — I use “Semantic Versioning 2 ” and have encouraged all my students to do the same. Labeling version releases is NOT a new science! In fact, software engineers probably do something extremely close to this already. The problem that they’re trying to solve is: “close” isn’t good enough. Without compliance with some formal specification, versioning numbering is essentially useless for “dependency management”. By giving a name and a clear policy for versioning ideas, it becomes easy to communicate your intentions to clients about your software. Once these intentions are expressed clearly, flexible dependency specifications (but not too flexible, mind you …) can finally be achieved. 2 https://semver.org/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 1: Game Project Launch

• •

•

•

•

73

Read more details about “Why Use Semantic Versioning?” 3 Description — This is a SHORT description of your project! ID — is used by “app stores” about your game product. Yes! It is critical for those folks and uses a “reverse” DNS identification. Here’s why! Domain names are registered as unique WORLD-WIDE! It is a unique identification — just as your email address is unique within a domain name. Supplying a “reverse DNS” uniquely identifies your application worldwide by your registered domain name. It would be wise to have a registered domain name4 and website. Author — here’s your chance to gain fame and popularity or CRASH AND BURN by “Stealing Some Else’s IDEA”?!? (re-read Part I about “Copyrighting IDEAS!”) Don’t get “greedy … be innovative with your own expressed IDEA”. Karma DOES catch up to you5 — unless that is your intent for living this lifetime … to “get caught”! Think about it!6 Email — YES! Add your customer support contact email! I assume you do have a “business website”7 (or at least) some dedicated Internet presence? 8 so those major game publishers — such as Big Fish, the 7th largest game worldwide distributor!)9 of which I am a “Silver Partner” or other such game distributors — may contact you directly. Website — This declares your game as an “Official” legitimate business endeavor. Yes, you can sell your game even with a valid Personal License. In fact, over 50% of the game sold from http://codecanyon.com are games created in Construct.

12.2 Project Settings: Color Theme, Start-up & Display • Color Section — tailors your project theme. • Start-up Section — tailors your project’s initial game introduction content. Here you can tell your game what is the “First Layout” to use and insert “Sponsor Logos” or “White Label” logos. Whether to use a “Loader Layout” — a scene displayed while the game artwork and assets are loading. What “style” this loader will be and whether audio files should be preloaded. I recommend that you always preload audio files. If you’re using the “Free C3 edition”, you do not have a choice of “loader styles”. If you would like a “custom loader” (aka “Sponsored by Splash”, or “loading Scene”), then choose your preferred “Loader style”. See the following tutorials for details … 3 https://semver.org/#why-use-semantic-versioning 4 https://gose-internet-services.net/domain-names-registration/ 5 https://leanpub.com/feedinghislambs 6 https://leanpub.com/feedinghislambs 7 https://gose-internet-services.net/hosting-plans/us-hosting/ 8 https://gose-internet-services.net/hosting-plans/ 9 https://www.geekwire.com/2014/churchill-downs-acquires-big-fish/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 1: Game Project Launch

74

Construct3 Tutorial — Building Custom Loaders10 Construct2 Tutorial — Building Custom Loaders11 • Display Viewport Size — Do not confuse this with a device’s display resolution — the number of pixels displayed on a screen as width by height (i.e. 1024×640). Devices, even with the same screen size, can have very different screen resolutions. Game developers use “viewports” whenever they’re creating mobilefriendly games. Viewports are scaled-down resolutions versions that allow sites to be viewed more consistently across different devices12 . Viewports are often more standardized and smaller than resolution sizes. Due to quantity of artwork used, the scale of the game area must be fixed and changed to match the “Golden Ratio” width of 1 to height 1.6 for portrait or landscape (1.6 : 1). I’ve ran an experiment for the past 25 years(!) and have learned that my games that use the “Golden Ratio13 ” have sales that outperformed any games that used other dimensions (i.e.: 4:3 or 16:9 — which happens to be very close to the Golden Ratio. This is discussed thoroughly in the “Construct Game Starter Kit Collection14 ”. Take a sneak peek at how it relates to Facial Beauty Analysis15 or to Gaming Markets16 .

12.3 Configuration Settings: Advanced & Editor • Bundle add-ons — If enabled, all third-party add-ons that the project uses will be bundled with the project file when saved. This allows the project to be opened anywhere, such as on another system where the add-ons have not been preinstalled. This makes it more convenient to move projects using third-party addons between different devices. Note that add-ons can opt out of bundling; you will be notified when enabling this option if any add-ons cannot be bundled with the project. Bundled add-ons always use the version of the add-on that was installed when they are saved. They can however be updated if the installed add-on is a newer version via the View used add-ons dialog. Performance Tip: If you’re using an opaque background, set “Clear background” to No. This avoids redundantly clearing the entire background in every frame. 10 https://www.construct.net/en/tutorials/loader-layouts-custom-loading-9 11 https://www.construct.net/en/tutorials/loader-layouts-custom-loading-179 12 https://mediag.com/blog/popular-screen-resolutions-designing-for-all/ 13 https://www.canva.com/learn/what-is-the-golden-ratio/ 14 https://leanpub.com/b/cgskc 15 https://www.goldennumber.net/facial-beauty-golden-ratio-florence-colgate/ 16 https://www.goldennumber.net/category/markets/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

75

Lesson 1: Game Project Launch

12.4 Design Consideration: CMS, PWA, or SWPA!

Essential Events & Game Play

Are we making a Content Management System (CMS) — such as a Progressive multiWebpage Application (PWA) — or a “Single Web Page Application17 ” (SWPA)? Construct naturally follows the SWPA architecture — a game with an internal “Splash” scene, a “Game Won” scene, a Game “Lost” scene, and perhaps a “Leader-board” scene or “Credit” scene. You’ll find that nearly all the Scirra Arcade games18 were constructed in this way and their deployment file can become quite large. If you need to update anything — such as your “White Label” branding 19 scene — it requires a new export and uploads into all of your deployment channels again! This can be very timeconsuming — your time could be better spent building more game content instead. You could reduce the size by using artwork assets as “External Files” for all your artwork theme assets. If that’s the path you choose, then you’ll need to use the “System > Load image from URL” option. I prefer the “CMS architecture” using the “Browser” plug-in for single-player games. I use “Progressive Web Apps” 20 for my multi-player games. My games either load or 17 https://www.monocubed.com/blog/what-is-single-page-application/ 18 https://www.construct.net/en/free-online-games 19 https://www.thatcompany.com/white-label-marketing/what-is-white-label 20 https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 1: Game Project Launch

76

redirect to external HTML5 pages such as: about me, log-in, MMoG21 and MMoRPG22 Lobby, customer support, mandatory privacy policies, Frequently Asked Questions (FAQs), game setting options, a catalog of my gaming product line, “purchase a license” PDF form, donations, social media sharing, etc. For example, I create a single vanilla “About Me” page and have all games link to it — using the “Browser > Open URL in new Window”; instead of “Browser > Go to URL”! Read why here! 23 — and each game applies its unique CSS style to that page. I can make changes, whenever necessary, to only one page on my webserver, and then all my games reflect those newest updates. We going to jump directly into the “Play Phase” of our game development. This drops us into a “WHAM! you’re playing now” mode. Later in this tutorial, we’ll surround our “gameplay loop” with a proper “game shell”. Exercise: Read about using HTML files as “Menu User Interfaces24 ”. Exercise: Read “Using Project Files25 ” and adapt it to your C3 game designs.

Read the warning about using the “Browser” object executing JavaScript26 ” with external JavaScript files. 21 https://en.wikipedia.org/wiki/Massively_multiplayer_online_game 22 https://www.masterclass.com/articles/what-does-mmorpg-stand-for 23 https://www.construct.net/en/construct-2/manuals/construct-2/plugin-reference/browser 24 https://www.construct.net/en/blogs/construct-official-blog-1/design-uis-html-css-construct-1585 25 https://www.construct.net/en/tutorials/using-project-files-12 26 https://www.construct.net/en/make-games/manuals/construct-3/plugin-reference/browser

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 1: Game Project Launch

77

> Creating a C3 SWPA Game Version?

Adding internal SWPA Game Scene Layouts

• Step 1) Right-click on the “Layout folder”, and add your planned Scene Layouts — “Customer Loader”, “Splash”, “Instructions”, “Game-play”, “Game Won”, “Interstitial Ads27 ”, and “Game Lost” are just a few suggestions from the Part I Design. • Step 2) Go to the “Project Start-up Settings > First Layout” and choose which Scene your gamers will initially see.

27 https://developers.google.com/admob/android/interstitial

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

78

Lesson 1: Game Project Launch

> FYI: Creating a C3 CMS or PWA Game Version? This workshop will focus on creating an SWPA version. This section is provided for your information as you continue your game development career.

Adding external CMS Pages

• Step 1) Right-click inside the “Layout”, and “Insert New Object”. Find the “Browser” plugin and click “Insert”. • Step 2) Then, go to the Layout’s Event Sheet. Add a new event, System condition, and Browser Action. Enter your URL destination and the new window’s name.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 1: Game Project Launch

Adding external CMS Pages Game Mechanics

• Step 3) Repeat step #2 for every planned CMS external page.

If you include those pages inside your project, you must return to update and re-deploy your game into all your distribution channels again! How does that “bullet hole in your foot feel”28 ?

“Progressive Web Apps” (PWA)29 are similar to CMS in that they both use “server-side and client-side rendering”, and also other back-end services.

12.5 Comparing your code Here’s the full source code from the first lesson: • Hidden Objects Lesson03-example30 28 https://www.ldoceonline.com/dictionary/shoot-yourself-in-the-foot 29 https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps 30 https://makingbrowsergames.com/cgc-books/ho_c3_Lesson1.capx

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

79

Lesson 2: Scaling Objects & Layouts

13. Lesson 2: Scaling Objects & Layouts

Typical Hidden Object Cluttered Game Scene.

Buying all those images will be costly in both searching, creating, scaling, and compiling! Read the next exercise to lighten your initial investment.

Exercise: Reduce the work of creating traditional “cluttered Rooms”. Read How to simplify Hidden Object Game background art1 .

1 https://www.gamedeveloper.com/design/the-making-of-a-hidden-object-game-2d-background-art

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

80

Lesson 2: Scaling Objects & Layouts

81

13.1 What is Your Competition Doing? Before we begin creating our project, let’s explore what other developers have done. This is the fun part when developing a new game — so, enjoy! (Boy and Girl Scouts: Earn your Merit Badge! 2 ) This will show us how their games are perceived and impact gamers, their expectations, and their gameplay. (This is also the first step of 8 for “Game Deployment” covered more thoroughly in Construct Game Prototyping.) • Research, find, and play similar “Seek & Find” games currently on the market that match your ideas and appeal to similar target audiences. • Record which websites host this game genre and • Investigate their submission policies. • Record what game features your competitors have in their games. • Make a list of the theme and minimum features you initially want. This becomes your encoding task list.

> Game Competitor Examples Exercise: Play at least two games from the following “Hidden Object” websites. Write down what you like and dislike about their games. Record your findings on Worksheet 2.1 and the features seen. Then write down how you might improve those dis-satisfactory issues and adjust your desired features.

• Smurfs Interactive Game3 — source code available in student’s “Demos” folder. • Highlights Kids: Hidden Pictures4 — helping children develop their abstract reasoning skills. • Spot the Difference — HTML5 Game (Construct 3)5 • Ryan Guitar GitHub Example6 — An example of how to make a hidden object game with vanilla JavaScript. No libraries or dependencies were used. This is a perfect example for C3! This is a PWA and is best viewed after being installed. • Garage Sale7 • Messy Room8 2 https://makingbrowsergames.com/book/Game_DesignMeritBadge.pdf 3 https://smurfsgame.netlify.app/ 4 https://www.highlightskids.com/games/hidden-pictures/book-clubhouse 5 https://www.construct.net/en/free-online-games/spot-difference-html5-game-24428/play 6 https://github.com/RyanGuitar/Hidden-Object-Game-Example 7 https://makingbrowsergames.com/starterkits/hidden/game1/indexp3.html 8 https://makingbrowsergames.com/cgc-books/demos/ho/game1/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 2: Scaling Objects & Layouts

82

Hint: After completing Lesson 5 & 6, consider converting these games into C2 or C3.

13.2 My Evaluations > Game #1: Smurfs Interactive Game • • • • •

Starts with good instructions. No “clues” are provided about who to search for. No feedback when “Hot” or “Cold”. Smurfs always appear in the same hidden locations. No language selection. The Gamer is assumed to read English.

> Game #2: Highlights Kids: Hidden Pictures • • • • • • • •

Options are provided for both name or picture. Brief instructions were given. No language selection. The Gamer is assumed to read English. Perhaps too many items to find? Sound and visual feedback when correctly identified. Items are rotated and not on the same scale. This increases the difficulty. The game degenerates into a “grid search” with multiple clicking. Too easy to cheat by looking into the html div.

> Game #3: Spot the Difference — HTML5 Game (Construct 3) • as of 202301011, the game has had 1,871 game sessions and 1,429 players since 20210207. This sample reveals “market interest” in this type of genre and reveals its “replayability” ratio of 1.3 per player — gamers give up on the second game session! • Universal symbols are used instead of language text. • No language selection. The Gamer is assumed to read English. • Game Levels earned: brilliant feature for “Hidden Object” games. • Superior artwork and theme music. • Gamer options to stop the music and re-size the window. • Gamer earns “Stars”. The Game Timer determines how many stars are earned. • Gamer earns penalties for incorrect guesses.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 2: Scaling Objects & Layouts

83

> Game #4: Ryan Guitar GitHub Example • JavaScript ES6 used. • Unable to launch his game despite several adjustments.

> Game #5: Garage Sale • We’ll study this in Lesson 5 using a different creation method.

> Game #6: Messy Room • We’ll study this in Lesson 5 using a different creation method.

Exercise: Take your lists and add any features or ideas you might like for your “Hidden Objects” game.

13.3 Competitors’ eCommerce website Examples • Hidden Object Kids Adventure9 — example eCommerce site — perhaps a future distribution channel for your released game? • Hidden Objects Game Source Code — Reskin10 — example eCommerce site — here’s what your efforts will return; see what other developers are doing! • Hidden Expedition11 — example eCommerce site — Quote: “… is a series of singleplayer hidden object casual games developed by the internal studios of Big Fish Games12 for the first five installments (using Big Fish Games Framework as the engine and with the help of Flood Light Games in the 5th game), and by Eipix Entertainment13 for all subsequent installments. As of 2018, a total of seventeen games in the series have been released. The Hidden Expedition series marks the second major hidden object game brand from Big Fish Games. The second game in the series, Hidden Expedition: Everest, would go on to be the first game Big Fish released on the iPhone.” 9 http://www.sellmysourcecode.com/item/hidden-object-kids-adventure/1930/ 10 https://appngamereskin.com/product/hidden-objects/ 11 https://en.m.wikipedia.org/wiki/Hidden_Expedition 12 https://www.bigfishgames.com/download-games/genres/15/hidden-object.html 13 https://en.m.wikipedia.org/wiki/Eipix_Entertainment

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 2: Scaling Objects & Layouts

84

• Liz’s Hidden Picture Puzzles14 — example eCommerce site — Liz Ball is the author/illustrator of the popular Hidden Treasures hidden picture puzzle book series. Over 3,000 of her hidden pictures are published in more than 150 newspapers, magazines, and publications throughout the U.S. and internationally. • Teachers Pay Teachers (TPT)15 — example eCommerce site — selling “Hidden Object” and “Find the Difference” pamphlets for classroom activities.

Hint: Our second “Hidden Object” game deconstruction will be a “conversion” process later in this course. We will take a standard “Hidden Picture” game and migrate it into the Construct Gaming Framework using different methods.

14 https://hiddenpicturepuzzles.com/free-hidden-picture-puzzles 15 https://www.teacherspayteachers.com/Browse/Search:hidden%20pictures

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

85

Lesson 3: Loading & Placing items.

14. Lesson 3: Loading & Placing items.

Essential Events & Game Loop

Our goal in this lesson is to “load” and “create“ our game’s images, symbols, and text objects that the gamer sees in our “Layout 1” scene. We will insert all the Artwork Assets and information text (i.e.: Title, subtitle, and copyrights) into our game project at this development stage. We will load all the symbols, reward certificates, “Cooty”, “lens Frame”, and “lens Magnifier” items into the layout’s margin. The background theme image sets the story and the gamer’s motivation. The gamer will manage a “Magnifying Glass” with their mouse movement. The “Magnifying Glass” will expose the hidden “cooties”. When a gamer finds an item and — while over it — clicks their mouse, the hidden item should disappear, and points should be awarded. We could easily use the “Magnifying Glass” as a weapon scope — the more centered a “Cooty” is targeted, the higher their score earned.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 3: Loading & Placing items.

86

14.1 Lesson Instructions Step #1: Launch Construct3. Step #2: Open your game project from Lesson 1. Step #3: Click on the “Layout tab”. Step #4: Find your downloaded Artwork folder (aka “directory”), and drag only these “.png” items (i.e.: the “Cooty”, “lens Frame”, and “lens Magnifier” items) and drop them outside the Layout 1 Margin. As you do this, you should see the artwork items appear in the “Projects > Object types” folder. We’ll load our “background theme” later. The reason we initially left all this artwork in the Layout is to avoid “Jank”! Arrange those objects neatly in or beyond the Layout. Hint: If you drag all the images at once onto the Layout, Construct will combine them into a sprite sheet — all the images consolidated into one file. “How will you know?” Double-click one of your images in the Layout. If you see “animation frames” each with an imported image, then Construct created a sprite sheet. You’ll need to start over and drag one image at a time.

From the Manual: How to avoid “JANK” If objects are not placed in a layout but are created by run-time events, Construct will load the textures for those objects the moment they are created. This will cause a momentary pause (or “jank”) and make the game feel less responsive. This could be avoided by placing any objects used within the Layouts. Construct will preload all their textures when a Layout starts, thus avoiding any “Jank”. They could be “placed off-screen” and destroyed on start-up to avoid interfering with the initial gameplay.

Step #5: Let’s place our “Copyright Notice” and “Title” text objects. Right-click inside the Layout, and select “Insert new Object”. The “Insert New Object” pop-up appears. Use the “Search box” and find “General > Text”. I’ll create two text objects one for the game’s Title — “Lyme Disease Inspector” — and a proper © copyrights notice (by typing “ALT 0169”; never use “(C)” because it is legally invalid!) When you click on “Text”, you can provide a unique “Name when inserted” located at the bottom; I’m calling my first text field “Copyright” and the second one “Title”. Click the “Insert” button and then place the new text field onto the Layout. (See “Insert New Object Dialog” 1 for more details.) If you right-click on your text field, you can “Align” the field to the “Layout”. 1 https://www.construct.net/en/construct-2/manuals/construct-2/interface/dialogs/insert-new-object

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 3: Loading & Placing items.

87

Exercise: Review US Copyright & Patent Office Circular #3 “Omission of Notice and Errors of Notice” 2 . Exercise: Review US Copyright & Patent Office Circular #3 “Advantages to Using a Copyright Notice” 3 . Exercise: Read More information about game copyrights from a lawyer 4 .

Quote5 , “Note that “Creative Commons” does not recommend6 its licenses be used for software or hardware.”

Step #6: Configure each text field’s properties. Use the information below to guide your decisions.

Serif vs Sans-Serif: How to increase your website’s readability by more than 50% (Excerpt Quote) “Most popular Sans-serif fonts such as Helvetica, Verdana, Arial, Century Gothic, and Calibri, work well in digital design because it carries a reputation of being contemporary. … In a study conducted by Heydon Pickering, more than 51 percent of websites, that participated in their study, used Sans-serif font design for headlines, as they are perceived to stand out better and are readable regardless of distance. The same preference for Sans-serif is found in a website’s body. The most popular typefaces used are Georgia (utilized by The Guardian and Financial Times), Helvetica, and Lucida Grande. Consequently, font sizes determine website readability. Most popular headline font sizes range from 18 to 29 pixels; with 24 to 26 pixels on average. On the other hand, website fonts for the text body are between 12 to 14 pixels, with 13 pixels on average. As a rule of thumb, heading font size to body copy font size ratio is 2:1. Meaning, the size of your heading is ideally twice the size of your body.” Read more details herea . a https://medium.com/rareview/typography-on-the-web-4cd494d6b165

The Text object does not display anything whenever its rectangle boundaries are too small to fit a single letter of its text. If the text object appears to go invisible, try resizing its boundaries taller. Click one of the “square handles” on a boundary and drag. For more help, read about using fonts in the C3 Text Object7 2 https://www.copyright.gov/circs/circ03.pdf 3 https://www.copyright.gov/circs/circ03.pdf 4 https://www.dbllawyers.com/board-game-designers-guide-2/ 5 https://creativecommons.org/faq/#can-i-apply-a-creative-commons-license-to-software 6 https://choosealicense.com/non-software/ 7 https://www.construct.net/en/make-games/manuals/construct-3/plugin-reference/text

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 3: Loading & Placing items.

Using Web Fonts inside a Text Object To set the Text object to use a Web Font, use the Set web font action. You probably want to call “Set web font“ in “On start of layout“ to immediately give it a styling. You need to provide both the Family name and CSS URL to the Set web font action. The “Family” name is the font’s name shown in “Google Web Fonts”. You can cut and paste this from their website. For this tutorial, we’ll use the Flavors web font, so Flavors should be entered for the family name. A problem with web fonts, since they are downloaded (… but then, so are images?!?), is there may be a little delay before the font becomes available. Meanwhile, the browser will either display a native font, or nothing at all. (ed.: and hence, all the more reason to use native browser fonts!) This can make the text appear to flicker momentarily and is the reason why many authors resort to bulky “font images” which increases download delay even more! The good news is that the font is cached; so, the next time it will load almost instantly — there’s only an initial delay for the first time a font is downloaded. However, you can work around this by loading all the “non-native” web fonts on start-up. For each different web font, you use inside a project, add a text object representative in your first layout’s margins; then the “Set web font” Action to load it. Make the text object invisible so it’s never seen — its purpose is merely loading the web font. Splash screens or title screens are ideal for this. If your splash or title screens use web fonts, you might want to use an image there instead, or introduce a second or two “Wait” to give the fonts a chance to load. Then, nobody would ever know that those fonts loaded. Read more details herea . a https://www.construct.net/en/tutorials/using-web-fonts-text-object-109

Hint: An easy way to always keep text centered, despite the browser’s window size, is to stretch the text field to the full width of the viewport. Then go to the Text Properties and choose “Horizontal alignment” and “Vertical alignment” as centered. In the “Text Properties > Text”, type your game’s text information, and choose a “font type” and “size”.

Always use “Safe” web fonts! See the “commonly available” with sample font comparisons8 in various operating systems. 8 http://web.mit.edu/jmorzins/www/fonts.html

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

88

Lesson 3: Loading & Placing items.

89

Exercise: Review the complete article “How to increase your website’s readability by more than 50%” 9 .

9 https://www.dvginteractive.com/serif-vs-sans-serif-how-to-increase-your-websites-readability-by-more-than-50-2/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 3: Loading & Placing items.

90

Step #7: Let’s choose another background theme. I plan to use the “Irezumi-Tattoos > find-Cooty.jpg” for my “Adult” game. I chose a tattoo theme because they are “busily cluttered” images without all the intense artwork so typical of “Hidden Object” games. You might like a different background image; search the Internet for “Japanese Irezumi or Horimono tattoos”. • Set both your “Layout properties > Layout size” and the “Project settings > Window Size” to match your background picture’s dimensions.

Sample Horimono Tattoo from www.tattoodo.com

Hint: After completing Lesson 4, consider converting this Horimono picture into C2 or C3. I’ve created a “Find My Flaws™” 10 game series that includes this picture.

10 https://renown-games.com/sg-games/fmf-dragon-master/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 3: Loading & Placing items.

Microsoft Office to the Rescue! Look in your Artwork Asset directory for “Cooties Sets.doc”. It has a variety of “WingDings” that are easily converted into images and very difficult to find when placed on “Japanese Horimono tattoo themes”.

Cooties Set from Web Dings — “ee-yew!”

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

91

Lesson 4: Game Mechanics Mgmt.

92

15. Lesson 4: Game Mechanics Mgmt. We have our “symbols, magnifying glass, and background” showing up (i.e., “rendering”) on the “Game Play” scene, but they’re not doing anything. It would be cool to make our magnifying frame and glass lens move around. Remember, the “Game Play Loop” from the last Lesson? The code inside the Event Sheets runs every frame — 60 frames per second (fps) — so that’s the perfect place to put our instructions for anything that’s “animated or moves” in a scene (i.e., changing the Lens, Lens Frame’s “X” and “Y” coordinates). Step #1: Click on the “Event Sheet 1” tab. Layouts1 typically have an associated “Event Sheet”; but “Event Sheets” could be shared between different Layouts using “include” statements2 . For example, you can use different “Event Sheets” for different parts of your Game Mechanics. You could have event sheets called “Player input”, “Enemy control”, “Special Effects”, etc. Then each game scene could include those “Common Event Sheets” inside the current layout’s own event sheet. This allows you to share those same events between multiple layouts, without having to “copy and paste” all your events over and over again. Software engineers call this “Don’t Repeat Yourself” (D.R.Y.) coding. 1 https://www.construct.net/en/make-games/manuals/construct-3/project-primitives/layouts 2 https://www.construct.net/en/make-games/manuals/construct-3/project-primitives/events/includes

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

93

Lesson 4: Game Mechanics Mgmt.

15.1 Inside The “Game Loop”

Input, Process, Output!

The Event Sheet defines the Game Mechanics, rules, logic, and data structures. The Construct3 (C3) manual tells us that, “Events are the alternative to programming or scripting. Instead of complicated scripting or programming languages with fiddly syntax and difficult errors, you can define how your game works using this easily readable “logical block” system.” Construct3 (C3) is more lenient and does allow scripting inside its “Event Blocks and Actions”. Construct3 supports writing JavaScript code in stead of using the “events blocks and actions”, as well as importing separate JavaScript files. This is a great way to learn Javascript programming, as well as taking advantage of the full power of programming in the JavaScript language for your projects. This section3 of the C3 manual covers using JavaScript code in Construct. “Event Sheets” run from the top to the bottom every frame per second (fps) (aka “Every Tick”). After an event ends, the next event begins all over again. Its conditions will start picking from all game objects (aka “instances”) again. The Layout is finally “Rendered” once all events have finished, then the “Game Loop” starts from the top of the Event Sheet. This means if one event does something and another event undoes it, you’ll never see those changes. The order of “Events” is important! 3 https://www.construct.net/en/make-games/manuals/construct-3/scripting/overview

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

94

Lesson 4: Game Mechanics Mgmt.

15.2 Game Mechanics Structure An “Event Sheet” contains “Event Blocks”. These blocks — simply called “Event(s)” — have three sections:

An Event Block Structure

1. An “Event Block” contains the margin and condition(s). The left “margin” allows you to select the entire event block and by “Right-clicking” add more Condition criteria. Events have specific, well-defined ways of working. 2. “Conditions” filter out all Layout objects that meet its criteria. Think of conditions as starting with all the “instances” being picked, and progressively filtering them from that point. You can add “Sub-Event Conditions” to a “Parent Condition” by “Right-clicking” in its “margin” — these new “sub-event conditions” will appear as indented and further “fine-tune” selections where its parent left off. This allows you to control unique items independently, especially when it is used with assigned characteristics (aka “variable properties”). A common misconception is that all instances of an object type must act the same. That is simply not the case: the fundamental way events work is to filter out individual instances, and then run actions on just those that met the condition(s). 3. “Actions” make things happen. They only affect those objects that were filtered out (i.e.: collected) by their governing parent’s condition(s). For example, if the condition “Bullet collides with monster“ is met, its actions — “Subtract 1 from Monster's health“ and “Destroy Bullet“ — will run. The “Destroy” action affects only that specific bullet involved in this collision. If other Bullets and Monsters are running around in the Layout, they are not affected by these actions — “Subtract 1 from health” and “Destroy”. In summary, if all an “Event Block’s Condition(s)” are met then its “Actions” run on just those game objects meeting those conditions.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 4: Game Mechanics Mgmt.

95

Multiple Actions running from a single condition

Exercise: Read more details about “How Events Work” 4 . Take notes about “Multiple Conditions”, “Un-referenced objects” and “Triggered Events” for your certification quiz.

15.3 How to Create Events There are several ways to add events. • Double-click inside the event sheet. • Click the “Add event” link which appears under the last event. • Right-click and then choose a menu item to add. Whenever you add a new event, a dialog pop-up appears for adding the first condition (see “Add Condition dialog” 5 ). To add more conditions to an event, right-click the margin or an existing condition and select Add another condition. Actions can be added by clicking the “Add action” link, or right-clicking in the “Margin” of an existing action and then selecting “Add another action”. (See also Add Action dialog 6 ).

15.4 Game Set-up Now that we understand what the “Event Blocks” are, let’s begin creating the game’s setup. We’ve already loaded the “Cooty”, “lens Frame”, and “lens Magnifier” sprite images to avoid “Jank”. What we want is to randomly deploy those “Cooty” spiders within the game area. But we need some more information about our game design: • How many “Cooty” spiders (i.e.: the hidden items) should we deploy? I plan to use a dozen (12). You might like to deploy more or less. 4 https://www.construct.net/en/make-games/manuals/construct-3/project-primitives/events/how-events-work 5 https://www.construct.net/en/make-games/manuals/construct-3/project-primitives/events/conditions 6 https://www.construct.net/en/make-games/manuals/construct-3/project-primitives/events/actions

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 4: Game Mechanics Mgmt.

96

• What are the dimensions of this background image? Construct makes this easy by giving us the “Layout properties > Layout Size > Width” and “Height”. This is the reason the background image, Window Size, and Layout Size should all be the same dimensions. If you plan to allow gamers to load their own background images, you can either: 1) dictate what dimensions are permitted or 2) re-size their images. We’ll discuss these options later in the course • What deployment restrictions should we use? Should we use a marginal boundary inside the background image to restrict the placement of the hidden items? I plan to use a 20-pixel margin inside the background image. As we develop more games, we could use this “internal margin” to fine-tune hidden items into a more focused area. For example, go to the “Artwork Assets directory / irezumi-Tattoos” and look at the girls in swimsuits. They centered in the picture; the “Cooties” should be restricted to their skinny profiles. • How do we dynamically generate new placement locations for each game session? For now, let’s use the “System Expression > Values: random” 7 command. If consistent placement per game is important for your bespoke game, you might consider loading an XML or JSON file with preset deployment values. Step #1: Click on the “Event Sheet 1” tab. Then either click on the “Add Event” at the bottom of the “Event Sheet”, or right-click inside the “Event Sheet” and then click “Add Event”. The “Add Event” pop-up will appear. Select the “System” icon then click the “Next” button or simply double-click the “System” icon. Another new pop-up appears with a list of “System Conditions”. Search for “on start”; this will filter the list and present a triggered event called “On start of layout”. Select it and click “Done”. • Click “Add Action” for our new event. Select the “System” then click “Next” or simply double-click the “System” icon. Another new pop-up appears with a list of “System Actions”. Search for “Create object”; this will filter the list and present several choices. We want to double-click “Create object”. Another new pop-up appears with a list of “Parameters for System: Create Object”. In the “Object to create” drop-down list, choose the “Cooty” sprite; the Layer will be zero (“0”). Now for the tricky part! In the “X” input field, you must type precisely (without quotes): floor(random(LayoutWidth-40)) + 20 Let me explain what this does. • “floor” will round down a number. • “random” will generate a number using the “LayoutWidth“ minus the left and right 20-pixel margins that I mentioned before. 7 https://www.construct.net/en/make-games/manuals/construct-3/system-reference/system-expressions# internalH1Link8

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

97

Lesson 4: Game Mechanics Mgmt.

• add 20 pixels to this randomly generated number. This will indent the left margin by 20 pixels. • Type a “comma” then enter the same command modified for “LayoutHeight”. • Click “Done”.

Deploying 12 Cooties!

Step #2: As you can see, this Event has an additional condition that will repeat 12 times. Right-Click inside the “Margin” of the “System > On start layout”. Select “Add > Add another Condition (C)”. Double-click the “System” icon and search for “repeat”. Double-click “repeat” and another new pop-up appears asking for “Count” — the number of times to repeat this action. I’m using “12” that will generate my 12 “Cooty” spiders. • I’ve added another new action that will scale down the “Cooty” image to 1/10th its original size. I clicked “add action”, double-clicked the “Cooty” symbol, searched for “set scale” and double-clicked it. Then I entered “0.1” and finally clicked “Done”. You may want to experiment with scaling your hidden items.

15.5 Game Play Phase Let’s discuss what we’ll do next, and then we’ll do it. The “Lens” has the “magnifying” capability. The “lens Frame” is merely eye-candy. Whenever the “Lens” rolls over a “Cooty” spider, the spider will scale to “normal size”. When the “Lens” rolls off of the spider, it should return to 1/10th its size again. If the gamer clicks on the spider, it should disappear and points awarded. Here are some examples of what we’re attempting to do from these Scirra Arcade Demonstrations: Prototype Experiment8 8 https://www.construct.net/en/free-online-games/magnifying-glass-23047/play

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 4: Game Mechanics Mgmt.

98

and Advanced Zoom Feature9 . (Download his files and see how he’s doing it! He’s using “Pin”.)

> Making the “Magnifying Glass” There are three different ways we could bind the “Magnifying Glass” pieces together. We could: • create two separate events; one for the frame and another for its lens. Then bind both of them to the gamer’s mouse coordinates (“X” and “Y”). OR • “Pin” 10 the frame and lens together. Doing so would conserve one event statement when compared to the method above. OR • Add the lens as a “child” of the frame. This is the Construct’s recommended method to use. Doing this still only conserves one event statement when compared to the first method above.

Magnifying Frame & Lens Relationship The scene graph feature is a modern built-in replacement for the Pin behavior. Consider using the Add child action to connect objects together instead of the Pin behavior. This has better support for connecting chains of objects together and provides conditions that can pick instances across the hierarchy. Add child:a Add another object as a child of this object, which becomes its parent. The relative differences between the objects are remembered at the time the action is used. Then as the parent moves, scales, and rotates, the child will move, scale and rotate with it. A series of checkboxes allows the selection of which properties are to be updated. For example ticking only the X and Y options will keep the child at the same relative position, but not change its angle. The “Destroy” with parent option can also be enabled to automatically destroy its child whenever its parent is destroyed. a https://www.construct.net/en/make-games/manuals/construct-3/plugin-reference/commonfeatures/common-actions

SO! The “Pin” option is eliminated according to Construct’s recommendations. I do not plan to “… scale, rotate nor destroy …” the “Magnifying Glass”. So our third option above is merely an academic study for later experiments. Step #1: Click on the “Event Sheet 1” tab. Then either click on the “Add Event” at the bottom of the “Event Sheet”, or right-click inside the “Event Sheet” and then click “Add 9 https://www.construct.net/en/free-online-games/magnifying-glass-multi-level-40618/play 10 https://www.construct.net/en/make-games/manuals/construct-3/behavior-reference/pin

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 4: Game Mechanics Mgmt.

99

Event”. The “Add Event” pop-up will appear. Select the “System” icon then click the “Next” button or simply double-click the “System” icon. Another new pop-up appears with a list of “System Conditions”. Search for “Every Tick”; this will filter the list and present a General > Every tick and a Time > Every X seconds. I’m using “Every Tick” for my game. You might like to experiment with the “Every X seconds” if your event sheet becomes too crowded with commands. Select “Every Tick” for now and then click “Done”. • Click “Add Action” for our new event. Select the “Mouse” then click “Next” or simply double-click the “Mouse” icon. Another new pop-up appears with a list of “Mouse Actions”. We want to double-click “Set cursor style”. Another new pop-up appears with a list of “Parameters for Mouse: Set cursor style”. In the “Cursor style” drop-down list, choose “None”. You might like to experiment with the mouse styles that match your game’s theme. I could have selected “Normal”, “Hand”, “Crosshair”, “Move”, and “Help” as possible alternative themes. • Click “Add Action” again for this event. Select the “lensFrame” then click “Next” or simply double-click the “lensFrame” icon and search for “Set position”. Doubleclick “Set position” and a new pop-up appears asking for the new coordinates. This is the tricky part! In the “X” input field, you must type precisely (without quotes): Mouse.X Let me explain what this does. • As you type “Mouse” in the “X” field a pop-up will appear with verified options. You could simply “TAB” when the correct term appears, and Construct will type the remainder for you. When you type “ . “ (period) a new list of properties will appear. If you type “X”, the list will slide down to that property. Press “TAB” and Construct will type it for you. • Click on the “Y” field and do the same steps above for “Y”. • Click “Done”. Step #2: Now return to Step #1: and do all these steps for the “Lens” sprite this time.

Option #1: Binding Magnifying Glass pieces together

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

100

Lesson 4: Game Mechanics Mgmt.

> Managing Cooty Spiders If you test your game at this point, you’ll see the “Magnifying Glass” and small specks (aka “Cooties”!) throughout the background image. We still need to reset the “Cooty” spiders to their normal size whenever the “Magnifying Glass” rolls over them. Step #3: Click on the “Event Sheet 1” tab. Then either click on the “Add Event” at the bottom of the “Event Sheet”, or right-click inside the “Event Sheet” and then click “Add Event”. The “Add Event” pop-up will appear. Select the “Lens” icon then click the “Next” button or simply double-click the “Lens” icon. Another new pop-up appears with a list of “Lens Conditions”. Search for “Is overlapping another object”; this will filter the list and present a couple of Collisions options. Choose “Is overlapping another object”. Another new pop-up appears with a list of “Parameters for Lens: Is overlapping another object”. In the “Object” drop-down list, choose “Cooty” and click “Done”. • Earlier, we added an action that will scale down the “Cooty” image to 1/10th its original size. We need to reverse that. let’s now click “add action”, double-click the “Cooty” symbol, search for “set scale” and double-click it. Then enter “1” to set this discovered “Cooty” to its normal size, and finally click “Done”. You may want to experiment with scaling your hidden items. • When the mouse leaves a “Cooty” simply return it back to its miniature size as we did before.

Re-sizing Cooties

> Debugging Cooty Sizing If you test your game at this point, you’ll see the “Magnifying Glass” and discover “Cooties” throughout the background image. The problem we still have is that the “Cooties” never shrink back down. They just remain visible. Our game degenerates into a simple scan of the background image to find all 12 Cooties. Where’s the challenge in that?!? © Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 4: Game Mechanics Mgmt.

101

The problem is the “event order from top to bottom”. • Find event #7 and drag it above event #5. Now re-test the game.

> Debugging the Cooty Inventory “You wanted 12 Cooties but I’m counting 13! What’s with that?!?”, you say? Well, remember when we inserted that initial spider to avoid JANK? We should compensate for it by subtracting 1 in event #2.

15.6 Practice Method #1 Now that you’re gaining skills in “Hidden Object” games. Let’s apply it to a Competitor’s game — “The Smurf Village” from Lesson #2. Play my interpretation of that game converted into C2 …

> Bonus Game & Download • Play transpiled “Smurf Village” 11 — Re-imagined using method #1! All the Smurfs are now a single image inside a multiple-framed sprite, randomly deployed with our familiar “Magnifying Glass”. • Download this game transpiled into C2 here12 .

15.7 Download Lesson 4 “.c3p” file • You can download the Lesson 4 “.c3p” file13 to compare your progress. • You can download the Lesson 4 Find & Hide “.c3p” file14 bug fix to compare your progress. 11 https://makingbrowsergames.com/cgc-books/demos/ho/smurfVillage/index.html 12 https://makingbrowsergames.com/cgc-books/demos/ho/smurfVillage/ho_c2_Lesson2-SmurfVillage-Final.capx 13 http://makingbrowsergames.com/cgc-books/ho_c3_Lesson4.c3p 14 http://makingbrowsergames.com/cgc-books/ho_c3_Lesson4-findHide.c3p

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 5: Game Conversion Methods.

102

16. Lesson 5: Game Conversion Methods. At this point — the end of Lesson 4 — in our development, we have a fully operational “Hidden Objects” game prototype using “method #1” with only 7 event blocks! ( You could now begin selling your Hidden Objects game(s) and afford a “C3 subscription”1 . ) We have substituted the volumes of artwork images, typically found in this game genre, for a simple “single-frame” icon in method #1. In this lesson, we will learn several more tricks to substitute the ridiculous amounts of artwork used in “Hidden Objects” games. Exercise: Open your student “Demos/Hidden-Object-game-master” directory. Exercise: Create a New Project and save it as “Lesson 5” or open and save this file — Lesson 5 Start Game Conversion2 .

16.1 Conversion Method #2

Garage Sale Background Image 1 https://www.construct.net/en/make-games/buy-construct 2 http://makingbrowsergames.com/cgc-books/ho_c3_Lesson5-startGC.c3p

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 5: Game Conversion Methods.

103

Our next “conversion” will be a different process for creating “Hidden Object” games. We will take a typically “cluttered Hidden Picture” game and migrate it into the Construct Gaming Framework. You will need this GitHub repository 3 or retrieve it from your student downloads. I’ve chosen the “Garage Sale” background image. Once you discover how this process works, there are dozens of other such “Hidden Object” games available on GitHub4 . This is just one of three backgrounds abandoned by this author 7+ years ago. You can download his public project from GitHub here5 .He attempted to use JavaScript source code without a gaming framework. Use your browser to scroll and find images. Play his original JavaScript “Messy Room” 6 and study his source code.

16.2 Lesson Instructions > Step #1: Building a Grid. I’m using a “2D grid” to neatly align the “Hidden Objects” in rows and columns instead of experiencing the random overlapping deployment problems that we discussed earlier. To do this, let’s look at a couple of configurations. • Go to the “Project > Layouts” and select our “Layout 1”. In the left-hand “Properties Bar”, you’ll find the “Snap to grid” and “Show Grid” checkboxes. We need both selected and I recommend a grid size of 32x32 pixels. “Why 32 pixels”, you say? Because I’m looking at several of the images in the background pictures (i.e.: “Garage Sale”) and “guesstimating” that the variety of things is roughly 32 pixels squares. Many game developers and authors are rather cavalier 7 with their grid sizes. Computer CPUs think in Binary; they count from “0 to 1” or electronically “off and on” respectively. It is critical to work with the CPU and select numbers that are multiples of “2” — such as 2, 4, 8, 16, 32, 64, … do you see the pattern? I cringe when I read authors instructing others about creating sprites that are “40 pixels square” on grids that are “23 pixels by 21 pixels”! They tell you that they are accounting for a “margin” around their sprites — without any consideration for memory consumed! Apparently, they’ve never read about “Construct Export Optimization”. 3 https://github.com/MakingBrowserGames/Hidden-Object-Game 4 https://github.com/search?q=hidden+object+javascript 5 https://github.com/nairuzabulhul/Hidden-Object-Game 6 http://makingbrowsergames.com/cgc-books/demos/ho/game1/ 7 https://www.merriam-webster.com/dictionary/cavalier

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 5: Game Conversion Methods.

104

Construct Export Optimizations Performed Construct does a lot of work for you on exporting your games. Some of this article’s highlights are: • Don’t worry about having duplicate images — they’re automatically removed. • The image format (e.g. PNG or JPG) only affects the download size, not the runtime memory use. • If possible make sprite images just under a power-of-two size, so they can pack into a sprite sheet efficiently. However, try to make “Tiled Backgrounds” exactly power-of-two sized. • Don’t import “lossy image files” (e.g. PNG-8 or JPG) into Construct. They are always stored as lossless PNG-32 until you export, at which point it respects what you’ve set in the “Image Format” dialog. • Don’t worry about the fact that Construct splits up sprite sheets into separate files when you import them into the editor. It will reassemble images in a memory-efficient way into a newly exported sprite sheet. • Don’t bother trying to run the exported image files through other compression tools or services. Construct is probably already doing a very good job. • Don’t try to manually delete audio files before exporting. Construct automatically removes any that are not needed on export. • If exporting is slow, try exporting on a workstation with more CPU cores! Knowing what Construct services do for you during an export can help you work effectively with Construct and avoid any unnecessary work. Read more details from Construct Export Optimizationa . a https://www.construct.net/en/tutorials/construct-3s-export-4

> Step #2: Creating More Layers. Let’s create: • a “background” (BG) layer that will have the specific image and will be “locked”, • an “Objects” (OBJ) layer where all the “things to find” are deployed, and • a “User Interface” (UI) layer which will be the “Magnifying Glass.

If you are using the FREE C3 edition, you are restricted to two Layer per Layout. So, combine the BG and OBJ and treat them as one.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 5: Game Conversion Methods.

105

Layers inside a Layout By default the “Project Bar” and “Layers Bar” are tabbed together here. The “Project Bar” contains an overview of everything in your project. The “Layers Bar” could be used to add different layers inside a layout. Layouts also consist of multiple Layers, which can be used to arrange objects into “background” or “foreground” layers. A layer is like a sheet of glass onto which game objects are painted. This allows an easy arrangement of objects displayed in front of each other. For example, showing foreground objects in front of the background sprite and images. It also allows for interesting depth effects like parallax a . Layers can be individually scaled and rotated as well. The number of layers usually has no effect, unless most of the layers have changed their opacity, have effects applied, have a blend mode other than ‘Normal’, or use ‘force own texture’. However, typically there is no performance impact from using multiple layers with their default settings. Layers can be “dragged and dropped” inside the “Layers Bar” to change their “Z-order”. Layers at the bottom of the list are displayed at the back (e.g. background objects), and those at the top of the list are displayed at the front (e.g. HUD objects). a https://en.wikipedia.org/wiki/Parallax

> Step #3: Load images. • Select a background image and carefully load it into the “BG” layer. I’m using the “Garage Sale” as my “BG”. My background, window size, and layout are all 800x500 (i.e.: the Golden Ratio). • Load the “convertion2Square.png“ into the Layout on the OBJ layer. It is “64x64” pixels to match my “32x32” grid. If you’re using a different grid size, you might like to tailor the “square”. • Load the “lensFrame” and “Lens” into the Layout on the UI layer. I’ve re-sized both to a smaller size for this game — the frame is “125x125” and the lens is set at “20x20” after several experiments.

> Step #4: Deploy Hidden Objects. Now the fun begins! We can either dynamically (discussed later) or manually distribute the “square” around the grid — it becomes our “Hidden Object”. The squares are visible for now and represent the “item list” to find. Let’s start with the manual deployment and demonstrate how this new method works. I’m using 12 squares with inserted “Instance variables” of “name” and “points” for each item. © Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 5: Game Conversion Methods.

106

In a dynamic deployment, the squares are deployed from a JSON configuration file and the item’s name, row, column, and points awarded come from this JSON file. When the “Magnifying Glass” rolls over a “square” the text prompt will appear and reveals the name of the item. If the gamer clicks the “square”, it is removed, and points are awarded but the image still remains in the background.

Step #4 Deploy Hidden Objects using Method #2

> Step #5: Game Mechanics & Events Used. These events should look familiar; they are similar to the previous method from Lesson 4 except for the new “Text Object”. This “Text Object” follows the mouse and reveals the name of the item.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

107

Lesson 5: Game Conversion Methods.

Step #5 Method #2 Game Mechanics & Events

Test the game now — YES! with the blue square on top of the background image. For the finalized game, you’ll simply turn all the blue squares invisible. Hint: If the larger “lensFrame” is not working as you’d like for mouse roll-overs. Simply exchange it for the “Lens” Magnifier.

16.3 Practice Method #2

Cluttered Desk

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 5: Game Conversion Methods.

108

Take this background — found in your student downloads8 — and apply what you’ve learned from this lesson to it. • Try a different Grid size. • Try different “square” shapes — such as “rectangles”, “triangles”, or perhaps even “circles”? • Play my game interpretation of Messy Desk 9 with “hints”.

16.4 Competitor Games Revisited! … Now that you’re getting familiar with method #2, why not revisit some competitor games from Lesson 2 and see what you can do with them. Play my interpretation of those games converted into C2 … • Messy Computer Desk 10 — using C2 with method #2 with “hints” and scoring.. • Messy Room11 — Spring Cleaning using C2 with method #2 with “hints” and scoring.. The Search List are dynamically generated, and scoring is based on the dynamic search list. (We’ll review dynamic search lists in Lesson 10.)

16.5 Download Lesson 5 “.c3p” files You can download to compare your progress or start new method #2 games with the: • Lesson 5 Start Game Conversion “.c3p” file12 • Lesson 5 Steps 1 to 5 “.c3p” file13 • Lesson 5 Final Game “.c3p” file14

> Available Bonus Games … • “Messy Room” — instructions found in Lesson 10. • Messy Computer Desk 15 8 http://makingbrowsergames.com/cgc-books/demos/ho/game1/images/background2.jpg 9 https://makingbrowsergames.com/cgc-books/demos/ho/messyDesk/index.html 10 https://www.construct.net/en/free-online-games/messy-computer-desk-47669/play 11 https://makingbrowsergames.com/cgc-books/demos/ho/messyRoom/ 12 http://makingbrowsergames.com/cgc-books/ho_c3_Lesson5-startGC.c3p 13 http://makingbrowsergames.com/cgc-books/ho_c3_Lesson5-steps1-5.c3p 14 http://makingbrowsergames.com/cgc-books/ho_c3_Lesson5-final.c3p 15 https://www.construct.net/en/game-assets/games/domain-licenses/messy-computer-desk-3145

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 6: He says, “He’s already Got One”!

109

17. Lesson 6: He says, “He’s already Got One”! We have a “Magnifying Glass” that responds to the mouse and when a gamer clicks an object, they should earn points or penalties for their guesses.

17.1 Modify a Gamer’s “Score & Discoveries” Adding a “Heads Up Display” (HUD) In Lesson 3, we inserted several “Text Objects”. Let’s now create two more text objects in the “UI layer” — one to display the accumulated score, and the other to show the total items found. I’m assuming the gamer can read English; we’ll learn more about developing a “Multilingual” game later. Step #1: • Decide if you are using method #1 (Lesson 4) or method #2 (Lesson 5). • Decide if the new “Heads Up Display” (HUD) is located at the top, bottom, left, or right of the background image. I recommend placing this information according to a gamer’s native language — some read from left to right, others read from right to left, while still others read from top to bottom. A gamer’s eyes will instinctively follow their native language. • Right-click in the Layout, and select “Insert new Object”. The “Insert New Object” pop-up appears. Use the “Search box” and find “General > Text”. We will create two more text objects — one for the gamer’s accumulated “Score” and the other for “Correct Guesses” — “Strikes” for incorrect guesses. When you click on “Text”, you can provide a unique “Name when inserted” at the bottom. Click the “Insert” button and then place the new text field onto the Layout. (See “Create New Object Dialog” 1 for more details.) I’m inserting the default text: “You have found: “. • For both method #1 and method #2: Go to the “Event Sheet” and create two new “Global variables”. I’m calling one “Score“ which will store the gamer’s accumulated points earned. The other I’m calling “itemsFound“ is to tell the gamer how many items they have correctly discovered out of how many were deployed. Set both “types” to a number, and its initial value to zero (“0”). 1 https://www.construct.net/en/make-games/manuals/construct-3/interface/dialogs/create-new-object

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

110

Lesson 6: He says, “He’s already Got One”!

• For both method #1 and method #2: Add two new “Actions” above “Destroy”. These will add “1” to the global Score variable, and then “Destroy” the “Hidden Object”.

HUD text Updated

If you plan to have a variety of points awarded instead of entering “1”, you’d enter the assigned “Instance variable conversion2Square.points”.

Method #2: Varied Points Earned from Item

17.2 Download Lesson 6 “.c3p” file You can download to compare your progress or start new games using: • Lesson 6 “method 1 .c3p” file2 • Lesson 6 “method 2 .c3p” file3 2 http://makingbrowsergames.com/cgc-books/ho_c3_Lesson6-method1.c3p 3 http://makingbrowsergames.com/cgc-books/ho_c3_Lesson6-method2.c3p

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

111

Lesson 7: Find the Difference!

18. Lesson 7: Find the Difference! So far, we have two different methods to create “Hidden Object” games. There’s still a third method for “Hidden Object” games known as “Find the Difference”.

Find the Covid-19 Germ Variants

Exercise: Play this game1 in the Scirra Arcade.

Dual Picture creation: I found a free image and inserted it twice into a PowerPoint slide. Then took a “screen capture” and modified it to the Golden Ration with my graphics software. Yeap! nothing to it! OR, you might download files from “PrintItFree.net” 2 . OR, make images the traditional way 3 . 1 https://www.construct.net/en/free-online-games/covid-exposure-47752/play 2 https://www.printitfree.net/spot-the-difference-picture-puzzles/ 3 https://www.culturepk.org.uk/wp-content/uploads/2020/05/Create-A-Spot-The-Difference-Game.pdf

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 7: Find the Difference!

112

18.1 Lesson Instructions This third method is very similar to what we’ve already learned up to this point. The only “difference” is that the gamer has a “reference” picture without contamination. The other picture has the inserted “flaws”. Step #1: Choose which image will have the inserted changes — the left or right one. OR better yet, dynamically switch between images for each game session! Also, carefully notice where I’m randomly choosing a new sprite animation frame.

Random Infestation in Left or Right Image with Various Germs

Step #2: Choose “how many” and “what single type” of symbol(s) to use. I plan to deployed 12 germs and a variety of different types of symbols from Microsoft Office WingDings. I’ll place all the symbols inside one sprite as its animation frames. This gives me an option to either: randomly pick from among all the sprite’s frames or just use a single random frame per game session.

Random Infestation in Left or Right Image with One Germ

Step #3: Symbols will adopt a “modest 1/10th down-scaling” that we’ve learned before. © Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 7: Find the Difference!

113

Step #4: Symbols are randomly deployed within an image for each new game session. Step #5: Use modified margin settings for the “changes” — a “left image” or “right image” deployment margins.

18.2 Customized Margins In Steps #1 and #2 above, I hard-coded where the germs were created between the game’s margins. This becomes an import “Game Settings Options” when we let gamers “Create Your Own” (CYO) adventures in Lesson #9. What we’ll do then is create some global variables — top, bottom, left, and right — for customized margins for width using random(left,right), and then again for height using random(top,bottom).

18.3 Deeper Dive: AI Project Preparations The problem, with these following “Find the Difference” algorithms, is the game is static. It never changes. The hidden pictures are always in the same locations. If a gamer does “re-play” this game, it is no longer a “Find the Difference” game but changes into a “Memory Game” — can the player remember where all the objects were located. The game’s new challenge becomes finding those objects in a faster time. This novelty change quickly looses the gamer’s interest and “re-play” value becomes zero! • A Hidden-picture Puzzles Generator 4 — dynamically generate “Find the Difference” puzzles with this AIBot algorithm. 4 https://citeseerx.ist.psu.edu/pdf/1eefc3d7560efcb56d28b84943357efe605c1d85

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

114

Lesson 7: Find the Difference!

9-page Research System Overview

Abstract: A hidden-picture puzzle (aka “Find the Difference”) contains objects hidden in a background image, in such a way that each object fits closely into a local region of the background. Our system converts the image of the background and objects into a line drawing, and then finds places in which to hide transformed versions of the objects using rotation-invariant shape context matching. During the hiding process, each object is subjected to a slight deformation to enhance its similarity to the background. The results were assessed by a panel of puzzle solvers. • Another approach for Hidden Pictures5

AI System Overview

Abstract: Our system detects the edges of the object to be hidden, and then finds a place where it can be embedded within the scene, together 5 https://citeseerx.ist.psu.edu/pdf/5cc61b57d66e6d03542a24b2df09f1700171d0eb

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 7: Find the Difference!

115

with a suitable transformation for doing so, by optimizing based on edge differences. Embedding is performed using a modified Poisson blending approach, which strengthens matched edges of the host image using the edges of the embedded object. We show various hidden images generated by our system.

Showing my ignorance … but couldn’t this just be an opacity adjustment?

18.4 Download Lesson 7 “.c3p” files You can download to compare your progress or start new games using: • Lesson 7 initial file6 . • Lesson 7 Random Left or Right7 with 12 deployed germs and different variants. • Lesson 7 Single Variant8 with 12 deployed germ with single variant. 6 http://makingbrowsergames.com/cgc-books/ho_c3_lesson07-startGC.c3p 7 http://makingbrowsergames.com/cgc-books/ho_c3_lesson07-step1.c3p 8 http://makingbrowsergames.com/cgc-books/ho_c3_lesson07-step2.c3p

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

116

Lesson 8: “Game Lost & Won” Scenes!

19. Lesson 8: “Game Lost & Won” Scenes!

Game Finished Phase

We have three (3) fully functional “Game Play” prototypes! Let’s now focus on ending our game properly. There are a couple of conditions we’re looking for: • All the “Hidden Items” were discovered or eliminated. OR • The gamer has incorrectly guessed too many times. Let’s set (aka “hard-code”) “too many times” to three (3) or to any number you like. OR • Optional Design: add a game “count-down timer” and when the time “runs out”, the game ends on that condition too. If you like this option, then you’ll need another text field in the HUD layer just to show the time remaining. I’ll provide more details about this feature later in Part IV.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 8: “Game Lost & Won” Scenes!

117

19.1 Hidden Item Inventory Our first “Game Finished” option happens when all the “Hidden Objects” are discovered or eliminated. Construct has a command that “counts” how many objects are on the Layout and layers. This makes it too easy except that we set one item on the layout to avoid JANK! We must adjust for that first deployment.

19.2 “Game Finished” Scene(s) There are several ways to do this. If we were clever, this could be a single scene with dynamic text stating “Won OR Lost”, with a final score, a “Play Again” button, and a button to “Submit Score” into a leader-board. But, we’ll start with the simplest by just adding two separate scenes. • Go to the “Projects > Layouts” folder, right-click it and add two new layouts and their associated “Event Sheets”. Rename one new layout as “Game Won”, and the other as “Game Lost”. I’m renaming their associated “Event Sheets (es)” as “es_Game Won” and “es_Game Lost” respectively. • Inside the “Game Won” Layout, add a text field with “Won” as its text. • Inside the “Game Lost” Layout, add a text field with “Lost” as its text.

> Determine Rules for “Game Won” • • • •

• • • •

Go to the “Event Sheet 1” and Add an event. Double-click “System”. Search for “Compare two values” and double-click it. A pop-up window appears asking for three pieces of information. Type in the first value: “hiddenItemName.Count” (without the quotes). In the “Comparison” dropdown list, select “≤ Less or to” and for the “second value” type in the number 1. What this rule does is watch for the “germ” inventory to reach “0” in the layer. If you’ll remember, we have “an extra “Hidden Item” beyond the margins to avoid Jank. Add an “Action” for this event. Double-click “System”. Search for “Go to layout” and double-click it. In the pop-up, select the “Game Won” Layout because the gamer has eliminated all the bricks and won the game.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 8: “Game Lost & Won” Scenes!

118

> Determine Rules for “Game Lost” Now let’s set up the losing condition. • • • •

Go to the “Event Sheet 1” and Add an event. Double-click “System”. Search for “Compare two values” and double-click it. A pop-up window appears asking for three pieces of information. Type in the first value: “Strikes” (without the quotes). In the “Comparison” drop-down list, select “≥ Greater or Equal” and for the “second value” type in 3 ( three; or any number you’d like ). What this rule does is watch for the gamer to “strike out”. • Add an “Action” for this event. • Double-click “System”. • Search for “Go to layout” and double-click it. • In the pop-up, select the “Game Lost” Layout because the gamer has exceeded the number of allowed strikes. Press “F4” and test your game.

19.3 Global Objects & Layouts If you would like the gamer’s final score displayed when the Game has “Finished”, go to the Layout 1 and click the “Score” text field. In the left-hand panel, select “Object type properties > Global” and change it to “Yes”. The HUD score will now become available on all “Layer 0” throughout the game. Press “F4” and test your game.

19.4 Practice Session Return and add scoring, Game Won, and Game Lost to: • Lyme Disease (Lesson 6 method #1) • Garage Sale (Lesson 6 method #2)

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 8: “Game Lost & Won” Scenes!

19.5 Download Lesson 8 “.c3p” file • Lesson 8 Covid file1 — the final game prototype!

1 https://makingbrowsergames.com/cgc-devcourse/gameDesign/c3_examples/ho_c3_Lesson8-Covid.c3p

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

119

Part IV: Expanding this Prototype You’ve finished all the lessons for three basic “Hidden Object” prototype foundations — Congratulations! At this point, you have learned several basic Game Display Mechanisms (GDM) from the Construct Gaming Framework and developed several Game Mechanics (GM) (i.e., rules and logic) for a simplistic “Seek & Find” game. This was a basic introduction merely scratching the surface of countless helpful methods provided on the Construct website. Be sure to check out their ever-growing list of “Construct Tutorial examples” 2 and their “official documentation” 3 , or visit their “HTML5 Construct forums” 4 if you ever need any help or advice. Yes, of course, I’m also available too! You can extend these prototypes as foundations to launch other new game projects. Add whatever features you feel are best in your final release such as “Replayability”! BUT! Always preserve these original files so that you can revisit them and launch more games. This is the “Game Recipe’s secret sauce”TM to release a game per week — you simply exchange its Artwork Assets, while retaining the same Game Mechanics and front-end Mechanisms. Exchanging the “front-end Gaming Framework” while retaining Game Mechanics and Artwork Assets, allows you to deploy in any engine!

Replayability Summary: the ability to … 1. easily re-experience game content in relatively unaltered form. 2. reinvigorate the challenge by increasing its difficulty — adding more items or adding constraints such as “time limits” or wrong guess penalties. 3. reimagine the gameplay by changing its goals such as Campaigns and Levels or the game’s perspective in a second session.

2 https://www.construct.net/en/tutorials/starter-kits-tutorials-game-2924 3 https://www.construct.net/en/make-games/manuals/construct-3/getting-started/get-construct-3 4 https://www.construct.net/en/forum

Lesson 9: Adding Unique Features.

121

20. Lesson 9: Adding Unique Features. Let’s turn our attention now to customizing this game prototype for publication.

Hidden Object Games Are Mindless Fluff, And That’s Why I Love Them By Mike Fahey Published May 1, 2016 … “The hidden object genre is sort of a combination of point-and-click adventure games and “Can You Find The Things Hidden In This Picture” puzzles that used to pop up in magazines and newspapers back in the day. … it feels as if hidden object games were created specifically to give older adults, mostly females, something to do at their computers. I recall hearing my aunt clicking away at her computer in the evenings, a glass of wine on her desk.” … Aside from the basic mechanics, games in the hidden object genre usually share several key elements. Strong female protagonists. There are exceptions, but most of the games I’ve played feature stalwart female leads with a taste for adventure. Rescuing someone from something. The main character’s fiance, daughter, son, uncle, father, grandfather, or pet is missing, and she must uncover their fate, rescue them, or both. Fantasy themes. Rarely are the mysteries in hidden object games mundane. There are usually supernatural elements, fantasy elements, or whatever is currently trending well with the demographic elements. Vampires, romantic horror, scary clowns. That sort of stuff. Lovely art, low system requirements: Hidden object games are designed to draw the eye with fantastic visuals while still being playable on the weakest of PCs. There’s not a lot of 3D in play, but plenty of hand-painted 2D to go around. Using that basic recipe, developers like Artifex Mundi, Big Fish Games, Eipix, and Sandlot Games have been churning hidden object titles out for years. Here are some of my favorites, along with their Steam descriptions. continue reading his insights? a a https://kotaku.com/hidden-object-games-are-mindless-fluff-and-thats-why-i-1774145603

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 9: Adding Unique Features.

122

Exercise: Create a new project file and save it with a new project name for your final bespoke game. Exercise: Revisit Lesson 1 and complete your project’s “metadata”.

20.1 “Play Again?” Currently, our game stops at the “WON” or “LOST” Layout. We want our game to become popular with as many “gameplays” as possible. We need to offer the gamer a chance to “Play Again?” and beat their — or others’ — high scores. The solution is simple; we just add a button inviting them to “Play Again?”.

> Lesson Instructions • Go to the “Game Won” Layout, and “Insert a new object”. • Search for “Button” and double-click it. Place and align it to the center of the scene. • Select this button, and change its “text” from “OK” to “Play Again?”. You might have to re-size the button to see all the new text and then re-center the button again. • Go “Game Won” Event Sheet and Add an event. • Double-click the “Button”. • Search for “On clicked” and double-click it. • Add an “Action” for this event. • Double-click “System”. • Search for “Go to layout” and double-click it. • In the pop-up select “Layout 1” (our “Game Play” phase).

> Reset the Global Variables. • Add another Action to reset the Global Variables. If you do not reset the Global Variables for “Strikes” and “Score”, the game will never properly start again. Double-click “System”. • Search for “Set Value” and double-click it. • In the drop-down list, select “Score” and set its value to zero. • Do these steps again to reset the Global variable for “Strikes”.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

123

Lesson 9: Adding Unique Features.

Resetting specific Global Variables — the Score & Strikes.

Note: Choosing System Action “Reset global variables” puts all the global variables in the project to their initial values.

Hint: Do you see the software bug? The “potential problem” is we are going to “Layout 1” but the Global Variables are still the same. This is a “logic loop” until those variables are set to “0”! To simply fix this, click the “Go to Layout 1” Action and drag it to the bottom — under the “Set Strikes to 0” Action. Remember, all Events are executed from “top-to-bottom”. Actions only execute if their parent event “Condition” is TRUE.

20.2 A Better “Game Start”

Inserting More Game Phases

Currently, when the game loads, the “picture” immediately launches and the “Game Play” phase begins without warning or instructions about what to do. The mistake © Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 9: Adding Unique Features.

124

we’re making is skipping over the “Splash | Sponsor | Language” and the “Main Menu” phases that have a “Start” button, “Game Acknowledgments & Credits”, and “Instructions | Help | Options or Settings” buttons. The next addition to this game is to avoid this sudden start, and perhaps, give the player a chance to either choose a preset picture or load their own pictures before starting. It also gives our game a “Stop Point” — a time to finish loading game assets while players are deciding what to do. Adding these two new scenes follows the same instructions we did before with “Game Lost” and “Game Won”. The “Main Menu > Start” button leads gamers directly into the “Game Play” phase. The “Main Menu > Credit” button leads gamers to the “Credits & Acknowledgments” scene. Acknowledgments are required for the privilege of using others’ code by many licenses1 . Exercise: Return to “Lesson 1 > Creating a C3 SWPA Game Version” and add the various scenes to complete your game. Exercise: Review “How to design professional-looking mobile game buttons” 2 . Exercise: Select a license for your final game release — Choose an open-source license3 .

Quote4 , “Note that “Creative Commons” does not recommend5 its licenses be used for software or hardware.”

20.3 Integrating Multiple Languages?? I firmly believe that the first thing seen in any game should be its “Language Selection”. I use “National Flags” as a universal symbol for language selection. If a gamer selects with their mouse, then I know they’re playing on a “Desktop”. If the gamer “touches” their flag, then I know they’re playing on a “touch screen”. “Why’s that?”, you asked? Because: • I set specific controls for touch screens. See “Touch & Mouse Controls” below. • I want as many people “Internationally” playing my game. 1 https://www.synopsys.com/blogs/software-security/5-types-of-software-licenses-you-need-to-understand/ 2 https://www.construct.net/en/tutorials/design-professional-looking-911 3 https://choosealicense.com/ 4 https://creativecommons.org/faq/#can-i-apply-a-creative-commons-license-to-software 5 https://choosealicense.com/non-software/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 9: Adding Unique Features.

125

• Not everyone speaks or reads English natively. English native speakers are only 16% of all Internet users. I want my game to capture a larger market share than that. • (Quote from “Construct Game Starter Kit Collection” 6 page 269) “By 2040, India will be the largest population on earth — surpassing China!” Our “Hidden Photo” game mechanics is a well-known game genre and suitable for the “International Market and Distribution Channels”, which is typical of any similar “puzzle” genre, therefore, a language selection phase might be “over the top” 7 and a “Splash Logo & Sponsor phase” may be more appropriate. The example below increases the gameplay difficulty by searching for items without showing what an item (i.e., “the medal”) looks like. If a gamer’s English skills are poor or they are not a “native English speaker”, the gamer might attempt to click the “adjustable dumbbell weights” in the center of the picture — mistaking “medal” for “metal”. Here are some interesting facts8 about the Internet and who your “real target audience” is. Hint: Some game distributors will reject games with any displayed text. They want simple symbols with a “globally understood meaning”. NEVER put “graphical text” (i.e.: image fonts) inside your buttons unless you are planning to translate every graphics button into every gamer’s native language. ALWAYS use just “universally understood symbols” 9 .

Poor English Skills: Searching for a “metal” 6 https://leanpub.com/b/cgskc 7 https://www.merriam-webster.com/dictionary/over-the-top 8 http://www.internetworldstats.com/stats.htm 9 https://uxplanet.org/25-icons-with-universal-meaning-3ac48d22c686

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 9: Adding Unique Features.

126

However, a gamer’s language does influence where the “Heads Up Display” should be placed.

How Languages Got Their Directionality by Steph Koyfman April 28, 2021 … The prevailing theory is that “Directionality” was a mechanical consequence of the way languages were written. For instance, East Asian languages, which are often written top to bottom, were once written on scrolls. It would be easier for someone to write top to bottom with one hand holding the paper. It also apparently affects more than just the way you’re accustomed to reading text on a page. A group of researchers found that the “Directionality” of a language can affect the way people represent time spatially a . That makes sense when you consider that training your eye and hand movements in a certain direction also creates deep associations with the way chronological order works visually, or with the way you organize information generally. … Believe it or not, English came pretty close to being a right-to-left language. Back in the day, Old English was written in the runic alphabet, a writing system that ran right to left in its earliest iterations. Eventually, though, the Latin alphabet replaced runes, reversing the directionality.

Right-To-Left Languages The two most well-known right-to-left languages are Arabic and Hebrew, which share a common linguistic ancestor in the Aramaic alphabet. Persian, Sindhi, and Urdu all use adapted forms of the Arabic alphabet. Azeri, Kurdish, Azerbaijani, Rohingya, Fula, N’ko, Syriac, and Maldivian are also right-to-left languages.

Top-To-Bottom Languages Most of the world’s top to bottom languages are found in Asia. These include Mongolian, Chinese, certain Japanese dialects, and a couple of Korean dialects, though some are written vertically from left to right, and some are written vertically from right to left. Chinese, Korean, and Japanese are also often written horizontally, too, from left to right. —————————————————–

Content languages market position report. Review this chartb of the website languages on the Internet as of 14 DEC 2022. By tailoring your game to these top 13 languages, you increase the pool of possible gamers to over 34+% beyond the 58.7% English users. That is a total Internet market share of 93+%! • The 13 languages your game should have for users are (in order): English (58.7%);

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

127

Lesson 9: Adding Unique Features.

Russian (5.3%); Spanish (4.4%); French (3.7%); German (3.7%); Japanese (3.0%); Turkish (2.8%); Persian / Arabic (the 6th most spoken language globally)c (2.3%); Simplified Chinese (1.6% of the websites, but has the most users internationally and 14+% of the global population); Italian (1.6%); Portuguese (1.5%); Vietnamese (1.4%); Dutch, Flemish (1.2%); and Polish (1.1%) for a total market pool of 94.1% of Internet users. (view the complete list hered ) • “English accounts for 55% of all online content today yet less than 20 years ago it was more than 80%.” (read more heree ).

Compare Who uses the Internet as compared to their language.

Users (in millions) — April 2019) a https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3322406/ b https://w3techs.com/technologies/history_overview/content_language/ms/y c https://autolingual.com/arabic-vs-persian/ d https://w3techs.com/technologies/overview/content_language e https://www.english.com/blog/english-language-internet/

Exercise: Review this visual comparison10 of users on the Internet to their native language. Exercise: How to use “Multi-languages using JSON & Dictionary” 11 . Exercise: How to “Support Multiple Languages” 12 in your games. Exercise: Review the Polyglot for translations13 of basic game elements. 10 https://www.visualcapitalist.com/the-most-used-languages-on-the-internet/ 11 https://www.construct.net/en/tutorials/multilanguage-projects-using-2855 12 https://www.construct.net/en/tutorials/supporting-multiple-languages-272 13 https://drive.google.com/open?id=17f0dQawb-s_Fd7DHgmVvJoEGDMH_yoSd8EYigrb0zmM&authuser=0

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 9: Adding Unique Features.

Sample JSON Language file courtesy of Viridino Studios

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

128

129

Lesson 9: Adding Unique Features.

20.4 Main Menu as a “Picture Gallery”?

Sample Main Menu

Besides the typical “Main Menu” options — such as “Play Game”, “Credits”, “More Games like this”, “Share”, “Game Settings”, “Instructions”, “Web Masters”, “License”, … ad nauseam14 . — you might consider displaying a game gallery. This game gallery launches similar game mechanic versions all at the same “starting Level” or perhaps a currently featured game and recent past games.

14 https://www.merriam-webster.com/dictionary/ad%20nauseam

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

130

Lesson 9: Adding Unique Features.

20.5 “Levels & Campaigns” Layout From Lesson 12: “U.N.C.L.E. Agents” 15 and “Interpol Contractor”

Campaign Menu Example

We want our gamers to play our product multiple times. One way to encourage this, which we learned earlier, is to create a series of more difficult challenges (aka “Levels” and “Campaigns”). Another way is to develop an RPG storyline that draws the gamer into a variety of “Campaign Missions”. Exercise: Review the “The Man from U.N.C.L.E.” film plot16 as an example of a series of adventure missions.

A 3D action game, based on the film titled “Mission: Berlin”, was released on iOS and Android. It featured sneaking, shooting, and getting in and out of drivable vehicles in the style of open-world games. The player could choose to play as either “Solo” or “Kuryakin”. There was also a Multi-Player death match. As of December 2018, the game has been removed from both marketplaces. (See this Construct3 example17 for car chases.) 15 https://en.wikipedia.org/wiki/The_Man_from_U.N.C.L.E. 16 https://en.wikipedia.org/wiki/The_Man_from_U.N.C.L.E._(film) 17 https://editor.construct.net/#open=vehicle-switching

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 9: Adding Unique Features.

131

20.6 “Create Your Own Adventures” (CYOA) Allowing Uploaded Images and Gamer Customizations?

Exercise: Experiment with “Find My Flaws” 18 and learn how “Game Options” lets gamers customize their gameplay.

You might consider having gamers load their own background pictures. Since they are playing on their local workstations, they may have pictures they might want to use in this game genre. This will take careful consideration on our part as game designers for this “CYO” Adventure feature: • Gamers could exchange their “scored points”, “earned tokens”, or simple “pay” for this privileged feature. • Gamers could “upload” any picture size from their local machine. Don’t forget to re-size their submission for the gaming area. • Allow sharing of this CYO version? My preference is a “locked, personal and noncommercial” game edition. • OR, allow gamers to upload their pictures to your server to manage their CYO shared edition(s) for them or let them save their game(s) as local data only! (See “Saving & Loading” below.) From my experience, I advise you to keep your server for other things. You don’t know who is uploading and what their pictures contain. You might be arrested for their “deviant tastes”! Determine what gamers have access to, and what they are allowed to modify. I let gamers: • • • • •

choose their new background image, set their preferred deployment margins. set their preferred hidden symbol(s), and set how many symbols to insert. You might also consider letting them create their “background story” too.

18 https://renown-games.com/sg-games/find-my-flaws/index.html

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 9: Adding Unique Features.

132

Step #1: Create a “Game Options” layout with its associated “Event Sheet”. Step #2: Insert four text objects to use as input labels. Step #3: Insert a “File Chooser” (see manual for details)19 to accept any Single “image/ * “. I also place another text object just to show the image’s location (URL or URI). Step #4: Insert a “List Control” (see manual for details)20 and enter the “hidden item” sprite animation frames. I chose the “Drop-down list” but you might like to experiment with the “list box” for your design. I did not allow “Multi-select”. I did select “Auto font size” as “Yes”. Step #5: Insert a “SliderBar” 21 . I place small text objects above the slider bar to show the minimum and maximum values.

Game Option Event Sheet from “Cooty Queen”

I chose to use “Grouped Events”; this allows me to “activate or deactivate” event blocks for various granted privileges. You can experiment with the “Game Options Layout” in the “Cooty Queen” game in Lesson 12 Capstone. 19 https://www.construct.net/en/make-games/manuals/construct-3/plugin-reference/file-chooser 20 https://www.construct.net/en/make-games/manuals/construct-3/plugin-reference/list 21 https://www.construct.net/en/make-games/manuals/construct-3/plugin-reference/slider-bar

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 9: Adding Unique Features.

133

> Customized Margins Earlier in Lesson 7, I mentioned how “Hidden Objects” were concentrated between the internal margins. This is an import “Game Settings Options” for gamers when they “Create Your Own” (CYO) adventures. What we’ll do — in the “Cooty Queen” game in Lesson 12 Capstone — is create some global variables for customized margins. I’m calling mine: “top, bottom, left”, and “right” — for the width using random(left,right), and then again for height using random(top,bottom).

20.7 Touch & Mouse Controls

Using Touch or Mouse commands

Quoted from “Construct3 Official Tutorial” 22 “Often you’ll develop a game with a keyboard and a mouse, but these days many devices have a touchscreen with neither a mouse nor a keyboard. If your game can only be controlled by mouse and/or keyboard, users on these devices will be unable to play your game!” “However, it’s easy to have on-screen touch controls — and there’s a clever and simple trick to detect whether the user has a touchscreen device, too.” “First of all, if you’re designing a game specifically for touchscreen devices, or your game only uses mouse clicks, use the “Touch object” 23 . Its “Use mouse“ input property is enabled by default. This means that mouse clicks fire touch events like “On touch start“ and “Is in touch”. Obviously, you can only simulate single-touch input by mouse clicks — holding the left button down represents touching, and releasing it represents not touching. So a click-anddrag represents a swipe by touch.” 22 https://www.construct.net/en/tutorials/touch-controls-detecting-13 23 https://www.construct.net/en/make-games/manuals/construct-3/plugin-reference/touch

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 9: Adding Unique Features.

134

“That easily allows for both mouse and touch input, which for simple games is enough on its own. It also helps you test your game on a desktop system using your mouse as single-touch input.”

Exercise: Lean how to create “On Screen Touch and Alternate Controls” 24 .

“Dynamically Detecting Gamer Inputs” … “On the “title” (ed.: aka Splash) screen, have a message like “Press anything to continue”. Then, if Keyboard’s “On any key“ pressed or Mouse’s “On any click“ event fires on the “title” screen, you know the user is on a desktop. If Touch’s “On any touch end“ event fires on the “title” screen, you know the user is on a touchscreen device. You can then set a global variable indicating if the user is on a touchscreen and proceed to the first level. If the global variable is set, show the on-screen touch controls; otherwise, make them invisible. You’ll automatically be using the right control system, and the user did not have to do anything!” (Quoted from Official Construct3 Tutorial)

20.8 Game Count-down Timers I mentioned this earlier as a third method to end a gaming session. The concept is not too difficult. We need to configure our best guess at how much time a gamer should have — with any luck — to clear the game area of hidden items. I believe game timers should never be in any games of chance or luck; they are better suited for games of skill. Anyway, if the timer is too short, no one could ever win the game, and then on the other hand, if the timer is set too long, this condition never occurs and is merely an academic study to see if we could create it — a worthless activity and wasted time spent! So let’s set our count-down timer to 60 seconds. This is based on my 57 Flash games over 7 years with a “mean time game session” of approximately 1:37 minutes or 97 seconds for a simple “Action Arcade” genre. Gamers would typically play 2 to 5 game sessions, then leave. Hint: You might consider putting “activity monitoring” into your games to collect similar information that I have recorded above. 24 https://www.construct.net/en/tutorials/touch-controls-detecting-13

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 9: Adding Unique Features.

135

All of these following examples use text feedback. You might like to use a graphics “progression bar” or maybe a “Kitchen Egg Timer” 25 to represent game time. I’ve done some research, found (and filtered), and inserted my evaluation for you. These four tutorials, that I highly recommend, already tell us how to create a game timer: • “Countdown timer: Creating one” 26 — My Rating: 5 stars. — has the shortest content to read and matches the format of this book, but no download file. • “Timers” 27 — My Rating: 5 stars. — has the best explanations about several different game timers using the fewest events. It requires a lot of tweaking to integrate with our “Hidden Objects” Game Mechanics but it does have a download file (.capx).

“Single Event for Simple DELTA Timer”

• “Timer with a Digital Clock Type Display” (ie: 1:09)28 — My Rating: 5 stars. — if the visual format is important then you need to see this. It’s a 10-second read with only 3 events. It follows the same concept as the tutorials above.

“Count-down Digital Timer Displayed” 25 https://amzn.to/3Y12GiH 26 https://www.construct.net/en/tutorials/countdown-timer-creating-one-675 27 https://www.construct.net/en/tutorials/timers-278 28 https://www.construct.net/en/tutorials/timer-normal-clock-type-359

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

136

Lesson 9: Adding Unique Features.

You might consider substituting “zeropad(Timer,2)“ 29 for the “red arrow” illustrated above or perhaps use “wallclocktime“ 30 .

“Alternate zeropad Digital Timer” (ie: 1:09)

• “Time counter > Page 3” 31 — My Rating: 5 stars. — has the most to read, is very informative, matches my book’s format, and has a download file. This author is very detailed and uses the most events to create and format their displayed time. It’s overkill for such a simple feature. The author follows the same logic as the last three tutorials above.

> Visual Timer Bar https://www.construct.net/en/tutorials/visual-timer-bar-games-410

“When to Reset Game Timer.”

I’ve heavily modified this tutorial to fit with our “Hidden Object” games. Instead of a “time bar” moving down the layout; mine moves along the “X-axis”. The timer bar gradually slides off the layout toward the right. It continues until its “X origin point” is greater than the layout width at which time it resets back to its original position. The trick is calculating how many pixels to move per second. 29 https://www.construct.net/en/make-games/manuals/construct-3/system-reference/system-expressions# internalH1Link7 30 https://www.construct.net/en/make-games/manuals/construct-3/system-reference/system-expressions# internalH1Link8 31 https://www.construct.net/en/tutorials/time-counter-91/page-3

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 9: Adding Unique Features.

137

Total Distance to Move = “Layout.width” minus “X origin point” “Pixels to Move per second” = “Total Distance to Move” / “Game Time Constraints”

“My TimerBar moves 3.73 pixels per second”

> Kitchen Egg Timers Another visual timer, that I prefer, is an animated “Kitchen Clock-face Timer”. You’ll have a chance to see how this works in Lesson #12.

“Lesson 12: Kitchen Timer Demonstration”

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

138

Lesson 9: Adding Unique Features.

“Kitchen Timer Set Up”

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 9: Adding Unique Features.

“Kitchen Timer Animation Management”

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

139

Lesson 10: Search Lists & Scoring

140

21. Lesson 10: Search Lists & Scoring Too often I find “Hidden Object” — and particularly “Find the Difference” — games without any changes or imagination. Each time I’ve played this genre, the “hidden objects” are always in the same locations and nearly all seem to have a search list of what to find as a substitute for a background story. What kills “Hidden Object” games’ replayability is their static “Search Lists”. Let’s discuss how we could improve “Hidden Object” search lists and meet “replayability” requirements. In Lesson #5, you saw how those “dynamic search lists” worked, but I told you that we’d study them later. Well, now’s that time and you’ll need your “Practice Method #2 file” from Lesson 5 to begin our studies — or download my “ho_c2_MessyDesk.capx” 1 and follow along.

21.1 Method #2 Static Lists

Method #2 managed by only 4 Events 1 https://makingbrowsergames.com/cgc-books/demos/ho/messyDesk/ho_c2_MessyDesk.capx

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

141

Lesson 10: Search Lists & Scoring

Method #2 is used whenever you have a picture with “clutter of things”. It uses an ancient “HTML 3 web technique” known as image maps (click to open)2 . The invisible shapes react to the gamer’s mouse and populate various global variables. These “hot spots” have two variables: 1) the hidden item’s name, and 2) the points earned for their discovery. The “text”, that follows the mouse, is a tool tip feedback — whenever the mouse rolls over or off an item, its name is revealed. This is an manually intensive creation process, and the “search list” is still static. Exercise: Re-play “Messy Room” 3 . Watch how the search list adjusts when items are clicked. Exercise: Download and study “Messy Room” capx 4 .

“Setting Up the General Categories”

• Global Variables — only tallies what the gamer discovers. • Event 2 — These four “hot spot icons” have an instance variable “name” set to their “location”. 2 https://www.image-map.net/ 3 https://makingbrowsergames.com/cgc-books/demos/ho/messyRoom/ 4 https://makingbrowsergames.com/cgc-books/demos/ho/messyRoom/ho_c2_MessyRoom-UnlicensedFinal.capx

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

142

Lesson 10: Search Lists & Scoring

“Responding to Gamer’s Mouse”

• Events 3 to 9 — all follow a similar pattern found in Events 3 and 4. I set the “text feedback”, that follows the mouse, to the item’s assigned name. Then when the gamer clicks, I update their score for a specific room, do some fancy calculations (i.e.: “inverse deduction” or “inductive” logic) for the “search list”, update the feedback in the HUD, and finally destroy the “hot spot” item. You’ll notice this works only because I have a “hard-coded” number of items to find for each room — “9 - totalKidsRoom”. In Lesson 12, the secret sauce in “Alchemist’s ApprenticeTM ” and “Agents from U.N.C.L.E.TM ” removes the “hard-coded” items to find and replaces them with dynamically generated quantities.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 10: Search Lists & Scoring

143

21.2 Restricted Search with Random Deployment

Winx Concert Disaster (Flash) 2009-2015

In the “Winx Concert Disaster” (Flash edition circa 2009-2014), the musical score is a static search list of musical notations randomly deployed in the gameplay area. The gamer can find these “Hidden Items” in any sequence, but they earn more points if the notations are discovered in the correct order. We’re already familiar with random placement, but perhaps not as familiar with how to use this “static” listing. The background story in Quest #1 “Concert Disaster” — The Trix have hidden the Winx’s Concert Music and they must be on Stage in 2 minutes. Can you help the Winx find their hidden musical notes before the pre-show music stops?

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 10: Search Lists & Scoring

144

• Play the transpiled Construct version here5 . • Build your bespoke edition from Lessons 1 to 4 using method #1.

Winx Club Monthly Adventure QuestsTM

Permanently Featured “Concert Disaster”TM

This Flash game was launched FEB 2014 — a month before the Mochi Media closure. It was the last contracted game I created for the Winx Club franchise. But even still in one month, 19 fan sites proved the game’s popularity. Monthly Adventures of Winks — a PBMCube Game Library for Winks Club fan sites. • A new Winx club adventure quest every month. • Vote for your favorite adventure to play next month. • Create, Save, Collect, and Submit your own adventures for everyone to see, read, and play. Editor site-locked to PBMCube.coma ) a https://pbmcube.com/

5 https://makingbrowsergames.com/cgc-books/demos/ho/wcaq/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

145

Lesson 10: Search Lists & Scoring

Concert Disaster Game Set Up

• Event 2 — creates and deploys all the hidden items when the layout starts. The hidden items are scaled down and set to the current animation frame using “gameSymbol”. I insert the current frame ID number and “musical score name” as a reference. I then set the “gameSymbol” to the next sprite frame — yes, this is similar to a “For Next” loop. • Events 3 to 15 — set the musical notations invisible. See how I reveal them in Events 17 to 29 below.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

146

Lesson 10: Search Lists & Scoring

Concert Disaster Game Play Phase

• Events 17 to 29 (below) — darken the musical notations in the search list when a gamer finds them. This is a simplistic management process that shuns complicated logic. “Every Tick” monitors which item was clicked and makes the “darker version” visible in the search list. I’m still having problems matching the text perfectly, so I substituted a “4/4” sprite as a text replacement. • Event 30 — shrinks the hidden item again. • Event 31 — grows the hidden item. • Event 32 — adjusts the items discovered, adds the points to the gamer’s score, assigns the sprite animation frame number to what was clicked, updates the HUD score, and finally removes the hidden item from the game area.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

147

Lesson 10: Search Lists & Scoring

Events 17 to 29 Search List Reveal

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 10: Search Lists & Scoring

148

Events 33 to 39 — return to more familiar settings that we’ve learned earlier. The “Game Timer” has a “hard-coded” maximum limit of 3 minutes.

Concert Disaster Game Timers & Conclusion

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 10: Search Lists & Scoring

149

21.3 Dynamic Search Lists & Quantities Now for something a little more advanced for each game session — using a dynamic search list of what to find and dynamically generated quantities.

> “Alchemist’s ApprenticeTM ” Example If you understood what I did in the “Messy Room” example above, the “Alchemist’s ApprenticeTM ” is merely the next step. I replaced those “hard-coded” item quantities with a dynamically generated quantity — “floor(random(1,6))”. The background story is an avatar is sent on a mission to collect various plants, moss, fungi, and seeds. The avatar has a uniquely generated “search list” of three items to find and their quantity. This list and its quantity dynamically change for each game! The gamer’s avatar can collect anything without penalty, but only those specifically requested items earn bonus points. Of course, the alchemist is grateful for any additional foliage collected. He also awards extra bonus points for “over collection” — finding more required items than he requested. Exercise: Play “The Alchemist’s ApprenticeTM In-Game Module” 6 (IGM). It is an integrated part of the “Legends of Renown Deeds” RPG7 .

This “In-Game Module” (IGM) is currently licensed together with its parent RPG. It is not currently available as a stand-alone game, but you’ve learned enough information to replicate this IGM with some careful consideration.

6 https://renown-games.com/sg-games/mages-of-renown/alchemist/ 7 https://legends-of-renown-deeds.com/ci-lord-caas-demo/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 10: Search Lists & Scoring

150

> “Agents From U.N.C.L.E.TM ” Example This game uses the same dynamically generated search list as the “Alchemist’s ApprenticeTM ” above with some additional features. This game (with source code) is available in the Construct Asset Store8 . You can play a licensed demonstration at Renown Games9 or the unlicensed version in the Scirra Arcade.

Dynamic Campaigns, Thrush Units, & Quantities

This game is part of the “Adventurers of RenownTM ” Gaming Series and licensed as a stand-alone game in the Construct Asset Store10 . It is not available as a free student download, but you’ve learned enough information to replicate this IGM with some careful consideration.

8 https://www.construct.net/en/game-assets/games/domain-licenses/agents-u-n-c-l-e-3152 9 https://renown-games.com/sg-games/uncle/c2/ 10 https://www.construct.net/en/game-assets/games/domain-licenses/agents-u-n-c-l-e-3152

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 10: Search Lists & Scoring

151

21.4 Saving & Loading Game Sessions One of the unspoken “Replayability Rules” is letting players preserve their game progress. This is an important feature for lengthy games. Gamers might want to stop their game session and resume at a later time. If we store their game sessions on our servers (see this .capx example11 ), then we could be saving records that are never revisited! However, the gamer can resume their session from any device. Our best option is to store their game sessions locally using the “System > Save and Load” action with the disadvantage that a gamer must use the same browser and device.

Using Keyboard to Save Game Sessions

Quote from “How to Make Save Games” 12 — “Note however “saved games” are associated with the specific browser. For example, Firefox and Chrome will store “saved games” separately; if a player saves a game while using Chrome, then switches to Firefox, they will not be able to load that “saved game”.

Exercise: Read “How to Make Save Games” 13 .

11 https://construct-static.com/tutorials/downloads/24126/highscore.capx 12 https://www.construct.net/en/tutorials/savegames-11 13 https://www.construct.net/en/tutorials/savegames-11

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Starting Your Own Game Studio!

Steve Gose Game Studio

Lesson 11: One “GM” to Rule them all …

153

22. Lesson 11: One “GM” to Rule them all … Using this one simple Game Mechanics (GM), you could build these several different games, in the next chapter, by just exchanging the Artwork Assets. Imagine what you could create if you integrated several different types of game genres1 . Games are a composite of several attributes, as you’ve already seen in the Game Design SystemTM . Changing the Artwork gives you a visually different game which is what you need for the beginning of a proper Copyright. There are a couple of other attributes we have not covered in this workshop in any detail: • Game Mode: (Quote from “Construct Game Starter Kit Collection” 2 page 123) “One of the most common examples of a game mode is the single player versus multi-player choice in online games. Multi-Player games can further be subdivided into “cooperative” or “competitive” play. Changing modes during a game increases the difficulty and provides additional challenges, or as a reward for players’ successful actions. For example, power-ups are temporary gaming modes that change only one or more game rules such as pellets in PacMan.…” Using the same Game Mechanics rules, logic, and data but changing its “Mode” also gives a new game. • Game Perspective: how a gamer sees the game as a “first-person” view (through the eyes of their avatar; see this 3D example here3 ), top-down (aka “Bird’s eye”) view, 3rd person (aka “over-the-shoulder”) view. This third-person isometric view is a popular perspective in “platform” games, “side-scrolling”, “endless runner”, and “RPG” game genres. I believe the reason why many “Hidden Object” games are so similar is that the developer didn’t truly understand what the Game Mechanics was trying to achieve. In its simplest terms for any “Seek & Find” game, the gamer is searching for obscured items. They scour the game area for clues. When an item is discovered and clicked, points are earned, the object is removed, and their search continues. Remember this as you read the following Game variations. 1 https://leanpub.com/b/cgskc 2 https://leanpub.com/b/cgskc 3 https://editor.construct.net/#open=template-first-person-shooter

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 12 Capstone: Exchanging Artwork

154

23. Lesson 12 Capstone: Exchanging Artwork Building a “Gaming Series” from just Artwork Themes!

D.R.Y. Speed Limit — 5 GPH (Games Per Hour)! Now, take this simple example to the next level of complexity! Exchange all the “Hidden Objects” and the background image but keep your modified event blocks D.R.Y. Voila! a new game … how long did that take? You’re just uploading new artwork! You merely changed the new artwork to the same file names you already had in this project. YEAP! overwriting the old art with completely new graphic content. Let’s pretend it took 55 minutes to find 5 new theme backgrounds and symbols, and then you create 5 different games in the next 5 minutes. That’s the power the Game Design SystemTM offers you.

A quote from Terry Paton1 — “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 2 , — If you want to get better at something, then try to do it like those who’ve already 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 as compared to producing something which was “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.” This is a summary of 9 games that use the “Hidden Object” Game Mechanics with visually new graphics. You simply exchange the old Artwork and tweak the Game Mechanics rules; then within the hour, you should have a new game prototype for production! If you kept the new Artwork file names the same as those already used in your prototype, and just loaded the “new graphics” with those same file names. 1 https://www.linkedin.com/in/terrypaton/?originalSubdomain=au 2 http://en.wikipedia.org/wiki/Art_forgery

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 12 Capstone: Exchanging Artwork

155

Your development time is reduced to 10 or 15 minutes per game! These following games would take nearly 105 minutes! Background stories and settings breathe life into “Hidden Objects” games. It gives the gamer a reason for their search. In the following games, all I did was “re-imagine” what a gamer’s motivation would be for searching, and what the environment represents. I will not give any instructions to build these following games because you’ve already walked through all the steps to do that. The purpose of this lesson is to take what you’ve learned already and apply it to a new environmental setting and invent your own bespoke game(s) for publication.

23.1 Japanese Shinro Puzzles Abstract. A Shinro puzzle is a type of deductive reasoning puzzle that originated in Japanese periodicals. To solve the puzzle, one must locate twelve hidden stones on an 8x8 grid using only clues in the form of stone counts per row and column, and arrows placed in the grid that point to some of the hidden stones. Construction of these puzzles by hand is tedious. We explore the use of a simple genetic algorithm that automates the construction of Shinro puzzles with desirable qualities which improve their entertainment value. Exercise: Review the “David Oranchak technical report” 3 from Penn State College of Information Sciences & Technology. 3 https://citeseerx.ist.psu.edu/pdf/1a22eabdea45d6110d25384c0fea0db03d45a7eb

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 12 Capstone: Exchanging Artwork

156

23.2 Irezumi vs. Horimono Tattoos

Method #1: Lessons 1 to 4 - Find My Flaws™ Gaming Series

Japanese tattooing is often called “Irezumi” in the west but often has negative connotations in Japan. Traditionally, it was done to mark criminals. The term is used in English to refer to a distinctive style of Japanese tattooing. Although “Irezumi” is a Japanese term (meaning “to insert ink”), it is not the correct name for what we now understand as traditional Japanese tattooing. The correct term for the artistic type of tattooing, so famous throughout the west, is “Horimono” 4 (the carving or engraving of images — aka chōkoku “sculpture”) is usually used to describe full-body tattoos done in the traditional style; and in some cases, these tattoos can cover the entire body as one coherent canvas — including the arms and legs! In contrast, Irezumi follows the western style of tattooing (aka “waypoint”, or “one point”) which consists of a single design, separate from the skin surrounding it. Although it is also used as a blanket term to describe many tattoo styles originating in Japan, including tattooing traditions from both the Ainu people and the Ryukyuan Kingdom. (… continue reading and learning 5 ? ) Explore this “Irezumi and Horimono” 6 tattoos website — these are wonderful background images for “Hidden Objects” games. I’ve used these games for various tattoo 4 https://en.wikipedia.org/wiki/Horimono 5 https://www.lucaortis.com/traditional-japanese-tattoos-irezumi/ 6 https://www.tattoodo.com/explore

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 12 Capstone: Exchanging Artwork

artist websites to advertise their skills and engage potential customers. • Build your bespoke editions using method #1 from Lessons 1 to 4. • Play these examples: • Lyme Disease Infestation here7 — from Lessons #1 to #6 and #8. • Find My Flaws I (former Flash AS3)8 — transpiled to Construct edition. • Find My Flaws II (former Flash AS3)9 — The “Black Irish” transpiled to Construct edition. • Find My Flaws III10 — “The Dragon Master” Construct edition.

“Black Irish” 11 — the term refers to a person of Irish descent whose hair and eyes are dark colored and whose lineage is from the Spanish Armada, which sailed in the mid-15th century. The term is used among the Irish and sometimes confuses others since it doesn’t refer to dark skin color.

7 https://renown-games.com/sg-games/fmf-lyme-disease/ 8 https://renown-games.com/sg-games/find-my-flaws/index.html 9 https://renown-games.com/sg-games/fmf-black-Irish/ 10 https://renown-games.com/sg-games/fmf-dragon-master/ 11 https://www.theirishjewelrycompany.com/blog/post/the-origins-of-the-term-%E2%80%98black-irish

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

157

Lesson 12 Capstone: Exchanging Artwork

158

23.3 Cooty Queen!

Cooty Queen — a childish game of exploration!

• Play the game — “She’s got Cooties! 12 . • Build your bespoke edition from Lessons 1 to 4 using method #1. The “Cooty Queen” game was derived from an earlier game — circa © 2002-2018, Stephen Gose — of the “Computer Security Technician”. (below) It replaces the computer “mother boards” with beautiful life-like models from the “DAZ3D Manga Collections” 13 . “Cooty Queen” keeps the same Game Mechanics (GM) and gameplay, but now uses a different artwork setting and “childish” theme.

> Game Option Settings! Although this is a rather “childish theme”, it nonetheless showcases method #1 with configurable Game Options and settings. It exchanges background images14 , customized margins, single symbol selection, and quantity of items15 to find. You can find the many beautiful life-like models — either male, female, or monstrous creatures — from DAZ3D.com16 .

12 https://javascript-games.com/cootyQueen/ 13 https://www.daz3d.com/catalogsearch/result/?mature=true&q=manga 14 https://www.construct.net/en/construct-2/manuals/construct-2/plugin-reference/file-chooser 15 https://www.construct.net/en/make-games/manuals/construct-3/plugin-reference/slider-bar 16 https://daz3d.com

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 12 Capstone: Exchanging Artwork

159

23.4 “It takes a Thief” — RPG Integration!

Using Method #2: Lessons 5 & 6

• Play this single Campaign version here17 from “U.N.C.L.E. Agents” (below). • Build your bespoke edition from Lessons 5, 6, & 7 using method #2. • This combines “Hidden Object” Game Mechanics with RPG Game Mechanics! Background story: You’re a professional field agent for the “United Network Command for Law Enforcement” 18 (U.N.C.L.E.). Your mission is to retrieve evidence of Thrush’s newest activities. This is only one of several campaign levels. “It takes a Thief” picture by GitHub aeriTheLion19

17 https://makingbrowsergames.com/cgc-books/demos/ho/itat/ 18 https://en.wikipedia.org/wiki/U.N.C.L.E. 19 https://github.com/aeriTheLion/Hidden-Object-Game

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 12 Capstone: Exchanging Artwork

160

23.5 Computer Security Technician! Find computer Malware in hardware & software.

2002-2018 Computer Classes’ edition

• Play this updated Construct version20 in the Scirra Arcade. • Build your bespoke edition from Lessons 1 to 4 using method #1. I’ve used this game hundreds of times in my “Introduction to Computer Hardware and Operating Systems” classes. Students appreciated this fun introduced into their lessons. The second-semester class used an advanced version of this game in which they selected the correct “countermeasure” for each discovered item. The “Cooty Queen” game above derived from this early edition — circa © 20022018, Stephen Gose — and replaced the computer “mother boards” with beautiful background models from DAZ3D Manga Collections21 — and you thought you’d never use that “old motherboard” again! Right? The “hidden symbols” represent the “7 Common Types of Malware” 22 found in software and hardware components. The search list is dynamically generated.

20 https://www.construct.net/en/free-online-games/computer-security-technician-47663/play 21 https://www.daz3d.com/catalogsearch/result/?mature=true&q=manga 22 https://www.titanfile.com/blog/types-of-computer-malware/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 12 Capstone: Exchanging Artwork

161

23.6 Interpol Agent

International Flights from “flightaware.com”

• Play the original JavaScript game concept23 . • Download the original JavaScript instruction guide24 . • Play the completely redesigned Construct version25 . Background story: You’re a contracted field agent for “Interpol” — The International Criminal Police Organization” 26 . Your mission is to chase down a world-famous spy and retrieve any evidence of International criminal activities in various major cities worldwide. This is only one of several campaign levels from “Agents from U.N.C.L.E.TM ” Cities backgrounds were created with “City Constructor” 27 Note: INTERPOL does not have its own law enforcement agents. INTERPOL provides investigative support and secure communications between law enforcement authorities and their counterparts in 195 INTERPOL member countries, as well as administering their access to INTERPOL databases, resources, and services.

23 https://renown-games.com/sg-games/interpol/play.html 24 https://renown-games.com/sg-games/interpol/catch-a-spy.txt 25 https://renown-games.com/sg-games/interpol/index.html 26 https://www.interpol.int/en 27 https://www.gamedevmarket.net/asset/city-constructor/?ally=GVgAVso

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 12 Capstone: Exchanging Artwork

162

23.7 3D Tomb Raider — a Hidden Objects RPG!

Using Method #1 (Lessons 1 to 4) & DAZ3D Model

• Study these C3 examples: 1) “First Person Shooter” 28 ; 2) Camera Perspective29 ; 3) 3D Castle Maze30 ; and 4) 8-sided Billboard31 . • Play the heavily modified Construct version32 using DAZ3D Egyptian Models. • Build your bespoke edition from Lessons 5 and 6 using method #2 and images from DAZ3D Egyptian Artwork Collection33 . Background story: You’re a professor of archaeology in search of rare items, spores, molds, fungi, and hieroglyphs34 . You’ve just uncovered an unknown “Egyptian ruins” 35 that might prove ancient alien contact. This is a twist on the “cluttered background images”. This RPG takes the gamer into a maze to search for the various “Hidden Objects” using a 3D “First Person” perspective. More background information about Egyptian hieroglyphs36

28 https://editor.construct.net/#open=template-first-person-shooter 29 https://editor.construct.net/#open=toggle-camera-perspective 30 https://editor.construct.net/#open=3d-castle-maze 31 https://editor.construct.net/#open=8-sided-billboard 32 https://renown-games.com/sg-games/AR-TombRaider/index.html 33 https://www.daz3d.com/catalogsearch/result/?pp=40&q=egyptian&mature=true&s=score&p=1&guid= 34 https://www.daz3d.com/egyptian-symbols--ancient-hieroglyphs 35 https://www.daz3d.com/egyptian-elements 36 https://en.wikipedia.org/wiki/Egyptian_hieroglyphs

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Lesson 12 Capstone: Exchanging Artwork

163

23.8 Lyme Disease • Play my finalized game version37 here. This game came from Lessons #1 to #4, and Lesson #8. • What might your Finalized bespoke edition from Lessons 1 to 4 look like? Background story: You’re a professional photographer shooting a catalog for an irezumi tattoo website. You’ve selected a wonderful forest setting, but you’ve discovered a “Lyme Disease” infestation! You need to quickly save your model from their bites.

23.9 The Alchemist’s ApprenticeTM — a Hidden Objects RPG! • Play an example Campaign version here38 . • Search Lists are generated dynamically, and scored based on the search list. • Build your bespoke edition from Lessons 5 and 6 using method #1 or #2. Instead of the bland RPG Magic character generation, why not let gamers create their magic spells from “hidden herbs”? The gamer has an “empty potions vial” and must discover just the right herb combinations for a specific magical potion. Their avatar is sent on quests to collect “herbs” from various “Terrain” and concoct potions for various skills, talents, characteristics (Strength, IQ, Dexterity, etc.), magical spells, and weapon enhancements. If you use a timer and when it expires, the gamer leaves the gaming area, and those items they’ve collected go into their “avatar’s apothecary inventory”. Now their avatar can go about mixing various potions as seen in this similar Construct game39 . Sounds difficult? NAH, it’s easy! Return to Lessons 4,5,6, 7, or 8 and substitute the “hidden items” for several types of Microsoft Office “plant-like wingdings”. Then instead of using a “single-framed” sprite, insert “multiple frames” (Lesson 7). Then randomly select and deploy a variety of herbs, blossoms, and seeds. The “Alchemist’s ApprenticeTM ” is an “In-Game Module” (IGM) to this RPG — Legends of Renown Deeds™40 .

37 https://renown-games.com/sg-games/fmf-lyme-disease/ 38 https://renown-games.com/sg-games/mages-of-renown/alchemist/ 39 https://editor.construct.net/#open=alchemist 40 https://legends-of-renown-deeds.com/ci-lord-caas-demo/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

164

Lesson 12 Capstone: Exchanging Artwork

Microsoft Office to the Rescue! Look in your Artwork Asset directory for “Cooties Sets.doc”. It has a variety of “WingDings” that are easily converted into images and very challenging to find in “Japanese irezumi tattoos”.

Plant WingDings!”

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

165

Lesson 12 Capstone: Exchanging Artwork

23.10 U.N.C.L.E. Agents — a “Hidden Objects” RPG!

Main Menu”

• Play an example Campaign version here41 . • Search Lists are generated dynamically, and scored based on the search list. • Build your bespoke edition from Lessons 5 and 6 using method #1 or #2.

Cities backgrounds were created with “City Constructor” 42

41 https://renown-games.com/sg-games/uncle/ 42 https://www.gamedevmarket.net/asset/city-constructor/?ally=GVgAVso

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

What’s next? “How to publish a game on the web??” Quoted from the Unity forum Hello, I have a little problem with the publishing thing. I’ve created a little “game”, which has only one scene and exported it as a web game. OK, now I have an HTML and a Unity 3d files. But, the problem is, I don’t know anything about creating websites, or uploading files to servers. I know that there are several questions about this, but I just can’t understand what to do. I would really appreciate if someone could explain to me how to publish my “game” on the web step by step. By the way, I’ve created a WIX site, but I’m not sure if I can put a Unity 3d game in there. Read answers herea a https://answers.unity.com/questions/59535/how-to-publish-a-game-on-the-web.html

Game Distribution & Marketing

167

24. Game Distribution & Marketing I forbid my students from using WIX when attempting to “showcase” their Web Developer or Gaming Programming Skills in their portfolios. It’s the proverbial … “shooting oneself in the foot” and sabotaging their skills!

Fortunately for us, we’re using Construct! Such deployment problems, mentioned above from the Unity forum, don’t interfere with our marketing deployment! Exercise: READ the Advice from the Construct Founder: “Publishing to the Web” 1 .

24.1 Introduction: 8-Step Deployment Method. 1. Research game publishers. Learn who they are, what games they favor, and who their target audience is. Be careful when analyzing “Return On Investments” (ROI). This article2 gives a proper perspective. What you’re looking for is a “Payment Processor” through whom you can “Directly Distribute” your games while they handle all the mundane sales administration. Here’s a brief list of activities they should provide: • Hosting your game(s) and providing download links; - Offer various payment methods (credit card processing, Paypal, Apple pay, Stripes, google checkout, Amazon Payments, etc.) - Handle collection and payment management for your taxes (e.g.: VAT!); - Customize your product’s web page(s) for you so it matches the look of your website; - Offer you an option to create discount codes and gift codes easily for seasonal promotions or sales promotions; - Handle refunds, charge-backs, and fraud detection — it’s always nice to 1 https://www.construct.net/en/tutorials/publishing-web-10 2 https://medium.com/@sm_app_intel/a-bunch-of-average-app-revenue-data-and-why-you-should-ignore-it2bea283d37fc

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Game Distribution & Marketing

168

have someone “watching your six (6)!”;3 - Offer “split pay features” 4 — those revenues automatically split between all “team creation members” and “Affiliate Channels”; - Offer “current statistics reporting” of your sales; - … and any other unique requirements you might need beyond those found in Google Analytics.

FGL.com We are looking for high quality, high retaining games. Games that people are willing to play for 30+ days. We have had the most success with Hidden Object, Match 3, MahJong, Bingo, and Idle casual games, but anything that is high quality + high retaining we would be interested in!

2. Contact those publishers, and discover their submission policies and requirements for Software Development Kit (SDK) usage. Read carefully about surrendering your rights. Learn what game genre piques their interest. However, be careful not to lock yourself in and become entirely dependent on a single company’ SDK for your entire marketing strategy. I learned my lesson from the MochiMedia collapse. While there’s no doubt you should integrate a tracking SDK to register conversions, I recommend that you keep tracking and usage analytics technically distinct from your advertising collection management, to remain flexible and be able to switch partners if you are not satisfied with the results. 3. Create your game … (duh!) You can’t sell “blue-sky” ideas. 4. Create a domain name and game website.5 (NOTE: Some ISPs include a 1-year FREE domain name6 with their web hosting packages.) Demonstrate your game prototype(s) to their buyers in a protected section of your website — as an example click here.7 5. Refine your game mechanics. Get strangers (non-developers with their “gut reactions”)8 and other indie developers to play it. An excellent place to find fellow developers is in the Forum. They’ll find problems you may have overlooked. Naturally, you’ll want to fix those errors they find. 6. Deploy the latest obfuscated/compacted game version on your public website for “White Label” sales9 and Game Distributors. 3 https://www.operationmilitarykids.org/watch-your-six-explained/ 4 https://www.google.com/search?q=split+pay+features&oq=split+pay+features&aqs=chrome..69i57j0i22i30j0i390l5. 448j0j7&sourceid=chrome&ie=UTF-8 5 http://gose-internet-services.net/index.html 6 http://gose-internet-services.net/index.html 7 https://makingbrowsergames.com/cgc-books/ch2/index.html 8 https://www.newgrounds.com/games/under_judgment 9 https://codecanyon.net/search/games?sort=price-desc#content

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Game Distribution & Marketing

169

7. Wait … wait … read their feedback and if necessary return to step #1. Otherwise, continue to step #8. 8. Negotiate a contract wisely. Your new publisher might require the use of their Software Development Kit (SDK). 9. Start your next game project(s). … return to Step #1

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

170

Game Distribution & Marketing

24.2 Selling Directly — The Advantages Insights from Rob Fearon: Sell Direct, Please10 Insights from Cliff Harris: How To Sell Your Games Online Without Using An App Store!11

Digital Distribution via a Payment Processors (Listed alphabetically)

Processor

Price

VAT

Split

( 1 ) BMT Micro12

9.5% (1.25$ Minimum Fee)13 8.9% (0.75$ Minimum Fee)16 5% (+ 0.25$ per transaction)19 ∼10%22

Yes

Yes

Yes

Yes

Yes

—

Payments Options CC, PayPal, Amazon14 CC, PayPal, Amazon17 CC, PayPal20

Yes

—

PayPal, Amazon23

0 – 100% (paywhat-you-want style)25 2.9% – 3.9% (+ 0.30$ per transaction)28 5% or 0% 30

Yes

—

CC, PayPal, Amazon26

No

—

Paypal

Yes

—

CC, PayPal, Apple, BitPay31

( 2 ) FastSpring15 ( 3 ) Gumroad18 ( 3 ) Humble Widget21 ( 3 ) itch.io24 ( 1 ) Paypal27 SendOwl29

10 https://web.archive.org/web/20150110160812/http://www.merseyremakes.co.uk/gibber/2012/02/buy-and-sell/ 11 http://positech.co.uk/cliffsblog/?p=884 12 https://www.bmtmicro.com/ 13 https://www.bmtmicro.com/pricing 14 https://help.bmtmicro.com/vendors/what-payment-options-do-i-have/ 15 https://fastspring.com/ 16 http://www.fastspring.com/pricing.php 17 http://www.fastspring.com/features.php#one 18 https://gumroad.com/ 19 https://help.gumroad.com/11162-Getting-Started/is-gumroad-for-me 20 https://help.gumroad.com/11167-Buyer-FAQ/what-forms-of-payment-can-i-use-to-buy-on-gumroad 21 https://www.humblebundle.com/developer 22 https://www.humblebundle.com/developer 23 https://www.humblebundle.com/developer 24 https://itch.io/developers 25 http://itchio.tumblr.com/post/112709605589/introducing-open-revenue-sharing 26 http://itch.io/about/faq 27 https://www.paypal.com/ 28 https://www.paypal.com/us/webapps/mpp/merchant-fees 29 https://www.sendowl.com?r=d5fca 30 https://www.sendowl.com/pricing 31 https://www.sendowl.com/partners

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Game Distribution & Marketing

171

• Footnote #1: used since 1993. • Footnote #2: created in 2013 but abandoned due to administrative complications and hyper over-watch. • Footnote #3: used since 2006.

Shareably (SBLY) looking to rent your games SBLY a are looking for new game titles to add to their platform through rental sponsorships ($50 - $100 per month) and possibly non-exclusive or exclusive licensing deals. SBLY is fairly new to the web game space, but by no means new to publishing. They started in 2015 and have now amassed over 50 million monthly readers across their publishing networks. Finding early success in this space they now believe that bringing on new titles from other developers is a worthwhile investment. Your game will be on their publishing site https://shareably.net although this will transition to a new domain in the coming months. SBLY’s product lead engineer, John Lee, explains: “We like the rental sponsorships because we can quickly see if your game will succeed with low commitment early on and of course, developers are free to do this with many other publishers! As for games, I’m particularly looking for familiar games (Minesweeper, FreeCell, spider solitaire, matching games, etc) right now, but in the future, we’ll be open to all categories so please don’t hesitate to reach out so we can get the conversations rolling.” If you’re interested, you can reach John at [email protected], or on the Phaser Discord (@jawnwee) a https://shareably.net/about/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Game Distribution & Marketing

172

24.3 Book Review Protocol Did you “like” or “learn” anything from this Book? If you liked this book, it would mean the world to me if you took just a moment to leave an honest positive review on your “book distributor’s review page”. Remember, you can earn commissions by recommending this book through your affiliate links!

If your opinion is less than 3 stars out of 5, please allow me to make amends before you “publically crucify me”. Tell me what you believe is missing in a personal one-onone email. I’ve learned that “poor reviews” from “angry readers” were never revisited and updated by them after I’ve made those corrections in the following book’s editions. Those belligerent comments only make the reviewer appear vindictive when the newest editions have their corrections. E-Mail me at ( https://leanpub.com/cgc-c23-hidden/email_author/new ) with the “Subject: Book concerns – (the book title)”. Please provide, in your email message body: • the page number, and • supporting evidence from primary technical references that support your opinion(s). Sorry, but I don’t consider “rumors”, “crowd following”, “comments from forums” and any unsubstantiated opinions — even if you do hold a Ph.D. or have “a gazillion years” of experience. • allow me sufficient time to respond with an updated FREE book edition — which I will email directly back to your email in a DRM .pdf format after you have done the following … provide me your newly posted rating (or your updated/modified rating if you didn’t follow my request?!) to 3+.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Game Distribution & Marketing

173

24.4 Tell the world about your game! Excellent! You completed this workbook and constructed your game. Do you want to brag about your additional features or unique modifications? Do you have additional features or game “tweaks” you want to show to the world? Then, let me use your creation in upcoming articles and book edition updates! Earn the popularity you deserve! Use this contact email: • E-Mail me at ( https://leanpub.com/cgc-c23-hidden/email_author/new ) with the “Subject: Game Show Case - (your game’s title)”. Please provide, in your email: • the book you read to develop your bespoke game edition. (hint: use your affiliate link and earn commissions!) • a list of your game’s unique and/or innovations. • a website URL to play your demo or licensed versions.

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

174

Conclusion

25. Conclusion

Software Project Management

We are at the end of this game’s development and should deploy our finished game into the wild. Topics such as launch times, download times, time to first byte (TTFB)1 , and Domain Naming Servers (DNS) lookups, all of these now come into our business project’s scope. These topics are in the reference books mentioned throughout the course. When you launch your final “Golden Release” 2 , it is critical that you “collapse” all your files into as few as possible, obfuscate3 their content, and minify them using Browserify 4 . Here’s what typical game studios must do before deployment … 1 https://blog.cloudflare.com/ttfb-time-to-first-byte-considered-meaningles/ 2 http://www.webopedia.com/TERM/G/gold_version.html 3 https://en.wikipedia.org/wiki/Obfuscation 4 http://browserify.io

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

175

Conclusion

What other game studios are doing …

in their Project Development & Management …

Fortunately for us, Construct provides all those services above natively! However, if you’re interested in “how” this is done, I recommend several of these tools found in the reference workbooks. “How to use such tools?”, you say? Then read this5 . 5 https://medium.freecodecamp.org/javascript-modules-part-2-module-bundling-5020383cf306

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Bonus Development Content

176

26. Bonus Development Content 26.1 Certification Examination • Earn your game developer certifications! If you would like to achieve Code-less Game Development Certification status, please complete the examination with a passing score: above 60%; “Honors” above 80%, and “Distinction” above 90%. Use your Online Course Discount Coupon included in the Student package of this book. Use your coupon link and start your online course today. Discounted Instructor Workshop Package1 Discounted Certification Course Access2 • “Code-less Game Design Workshop” — Instructor Package — Start your own lecture series and workshops for after-school computer clubs. Includes • • • • •

Instructor’s Guide, PowerPoint Lecture slides and notes, Resource downloads. Commissions earned on student workbooks and, Commissions earned on Full price and Discounted course access,

• “Code-less Collapsing Blocks Workshop” — Start your own lecture series and workshops for after-school computer clubs. Includes Instructor’s Guide, PowerPoint Lecture slides and notes, commissions on student workbooks and online course access, and student resource downloads. • Critical Rendering Path3 — Free course sponsored by Udacity (here)4 . • GG Interactive — FREE Game Design course5 .

1 https://leanpub.com/cgdw/c/4gaYBOoOjrb1 2 https://leanpub.com/c/cgc-design-workshop/c/2JSnozGGq8k0 3 https://developers.google.com/web/fundamentals/performance/critical-rendering-path/#critical-rendering-path_1 4 https://www.udacity.com/course/website-performance-optimization--ud884 5 http://store.gginteractive.com/launch/9fe770a6-c876-a921-80d7-36a7-7e0e034a/GDC-GD-0100

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Appendix Excellent! You completed this workbook and constructed your game. Still hungry for more? Take some time and review the following resources.

178

More Resources …

More Resources … Still hungry for more? Take some time and review the following resources.

“You don’t know JS Yet” by Kyle Simpson Book Series 2nd Edition (GitHub)6 — The worldwide best-selling You Don’t Know JS book series is back for a 2nd edition: You Don’t Know JS Yet. (1st edition found here7 ) All 6 books are brand new, rewritten to cover all sides of JS for 2020 and beyond. You’ll still get in-depth coverage of the core language, applied in useful code organization patterns for your programs. And of course, through Kyle’s unique perspective and conversational tone, explore passionate, reasoned debate of the most common questions developers face. Get Started, the first book in the new edition series is where to start your journey of knowing JS more deeply. This book surveys the language in multiple layers of detail, laying out a road map with the other books as guides for your learning and growth. For any developer hoping to move from early JS experience to a deeper level, here is your first step to getting started. In the “Get Started” section, you’ll explore: • How the JS language evolved, how JS programs actually work, and “busting of common myths”. • The building blocks of JS: values, functions, and more • The roots and pillars of JS: types, closure, and prototypes

Construct Demos • • • •

RexRainbow Construct2 Demos8 23 Tutorials on various Game Mechanics9 Construct3 by Example10 Ondřej Žára Games11 — a JavaScript developer, living in Prague, Czech Republic.

6 https://github.com/getify/You-Dont-Know-JS 7 https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/README.md 8 https://rexrainbow.github.io/C2Demo/ 9 https://www.construct.net/en/courses/construct-demos-53 10 https://www.construct.net/en/courses/construct-example-52 11 https://ondras.zarovi.cz/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

179

More Resources …

• • • •

• • • • •

Employed by Seznam.cz. His résumé is available online, though he is not currently looking for a job. You can also see his GitHub repositories12 . RexRainbow Collection of Tutorial Templates13 RexRainbow Plug-ins, Behaviors, and Effects14 — more than 300+ additional addons for Construct2. Download from here15 or directly from GitHub16 . RexRainbow Construct3 Plug-ins, Behaviors, and Effects17 — more add-ons specifically for Construct3. Download from GitHub18 . Construct Master Collection of Enterprise Level Add-ons19 — Professional plugins for both Construct 3 and Construct 2. It is an enterprise-level dedicated add-on package mainly created to extend Construct with features you can’t get with just the built-in Construct objects. It is well documented with flexible implementations that extend to various fields in game development. Including MultiPlayer, movement, logic, performance, server integration, mobile integrations, monetization, artificial intelligence, etc. CONSTRUCT 3 BY EXAMPLE 20 LEARN JAVASCRIPT IN CONSTRUCT 21 HOW TO COLLABORATE ON CONSTRUCT PROJECTS WITH GITHUB22 UPGRADING PROJECTS FROM CLASSIC SCRIPTS TO MODULES23 SIMPLE LOGIN USING A MYSQL DATABASE 24

12 https://github.com/ondras 13 https://c2rexplugins.weebly.com/tutorialtemplates.html 14 https://rexrainbow.github.io/C2RexDoc/c2rexpluginsACE/index.html 15 https://c2rexplugins.weebly.com/ 16 https://github.com/rexrainbow/C2Plugins 17 https://github.com/rexrainbow/C3Plugins/blob/master/utilities/index.md 18 https://github.com/rexrainbow/C3Plugins 19 https://www.constructcollection.com/ 20 https://www.construct.net/en/courses/construct-example-52 21 https://www.construct.net/en/tutorials/learn-javascript-construct-2800/page-2?vic=79 22 https://www.construct.net/en/tutorials/collaborate-construct-2390 23 https://www.construct.net/en/tutorials/upgrading-projects-classic-2652 24 https://www.construct.net/en/tutorials/simple-login-using-mysql-312

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Appendix: Game Developer Tool Kits

180

Appendix: Game Developer Tool Kits • TexturePacker FREE Online Editor 25 — is a web app version of TexturePacker that you can use for your game projects. It’s totally free to use but does not support all features that TexturePacker does. Please download TexturePacker if you are looking for a professional game development tool. • BobSprite26 — is a browser-based free online drawing tool designed for Pixel Art created by Feudal Code27 — a software company focused on internet products. • Modd.io28 — Make a game in 3 days, not in 3 months. Modd.io is running on a Multi-Player game engine with Box2d physics built-in. Many features have been put in place over the years such as client-side prediction and bandwidth optimization. • Daz Studio29 — is a suite to render beautiful shots of customized characters with a large marketplace of 3D models to manipulate. • 12 Free & Handy Tools for Indie Game Devs30 or watch the (video 7:14 here)31 . • Texture Packer 32 — Sprite sheet packer for your 2D game projects. Supports Unity, Phaser, Construct, PixiJS, Godot, Monogame, and many more game engines. • SpriteStack 33 — has evolved into something bigger. Combine voxels34 , low-poly, and sprites to create animated 3D objects or particle effects and render them as 2D spriteSheets using a unique retro renderer. Import your existing 3D and 2D assets and give them a new retro look. • Texture Packer 3D35 — Automatically combine the textures of your 3D models in shared atlases to reduce memory usage and speed up rendering. • Sprite Illumination36 — Create stunning light effects with 2d sprites in your game engine. • Physics Editor 37 — Edit your collision shapes. • Babel Edit38 — Edit your json, yaml, php, arb, vue, and properties for xliff translation files with ease. 25 https://www.codeandweb.com/tp-online 26 https://www.bobsprite.com/editor 27 https://www.feudalcode.com/ 28 https://www.modd.io/ 29 https://www.daz3d.com/ 30 https://www.construct.net/en/tutorials/handy-free-productivity-tools-901 31 https://www.youtube.com/watch?v=Mkj28quxqJY 32 https://www.codeandweb.com/texturepacker 33 https://spritestack.io/ 34 https://en.wikipedia.org/wiki/Voxel 35 https://www.codeandweb.com/texturepacker3d 36 https://www.codeandweb.com/spriteilluminator 37 https://www.codeandweb.com/physicseditor 38 https://www.codeandweb.com/babeledit

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Appendix: Game Developer Tool Kits

181

• Blender 39 — is an open-source suite for 3D modeling and animation. It can also be used to produce computer-generated images and films. • GameBench40 — provides a simple solution to testing the impact of your game on various hardware. • Krita41 — is a free and open-source alternative to PhotoShop. It’s far from an exact clone with its own skill sets and brushes, with a large community behind it. • Strani Anelli Free C3 Plugins42

Artwork Resources • GameDev Market43 — GameDev Market is a marketplace for high-quality, affordable game assets handcrafted by talented creators from around the world. They offer various 2D, 3D, Audio (music and sound FX), GUI, and game asset bundles for indie game developers! • Craftpix 44 — If you are creating your own games, their store boasts the highest quality (and rightly so; most of my artwork comes from them) 2D game assets you can buy online. By using this amazing resource, you will find Free45 and Premium game assets, Game Kits, GUI (graphical user interface), Tilesets (sets of textures and sprites for game levels), Character Sprites (characters in different variations, i.e. running, jumping, etc.), and Game Backgrounds suited to every fancy. Please, pay attention to the fact that they also offer you FREE game assets! Their stated goal is to provide you with the best game content for your projects. They also have an artwork by membership subscriptions46 at significant discounts. • Flat Icons47 — Discover and customize more than 8,000 royalty-free flat icons and download over 300 free icon sets for your web projects using our new flaticon maker. • Open Game Art48 — open source game artwork with Creative Commons and other similar licensing. 39 https://www.blender.org/ 40 https://www.gamebench.net/ 41 https://krita.org/ 42 https://c3plugins.stranianelli.com/ 43 https://www.gamedevmarket.net/?ally=GVgAVsoJ 44 https://craftpix.net?affiliate=112238 45 https://craftpix.net/freebies/?affiliate=112238 46 https://craftpix.net/membership/?affiliate=112238 47 https://flaticons.net/ 48 https://opengameart.org/content/breakout-set

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Appendix: Game Developer Tool Kits

182

Selling your Game Artwork & Assets This is similar to selling a car in parts49 from a “hack shop”. Learn how AppGameKit50 manages its “piecemeal” 51 sales. • Sell your knowledge, discoveries, concepts, and designs as tutorials, ebooks, guides, and courses (examples here)52 . • Sell your 3D Models here53 or from my favorite 3D publisher DAZ 3D54 download their FREE DAZ 3D Studio Manager 55 . • Pixilart56 — create, share and sell your artwork from the online editor. Create your own comics! Come see why 1.5+ million users love creating and sharing art on Pixilart. • As a Commercial Game Starter Kits57 (examples) • Creative Market58 — is the world’s marketplace for design. Bring your creative projects to life with ready-to-use design assets from independent creators around the world. Sell your game assets. • Envato Elements59 — Sell your graphics, audio, images, plugins, themes, and videos. • Game Developer’s Market60 — GameDev Market (GDM) is a community-driven marketplace based in the UK that connects indie game developers with talented asset creators. There are asset stores specific to certain game engines, huge generic stock websites with an overwhelming catalog of assets of varying quality, and smaller indie stores with small selections of very niche assets. • HumbleBundle for Developers61 — Humble Games wants to make it easier for indie developers to succeed. Publishing is their way to give back to the indie community by helping great ideas to become successful games. They want to share their Humble Bundle’s experience and international marketing scale to help every developer make more games and reach more customers. You can create your own web page to showcase and sell your game. Hosting is free, and you keep 95% of the proceeds after payment processing and taxes. You can edit 49 https://www.cashcarsbuyer.com/how-to-sell-a-car-for-parts/ 50 https://www.appgamekit.com/order 51 https://www.dictionary.com/browse/piecemeal 52 https://gamedevelopment.tutsplus.com/tutorials?ref=PBMCube 53 https://help.sketchfab.com/hc/en-us/articles/115004259063-Selling-your-3D-Models?utm_source=website&utm_ campaign=footer 54 https://www.daz3d.com/community/community-publishing 55 https://www.daz3d.com/get_studio/ 56 https://www.pixilart.com/terms 57 https://codecanyon.net/search?utf8=%E2%9C%93&term=html5+mobile+fighting+game&ref=PBMCube&referrer= search&view=grid 58 https://creativemarket.com/?u=PBMCube 59 https://community.envato.com/become-an-elements-author/?ref=PBMCube 60 https://www.gamedevmarket.net/?ally=GVgAVsoJ 61 https://www.humblebundle.com/subscription?refc=vu8nCv

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Appendix: Game Developer Tool Kits

183

your page whenever you want, and you also have access to our customer support team. Get many of the features and benefits of their “Humble Gamepage” in a handy widget that you can add directly to your site to sell your game. Edit and customize it at any time, and keep 95% of proceeds after payment processing and taxes.

JavaScript Garden JavaScript Garden62 is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It advises avoiding common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter in their endeavors into the depths of the language. JavaScript Garden does not aim to teach you JavaScript. Former knowledge of the language is strongly recommended to understand the topics covered in this guide. To learn the basics of the language, please head over to the excellent guide on the Mozilla Developer Network. 62 http://bonsaiden.github.io/JavaScript-Garden/#intro

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

184

Additional Appendices

Additional Appendices Available Bonus Content has 76 pages of external downloads. Offering this content as a Bonus Download has reduced the retail price of this book by 25%! You’re welcome … • • • • • • • • • • • •

Appendix: Building HTML5 Web Page (3-pages)63 Appendix: Distribution Channels (2-pages)64 Appendix: Game Design Considerations (1-page)65 Appendix: Game Design Overview (3-pages)66 Appendix: Game Resources and References (17-pages)67 Appendix: JS Coding Styles (7-pages)68 Appendix: Networking (9-pages)69 Appendix: Project Management Analysis (13-pages)70 Appendix: Security (5-pages)71 Appendix: US Business Start-ups (4-pages)72 Facebook Game AI & WebXR Developers73 Facebook Game Developers74

63 https://makingbrowsergames.com/cgc-books/Appendix-buildHTML5webPage.pdf 64 https://makingbrowsergames.com/cgc-books/Appendix-Channels.pdf 65 https://makingbrowsergames.com/cgc-books/Appendix-GD.pdf 66 https://makingbrowsergames.com/cgc-books/Appendix-GameDesignOverview.pdf 67 https://makingbrowsergames.com/cgc-books/Appendix-Game.pdf 68 https://makingbrowsergames.com/cgc-books/Appendix-CodingStyles.pdf 69 https://makingbrowsergames.com/cgc-books/Appendix-Networking.pdf 70 https://makingbrowsergames.com/cgc-books/Appendix-PM.pdf 71 https://makingbrowsergames.com/cgc-books/Appendix-Security.pdf 72 https://makingbrowsergames.com/cgc-books/Appendix-USBusiness.pdf 73 https://developers.facebook.com/products/#filter-id=gaming 74 https://developers.facebook.com/search/?q=html5%20build%20games¬found=1

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Appendix: Making WebXR Games!

185

Appendix: Making WebXR Games! Refer to the following pioneers who are building 3D Construct Games. • • • •

WebXR Device API Explained75 Wolfenstein 3D in Construct 3 (video)76 Enabled 3D for Web, Mobile, and PC 77 Super-Powers78 — 2D and 3D game making for indies; Free and open source. Superpowers is powered by three.js, Socket.IO, TypeScript, Electron, Node.js, and many other lovely Open Source projects.

First-person view of the 3D environment 75 https://github.com/immersive-web/webxr/blob/master/explainer.md 76 https://youtu.be/aRsemuHPjZA 77 https://github.com/yandeu/enable3d#readme 78 http://superpowers-html5.com/index.en.html

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Appendix: Making WebXR Games!

Learn how to create such games here79 .

79 https://editor.construct.net/#open=template-first-person-shooter

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

186

Appendix: Safe JavaScript Using OLOO This is an Excerpt from “Using JavaScript OLOO in Game Development80 Abandon OOP for Composition Game Development An excerpt from “JavaScript ‘Objects Linking to Other Objects’ (OLOO) in Game Development” 81 — a FREE online course for book patrons studying and contrasting JS delegation vs OOP Inheritance.

JS Objects: “TL;DR” JavaScript has been plagued since the beginning with misunderstanding and awkwardness around its “prototypal inheritance” system, mostly because “inheritance” isn’t how JS works at all, and trying to do that only leads to “gotchas” and “confusions” that we have to pave over with “user-land helper libraries”. Instead, embracing that JS has “behavior delegation” — simple delegation links between objects — fits naturally with how JS syntax works, which creates more sensible code without the need for helpers. When you set aside distractions like mixinsa , polymorphism,b composition, classes,c constructors, and instances, and only focus on the objects that link to each other, you gain a powerful tool in behavior delegation that is easier to write, reason about, explain, and code-maintain. Simpler is better. JS is “objects-only” (OO). Leave the classes to those other languages! … At this point of understanding, we should really ask ourselves: is the difficulty of expressing classes and inheritance in pure JavaScriptd a failure of the language (one which can temporarily e be solvedf with user librariesg and ultimately solved by additions to the languageh like class { … } syntax), as many game developers feel,i or is it something deeper? Is it indicative of a more fundamental disparity, that we’re trying to do something in 80 https://leanpub.com/c/jsoloo 81 https://leanpub.com/c/jsoloo

188 JSj that it’s just not meant to do? k a https://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/ b https://davidwalsh.name/javascript-objects-distractions c https://davidwalsh.name/javascript-objects-deconstruction d http://javascript.crockford.com/inheritance.html e http://prototypejs.org/learn/class-inheritance f http://mootools.net/docs/core/Class/Class g http://ejohn.org/blog/simple-javascript-inheritance/ h http://wiki.ecmascript.org/doku.php?id=strawman:maximally_minimal_classes i http://www.nczonline.net/blog/2012/10/16/does-javascript-need-classes/ j http://www.kirupa.com/html5/objects_classes_javascript.htm k http://webreflection.blogspot.com/2010/01/better-javascript-classes.html

JavaScript features stalled around 2007 to 2008; we’ve recently seen JavaScript language development making a fair amount of progress with promised releases every year (typically in June). In 2012, Object.create appeared in the standards. It allowed us to create objects with a selected prototype but didn’t allow us to get nor set them. So, browsers implemented a non-standard proto accessor that permitted getting and setting a prototype at any time. Later in the year 2015, Object.setPrototypeOf and Object.getPrototypeOf were added to the standards. The proto was the “de-facto” — implemented everywhere — so, it made its way into the standard’s Annex B — a description for optional non-browser environments. The ECMAScript 6-standard82 is 4+ years old and all major browsers currently support it (see this table).83 The next ECMA version84 was ES6 (or ES2015, or “ESNext” (at that time), there are a lot of names for JavaScript release versions85 ) that were only partially supported by browsers back then.86 However, since the ES5 specification is fully defined, software engineers wrote tools called “transpilers” 87 — it takes ESNext formatted code and returns it into the standard ES5 code. You must be thinking, “Why would they do that?” Because, it allows software engineers to use the newest released versions of the JavaScript specification and all the newest features; yet, still allows their code to be run in any browser. So, this is a perfect time to latch onto88 the new JS features and migrate to the modern style of game development. Before ECMAScript 6, there was a lot of confusion about how to use Object Oriented Programming (OOP) in JavaScript;89 the two methods used were either the “factory 82 http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm 83 http://kangax.github.io/compat-table/es2016plus/ 84 https://medium.freecodecamp.org/whats-the-difference-between-javascript-and-ecmascript-cba48c73a2b5 85 https://www.w3schools.com/js/js_versions.asp 86 http://kangax.github.io/compat-table/es2016plus/ 87 https://babeljs.io/ 88 https://idioms.thefreedictionary.com/latch+onto 89 http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

189 pattern” 90 or the “constructor function pattern”.91 ES6 added a new keyword to resolve this confusion and provide a single primary method to insert OOP into JS — the class keyword was introduced. Many believed, by adding this class keyword, it would solve many problems. In reality, it didn’t! It simply poisoned the minds and added another layer of abstraction that misrepresented the JS prototype-based inheritance chain as masquerading as standard classic OOP inheritance. If you’re using ES6 with classical Object-Oriented Programming, you will need a different structured approach known as Objects Linking to Other Objects (OLOO). Yes, there are many ways to style your JS source code. One prevalent way is to shoehorn92 JS into a Classical OOP format with inheritance;93 but, to do so is a misuse of the native objects and prototypical delegation found in the core of the JavaScript syntax. In fact, the Gang of Four (GoF) states,94 “… favor object composition over class inheritance …”.95 Read what Apple Game Develop says about “Inheritance-Based Architecture Hinders Game Design Evolution” 96 ES9 (June 2018)97 says this about OOP in JS, (quote pg 48), “… In a class-based objectoriented language, in general, ‘state’ is carried by instances, methods are carried by classes, and inheritance is only of structure and behavior. In ECMAScript, the state and methods are carried by objects, while structure, behavior, and state are all inherited. All objects that do not directly contain a particular property that their prototype contains share that property and its value.” Furthermore, “ES6 restricts what a class body content might contain.” Quoted from Exploring ES6 by Dr. Axel Rauschmayer98

15.2.2 Inside the body of a class definition A class body can only contain methods, but not data properties. Prototypes having data properties is generally considered an anti-pattern, so this just enforces a best practice.

90 https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s10.html 91 https://www.safaribooksonline.com/library/view/learning-javascript-design/9781449334840/ch09s01.html 92 https://www.urbandictionary.com/define.php?term=shoehorn 93 https://en.wikipedia.org/wiki/Inheritance_(object-oriented_programming) 94 https://hackernoon.com/favor-object-composition-over-class-inheritance-they-said-9f769659b6e 95 https://en.wikipedia.org/wiki/Composition_over_inheritance 96 https://developer.apple.com/library/archive/documentation/General/Conceptual/GameplayKit_Guide/ EntityComponent.html#//apple_ref/doc/uid/TP40015172-CH6-SW1 97 http://www.ecma-international.org/publications/standards/Ecma-262.htm 98 http://exploringjs.com/es6/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

190

Deeper Dive: JS Delegation (aka “Inheritance”?) • 3 Different Kinds of Prototypal Inheritance: ES6+ Edition99 by Eric Elliott. • The Gang of Four is wrong and you don’t understand delegation100 by Jim Gay.

The old way Let’s assume you’re building a game studio/workshop and you need to create some release game products. In the old days (1997 to 2008) – before ECMAScript 5 (ES5), you would have written something like a function this way: 1 2 3 4

//"pseudo-constructor" JS Function; functions are "hoisted" function game (name) { this.name = name; };

5 6

game.prototype.showName = function() {alert(this.name);};

7 8 9 10 11 12 13 14 15

/////////////////////////////////////////////////// // OR when ES5 appeared, you may have shifted to an "object literal" // "pseudo-constructor" JS object literal; object literals are // NOT "hoisted". /////////////////////////////////////////////////// var game = functionName(name) { this.name = name; };

16 17

game.showName = function() {alert(this.name);};

18 19 20

document.addEventListerner('DOMContentLoaded', function(){ window.game() );, false });

This wasn’t so bad. You have a function acting as a pseudo-“constructor” 101 (an adopted terminology from OOP) to create your game object singleton102 and attach methods to the game’s prototype. All individual games would have these methods. “Constructor functions” are technically just normal, old, regular functions — nothing more! For instance: 99 https://medium.com/javascript-scene/3-different-kinds-of-prototypal-inheritance-es6-edition-32d777fa16c9 100 https://www.saturnflyer.com/blog/the-gang-of-four-is-wrong-and-you-dont-understand-delegation 101 https://en.wikipedia.org/wiki/Constructor_(object-oriented_programming) 102 http://gameprogrammingpatterns.com/singleton.html

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

191 1 2 3 4

function User(name) { this.name = name; this.isAdmin = false; }

5 6

let user = new User("Jack");

7 8 9

alert(user.name); alert(user.isAdmin);

When “new

User( ... )“

// Jack // false

is called, it does several things:

• A new empty object was created. • The “this“ keyword was assigned to that newly created object. Additionally, the “constructor“ property was changed to the parent function, and “proto“ was set to that parent’s “constructor“ prototype. If no return value was set at the end of this function, then the function would return “this“ — a reference to the object itself. • The function body executes its statements and usually, it modifies this reference and adds other new properties into itself. • The value of “this“ was returned upon completion. In other words, “new 1 2

User( ... )“

really does something like this:

function User(name) { // this = {}; (implicitly)

3

// add properties to this this.name = name; this.isAdmin = false;

4 5 6 7

// return this;

8 9

(implicitly)

}

10 11 12 13 14 15

//or something like this var User = { constructor: this.name = name; this.isAdmin = false;

16

//If we put methods here; every instance will use these // same methods.

17 18 19

} © Copyright, 2009-2023, Stephen Gose. All rights reserved.

192 However, there are several concepts to consider: • There are no private attributes in the JavaScript language unless you choose to modify the Object.defineProperty read-only into a writable flag to false.103 Be warned! Once you change this, you cannot reverse your selection. The value inside a named variable can be changed at any time from outside its function; unless you set the property as “read only”. • The methods and properties are scattered. Even if you put them all in one tight collection (aka a class), there is not a single structure concept to define your classic classful objects due to “hoisting” — just as you would do with classes in many other purely classical object-oriented languages. Objects use “values by reference”. • You might easily forget to use the new keyword. It doesn’t throw an error and is perfectly acceptable in JS. It just leads to completely different behavior than you would expect and some nasty unintended bugs that become difficult to discover. • Classical OOP Inheritance will provide further problems. There isn’t an agreedupon method in the JS community about how to do this properly. In fact, in JS, it is not inheritance at all (i.e., copying attributes and methods into the new instance). Nothing in an object/function is “copied” in JavaScript. When an object variable is copied — it’s the reference (aka the memory address where the value lives) that is copied, the object is not duplicated. If an internal property doesn’t exist in an object, JavaScript refers up the protocol chain to find it; it is “delegation”. John Dugan has an excellent illustration.

“Object-Oriented JavaScript Pattern Comparison” “When your parents had you, you inherited their DNA — you received a copy of it. When they broke their leg, yours did not break. JavaScript is the opposite of this. In JavaScript, when your parents break their leg, yours breaks too. A term better suited than prototypical inheritance to JavaScript is prototypical delegation. When a new object is created from another object in JavaScript, it links back to the parent object’s prototype properties and methods as opposed to copying them.”

( Read more on this topic from, “You don’t know JS” Chapter 6104 ). Here’s a summary of the Feature changes in ES6 here105 ) 103 http://www.ecma-international.org/ecma-262/7.0/index.html#sec-property-attributes 104 https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch6.md 105 http://es6-features.org/#Constants

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

193 A class with only a single instance with global access points. 1 2

// sample var game = new main();

When the new keyword is placed in front of any function call, four things happen: 1. A new object is created and assigned to the variable; new helps create an object from the parent function. 2. The new object gets linked to its parent object’s prototype. 3. The new object gets associated with the keyword this within the constructor function call. 4. If the constructor function does not return a value, JavaScript implicitly inserts this context and returns it as a reference at the end of the constructor function’s execution.

ECMA-262 7th Edition / June 2016 ECMAScript® 2016 Language Specificationa (QUOTE) “A function object is an object that supports the [[Call]] internal methods. A constructor (also referred to as a constructor function) is a function object that supports the [[Construct]] internal method.” Refer to Table 6b A function object is not necessarily a constructor and such non-constructor function objects do not have a [[Construct]] internal method. a http://www.ecma-international.org/ecma-262/7.0/index.html#table-6 b http://www.ecma-international.org/ecma-262/7.0/index.html#table-6

Because of these points, many developers have created libraries, frameworks, and tools that provide all types of object creation and instantiation logic to subjugate JS into the classical OOP comfort-zone. Many of these “shackles”, introduced by OOP classes (e.g. Prototype106 , ES6, TypeScript, LiveScript107 , or CoffeeScript108 ), are nothing more than “syntactic sugar” 109 to fatten up110 JS. I trust you haven’t drunk this pre106 http://www.prototypejs.org/ 107 http://livescript.net/ 108 http://coffeescript.org/ 109 https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/objects-classes/apA.md#class-gotchas 110 https://idioms.thefreedictionary.com/fatten+up

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

194 sweetened “Kool-Aid”!?111 (oh! I offer my apology112 to those who’ve misunderstood my meaning). You can skip down this yellow-brick road113 of classic OOP if you want, but I wouldn’t recommend it because your game will perform slower. Test it for yourself114 ; you’ll see that using OOP is 12% slower (click to see results)115 because of the hierarchy “tree walking”. It may be hard to swallow (Kool-Aid reference above)116 , yet prototypical delegation — Objects Linking to Other Objects (OLOO) — is much easier than classful-based OOP and provides additional further benefits. Just look at other prototypical languages such as IO117 or Self118 . These are old pre-JavaScript syntax that made prototypes initially difficult to use.

Comparison of JS OOP Class Systems 111 https://www.urbandictionary.com/define.php?term=drink%20the%20kool-aid 112 https://www.washingtonpost.com/posteverything/wp/2014/11/18/the-phrase-drank-the-koolaid-is-completelyoffensive-we-should-stop-saying-it-immediately/?noredirect=on&utm_term=.c0835724bc46 113 https://imgur.com/gallery/NUKAetS 114 https://jsperf.com/crockford-object-create-with-cached-function 115 https://makingbrowsergames.com/starterkits/_CrockfordObjectComparisonTest.pdf 116 https://idioms.thefreedictionary.com/hard+to+swallow 117 https://en.wikipedia.org/wiki/Io_(programming_language) 118 https://en.wikipedia.org/wiki/Self_(programming_language)

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

195 Douglas Crockford developed this approach119 . He wrote a short method — called Object.create — and it was adopted into the ES5 standards.

Objects Linking to Other Objects (OLOO)

Entities and Component Game Design viewed as a cross-reference

In the OLOO style of creating objects, we strip away the “class” focus of objects typically seen in ES6-oriented programming and embrace the true nature of JavaScript’s prototype features. In OLOO, objects delegate directly from other objects without needing to use a constructor as a middleman. OLOO takes advantage of the Object.create method to take care of object creation and inheritance.

119 http://javascript.crockford.com/prototypal.html

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

196 1 2 3 4 5

var myGame = { init: function config(width, height) { this.width = width; this.height = height; },

6

gameDim: function gameDim(config) { console.log('Dimensions: ' + this.width + 'x' + this.height); }

7 8 9 10

}

11 12

var gameCanvas = Object.create(myGame); //.init('800', '500');

13 14 15 16 17 18 19

//Debug Review console.log("Game prototype (myGame): ======="); console.log("Match TYPE: "+myGame.isPrototypeOf(gameCanvas)); console.log("GET myGame: "+Object.getPrototypeOf(myGame)); console.log("myGame Properties: "+Object.values(myGame)); console.log("End of (myGame): =======");

Read more on other Object properties here.120

Compare your code You can check the finished code for this lesson in the live demo below, and run it to understand how it works: https://makingbrowsergames.com/jsoloo/index-OLOO.pdf

Object.create But what does Object.create do exactly? How is it different from OOP constructors? Object.create is like

an OOP constructor in that it creates a new object from the referenced object passed into it and builds a chain (aka inherits). In other words, it changes the 120 http://www.ecma-international.org/ecma-262/7.0/index.html#table-5

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

197 value of proto on the newly created object pointing to the object referenced. However, the true advantage of Object.create is its emphasis on prototype chains and delegation. To get a better idea of what Object.create does, you can rewrite it as a new function: 1 2 3 4 5

function createObject(obj) { var newObj = {}; newObj.proto = obj; return newObj; }

//new object created //chain to properties of referenced obj //return "THIS" newObj reference

As you can see (in the code above), the new object (newObj) created doesn’t have properties nor method behaviors. It inherits all of those from the referenced object handed in as an argument. If we should call any method on this new bare object, our program would find that method following the proto property (instead of inside the object itself). However, if you plan to create unique properties for this object, you need to create an initialize method as in the former example using config. There is a drawback for Object.create. It doesn’t allow you to use instanceof for quick “inheritance” checks because it doesn’t touch the constructor property. Instead, to check for an inheritance, you use the .isPrototypeOf method on the originally referenced object. The good news is that you don’t need a modern browser with any ES5 implementation. Mozilla Developer Network provides a polyfill121 . It allows you to use this way of creating objects since 2011, even inside older browsers. But before you get all happy with this free gift, refer to https://caniuse.com/#search=ES5 and update your information — today this is not an issue anymore. This is important, considering the adoption trends of browsers122 . It is not an issue if you only target Firefox, Chrome, Safari, or Opera users. If you have doubts, research this compatibility chart123 or go to http://canIuse.com.

121 https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create/ 122 http://www.w3schools.com/browsers/browsers_explorer.asp 123 http://kangax.github.com/es5-compat-table/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

198 1 2 3 4 5 6 7 8 9

//Mozilla Polyfill: if (! Object.create) { Object.create = function (o) { if (arguments.length > 1) { throw new Error('Object.create implementation only accepts the first parameter.'); } } }

10 11 12 13 14

function F() { F.prototype = o; return new F(); };

You will have a function for the Object.create by just including the above source code. The first line checks whether Object.create exists already. This ensures that it won’t override any native implementation should the browser produce one. Basic Syntax: Object.create(prototype_object, propertiesObject)

Exercise Lesson 9: The issues derive from writing source code in ES6 and using transpilers; don’t believe me?? Research and record information from here124 Instructions: - Click on the “6” or “2016+” tab at the top of the page. - Find the “Syntax” in the Feature Name column and then drop-down “default function parameters” Slide down the new list that appears and find “new Function() support” Record which compilers/polyfills support the “new Function()” feature. Record which compilers/polyfills support the “new.target” feature. Record which compilers/polyfills support the Functions “class” feature. Record which compilers/polyfills support the Functions “super” feature. 124 http://kangax.github.com/es5-compat-table/

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

199 Do any compilers/polyfills support Annex b. How many total features are supported by: 1. TypeScript + core.js; 2. Babel 6 or 7 + core.js

Game Singletons “Let’s take another look at our game project. If you would like to create only one game, there is no need for Object.create. Just create the object directly. All JS objects are “singletons”. A Singleton is a class with only a single instance with global access points. In my example below, you don’t need (and cannot) create an instance of the game object (mistaken for a class), it already exists. “… So, you simply start using the instance. In “classical” languages such as Java, singleton means that you can have only one single instance of this class at any time, you cannot create more objects of the same class. However, in JavaScript (no classes, remember?) this concept makes no sense anymore since all objects are singletons to begin with.” quoted from Stoyan Stefanov — a Facebook engineer and O’Reilly authora a http://www.phpied.com/3-ways-to-define-a-javascript-class/

1 2

// creates our game name-space var game = {} || game;

3 4 5

/** // using the traditional new keyword

6 7 8 9 10 11

game = new Game( this.viewportWidth, this.viewportHeight, document.body, window.GAMEAPP.state.boot);

12 13

*/

14 15 16 17 18

// main function - using Object.create main: function(){ //game IS INSIDE!! game = Object.create(Game); © Copyright, 2009-2023, Stephen Gose. All rights reserved.

200 19

},

20 21 22 23 24 25 26 27 28

////////////////////////////////////////////// // NEW method ////////////////////////////////////////////// // passing via Object.create // config submitted as an external object main: function(){ this.game = Object.create(Game); },

Download the main.js125 example file. However, this isn’t our best solution. You might manipulate those properties inside the object easily from the outside and there are no precautions for the assigned values. Take into consideration an assignment like game.price = -20. A mistake like this would ensure the sale of your game products quickly with really happy customers — customers who receive $20 bucks from you with every game purchased. Your studio wouldn’t be able to do that for very long! Years of experience in object-oriented programming and design tell us to separate the inner states of an object from its outer interfaces. You usually want to make your game attributes private and provide some protection methods.

Deeper Dive: Object Manipulation objects in ES5/6 Objects get a major overhaul in ES6. Things like object destructuring and rest/spread operators made working with objects very easy. Let’s jump to the code and try to merge two objects in ES5. 1 2 3

var obj1 = { a: 1, b: 2 } var obj2 = { a: 2, c: 3, d: 4} var obj3 = Object.assign(obj1, obj2)

We have to merge the object using Object.assign() which takes both objects as input and outputs the merged object. Let’s take a look at how we can tackle this problem in ES6.

125 https://makingbrowsergames.com/jsoloo/OLOO-v2gameSkeleton.pdf

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

201 const obj1 = { a: 1, b: 2 } const obj2 = { a: 2, c: 3, d: 4} const obj3 = { ...obj1, ...obj2}

1 2 3

Simple isn’t it? The spread operator makes merging objects a breeze for the developer. But how does that apply to our development? Well, you’ve noticed by now that there are segregated javascript files named preload, config, create, and update functions along with the global window. Why not simply write them once and “Merge” them like this. var preload = { loads all game assets }; var create = { assigns cached assets to scene }

1 2 3

var GameMechanics = Object.assign(preload, create); var scene1 = Object.assign(GameMechanics,GameScene);

4 5

Lesson Summary As of 20180720, “328 out of 330 liked/approved” this answer provided on Understanding the difference between Object.create() and new SomeFunction()126 (Quote) “Very simply said, new X is Object.create(X.prototype) with additionally running the constructor function. (And giving the constructor the chance to return the actual object that should be the result of the expression instead of this.) That’s it. :) The rest of the answers are just confusing because apparently nobody else reads the definition of new either. ;)”

Resource References: • • • • •

Not Awesome ES6 Classes127 How to fix the ES6 class keyword128 ECMA-262 7.0129 http://www.crockford.com/javascript/inheritance.html http://crockford.com/javascript/

126 https://stackoverflow.com/questions/4166616/understanding-the-difference-between-object-create-and-newsomefunction 127 https://github.com/petsel/not-awesome-es6-classes/blob/master/README.md 128 https://medium.com/javascript-scene/how-to-fix-the-es6-class-keyword-2d42bb3f4caf 129 http://www.ecma-international.org/ecma-262/7.0/index.html#sec-createdynamicfunction

© Copyright, 2009-2023, Stephen Gose. All rights reserved.

Answers to Exercises Appendix: Safe JavaScript Using OLOO 1. 2. 3. 4. 5. 6.