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
How to train your dragon (web standard)
notwaldorf
95
6.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
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