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.6k
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
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
It's Worth the Effort
3n
184
28k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Facilitating Awesome Meetings
lara
51
6.2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How GitHub (no longer) Works
holman
312
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Code Reviewing Like a Champion
maltzj
521
39k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
500
BBQ
matthewcrist
85
9.4k
Designing for Performance
lara
604
68k
A Tale of Four Properties
chriscoyier
157
23k
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