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
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
How STYLIGHT went responsive
nonsquared
96
5.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Facilitating Awesome Meetings
lara
51
6.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Building Your Own Lightsaber
phodgson
104
6.2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
Why Our Code Smells
bkeepers
PRO
335
57k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
860
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