Pixels & Tactics

Adventures of building a 2D tactics RPG in the browser!

1. PIXELS & TACTICS @amfeng
3. I REALLY LIKE (J-) RPGS
11. WHAT GOES INTO A GAME?
12. DESIGN PATTERNS
13. COMPOSE EVERYTHING
15. 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); })
16. Crafty.c("StrollingEntity", { StrollingEntity: function() { this.direction = randomDirection(); this.bind("EnterFrame", function() { // Possibly change direction if (chanceToSwitchDirection()) { this.direction = randomDirection(); } } } });
17. spawnedMonster .Walkable(5) .StrollingEntity() .Battleable()
18. 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(); } } } });
19. aggroMonster .Walkable(10) .AggroEntity(player) .Battleable()
20. grandmaNPC .Walkable(2) .StrollingEntity() .Interactable(dialog)
21. player .Walkable(5) .PlayerControl()
22. *-FACTORIES
23. 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();
24. var Monster = function(attrs) { // Set attrs } var fox = new Monster({ hp: 4, damage: 6 });
26. var MonsterFactory = function(csv) { this.data = createMap(csv); } MonsterFactory.prototype.create(type) { var attrs = this.data[type]; return new Monster(attrs); }
27. // During game initialization factory = new MonsterFactory(csv); // And then later factory.create("fox");
28. SEPARATE VIEWS FROM LOGIC
29. THINGS I LEARNED (AND I AM STILL LEARNING)
30. ...ASSETS ARE HARD
35. (https://opengameart.org)
36. (https://gamedevmarket.net)
37. (http://pixanna.nl/products)
38. GAME DEV IS INFINITE
39. THANK YOU! LMK IF YOU END UP BUILDING A GAME (: @amfeng @jamescshieh