Kevin Maes linkedin.com/in/kevinmaes @kvmaes

oxomuseo.com

Museo Videojuego Malaga Atari 2600 Nintendo

Egg drop

Egg drop

React + Konva

Konva

Konva

Game Mechanics • Who are the characters? • How will they move? • How will they interact? • How will the player interact with the game?

First Prototypes

Konva Tween

Konva Hit Detection • Pixel-level - User clicks, can include color detection • Bounding Box - Fast, less-precise • Shape-level - Basic shapes like rectangles, circles, polygons • Custom Hit Detection - Irregular or dynamic shapes • Group - Detects hits on any grouped objects <Group>…</Group>

state.new

state.new state.new

Egg drop State machines

Egg drop State machines Sorry, bad yolk!

Vector Graphics

Vector Graphics?

Konva Animation

Open AI Casting Call for Hens

Texture Packer

What about fonts? Arial in a game is so sad

Arco The quick yellow chick jumps over the lazy chef.

Arco The quick yellow chick jumps over the lazy chef.

Arco

Arco FOUT - Flash of unstyled text FOIT - Flash of invisible text FOFT - Flash of faux text

Arco

Arco new FontFaceObserver(‘Arco’);

Second Game Video Here

Genetic Algorithms Desired behavior Optimal design Solve complex search problems

States of a genetic algorithm

Population Initialization Many “individuals” Each with a potential solution Stored in their “DNA”

Evaluation & Fitness Evaluate performance Reward behavior Punishment Weighted criteria

Selection Roulette Wheel Selection 4% 28% 3% 1% 6% 8% 11% 22% 17%

Crossover x total population size

Mutation • Need to maintain variation • Avoid “local optima” • Strive for the “global optimum” • Mutation rate • Mutation amount

Genetic Algorithms in Egg Drop

Hendividual

Evaluation & Fitness Evaluate performance Reward behavior Punishment Weighted criteria Hens that lay more eggs Hens whose eggs go uncaught Hens whose black eggs get caught Hens who don’t lay any eggs at all

Tweak the ga

Build the game Tweak the ga or

Overcome small population size Add genes (traits) Selection Tweak Fitness • Introduce elitism Crossover Introduce elitism • Hybrid averaging/selection Introduce elitism Increase rate

Roulette Wheel Selection 4% 28% 3% 1% 6% 8% 11% 22% 17%

Hendividual DNA (genes) Genotype Phenotype 0.97 0.32 0.37 0.28 0.83 0.04 0.26 0.98 { speed, color, size, … }

Hendividual DNA (genes) Parent 1 0.97 0.62 0.13 0.28 0.83 0.04 0.71 0.56 0.09 0.96 0.43 0.26 0.98 Parent 2 0.12 0.32 0.37

Hendividual DNA (genes) Parent 1 0.97 0.62 0.13 0.28 0.83 0.04 0.71 0.56 0.09 0.96 0.43 0.26 0.98 Parent 2 0.12 0.32 0.37

Hendividual DNA (genes) Parent 1 0.97 0.62 0.13 0.28 0.83 0.04 0.71 0.56 0.37 0.09 0.96 0.43 0.26 0.98 0.37 0.28 0.83 0.04 0.26 0.98 Parent 2 0.12 0.32 Child Agnostic of Phenotype values 0.97 0.32

Child 0.97 0.32 0.37 0.28 0.83 0.04 0.26 0.98

https://github.com/kevinmaes/eggdrop

Summary 1. Genetic algorithms 2. How to create a game 3. How to include a ga

Get this book! The Nature of Code Daniel Shiffman thecodingtrain.com/

linkedin.com/in/kevinmaes @kvmaes github.com/kevinmaes Kevin Maes