A presentation at React Alicante 2024 in in Alicante, Spain by Kevin Maes
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
Inspired by nature, genetic algorithms have existed for decades and have been used to solve a variety of problems in software and hardware. When it comes to game development, it can be challenging to adapt content to players of varying skill levels.
In this talk, we experiment to see how genetic algorithms might be used in games that React developers can create with their everyday skills and creativity. See GAs in action as they attempt to solve problems, enhance player engagement, and continuously evolve game experiences.
The following resources were mentioned during the presentation or are useful additional information.
The game demo that was shown in the talk is available publicly at a subdomain at eggdrop.kevinmaes.com. The game is a work in progress and is missing some key features. These can be tracked on the game’s GitHub repo.
The game is open source and in a public repository on my GitHub
Here’s what was said about this presentation on social media.
for free. You
can too.