Adventures of building a 2D tactics RPG in the browser!
PIXELS & TACTICS@amfeng
View Slide
I REALLY LIKE(J-) RPGS
WHAT GOES INTOA GAME?
DESIGNPATTERNS
COMPOSEEVERYTHING
Crafty.c("Walkable", {Walkable: function(speed) {this.addComponent("Collision");this.bind("EnterFrame", function() {if (paused()) return;if (obstacle() || outOfBounds()) return;// Move the spritethis.playAnimation(this.direction);this.move(this.direction, speed);})
Crafty.c("StrollingEntity", {StrollingEntity: function() {this.direction = randomDirection();this.bind("EnterFrame", function() {// Possibly change directionif (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 directionthis.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});
var MonsterFactory = function(csv) {this.data = createMap(csv);}MonsterFactory.prototype.create(type) {var attrs = this.data[type];return new Monster(attrs);}
// During game initializationfactory = new MonsterFactory(csv);// And then laterfactory.create("fox");
SEPARATE VIEWSFROM LOGIC
THINGSI LEARNED(AND I AM STILLLEARNING)
...ASSETS ARE HARD
(https://opengameart.org)
(https://gamedevmarket.net)
(http://pixanna.nl/products)
GAME DEV ISINFINITE
THANK YOU!LMK IF YOU END UPBUILDING A GAME (:@amfeng@jamescshieh