Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Pixels & Tactics
Search
Amber Feng
October 07, 2015
1
9.8k
Pixels & Tactics
Adventures of building a 2D tactics RPG in the browser!
Amber Feng
October 07, 2015
Tweet
Share
More Decks by Amber Feng
See All by Amber Feng
Move fast, don't break your API
amfeng
18
53k
Building Stripe's API
amfeng
35
52k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
7
330
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Adopting Sorbet at Scale
ufuk
77
9.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Faster Mobile Websites
deanohume
307
31k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
PIXELS & TACTICS @amfeng
None
I REALLY LIKE (J-) RPGS
None
None
None
None
None
None
None
WHAT GOES INTO A GAME?
DESIGN PATTERNS
COMPOSE EVERYTHING
None
Crafty.c("Walkable", { Walkable: function(speed) { this.addComponent("Collision"); this.bind("EnterFrame", function() { if
(paused()) return; if (obstacle() || outOfBounds()) return; // Move the sprite this.playAnimation(this.direction); this.move(this.direction, speed); })
Crafty.c("StrollingEntity", { StrollingEntity: function() { this.direction = randomDirection(); this.bind("EnterFrame", function()
{ // Possibly change direction if (chanceToSwitchDirection()) { this.direction = randomDirection(); } } } });
spawnedMonster .Walkable(5) .StrollingEntity() .Battleable()
Crafty.c("AggroEntity", { AggroEntity: function(player) { this.direction = randomDirection(); this.bind("EnterFrame", function()
{ if (playerInRange()) { this.direction = toPlayer(player); } else if (chanceToSwitchDirection()) { // Change direction this.direction = randomDirection(); } } } });
aggroMonster .Walkable(10) .AggroEntity(player) .Battleable()
grandmaNPC .Walkable(2) .StrollingEntity() .Interactable(dialog)
player .Walkable(5) .PlayerControl()
*-FACTORIES
var Fox = function() { this.hp = 10; this.damage =
10; } var WaterFairy = function() { this.hp = 4; this.damage = 6; } var fox = new Fox(); var waterFairy = new WaterFairy();
var Monster = function(attrs) { // Set attrs } var
fox = new Monster({ hp: 4, damage: 6 });
None
var MonsterFactory = function(csv) { this.data = createMap(csv); } MonsterFactory.prototype.create(type)
{ var attrs = this.data[type]; return new Monster(attrs); }
// During game initialization factory = new MonsterFactory(csv); // And
then later factory.create("fox");
SEPARATE VIEWS FROM LOGIC
THINGS I LEARNED (AND I AM STILL LEARNING)
...ASSETS ARE HARD
None
None
None
None
(https://opengameart.org)
(https://gamedevmarket.net)
(http://pixanna.nl/products)
GAME DEV IS INFINITE
THANK YOU! LMK IF YOU END UP BUILDING A GAME
(: @amfeng @jamescshieh