$30 off During Our Annual Pro Sale. View Details »

Pixels & Tactics

Amber Feng
October 07, 2015
9.2k

Pixels & Tactics

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

Amber Feng

October 07, 2015
Tweet

Transcript

  1. PIXELS & TACTICS
    @amfeng

    View Slide

  2. View Slide

  3. I REALLY LIKE
    (J-) RPGS

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. WHAT GOES INTO
    A GAME?

    View Slide

  12. DESIGN
    PATTERNS

    View Slide

  13. COMPOSE
    EVERYTHING

    View Slide

  14. View Slide

  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);
    })

    View Slide

  16. Crafty.c("StrollingEntity", {
    StrollingEntity: function() {
    this.direction = randomDirection();
    this.bind("EnterFrame", function() {
    // Possibly change direction
    if (chanceToSwitchDirection()) {
    this.direction = randomDirection();
    }
    }
    }
    });

    View Slide

  17. spawnedMonster
    .Walkable(5)
    .StrollingEntity()
    .Battleable()

    View Slide

  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();
    }
    }
    }
    });

    View Slide

  19. aggroMonster
    .Walkable(10)
    .AggroEntity(player)
    .Battleable()

    View Slide

  20. grandmaNPC
    .Walkable(2)
    .StrollingEntity()
    .Interactable(dialog)

    View Slide

  21. player
    .Walkable(5)
    .PlayerControl()

    View Slide

  22. *-FACTORIES

    View Slide

  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();

    View Slide

  24. var Monster = function(attrs) {
    // Set attrs
    }
    var fox = new Monster({
    hp: 4,
    damage: 6
    });

    View Slide

  25. View Slide

  26. var MonsterFactory = function(csv) {
    this.data = createMap(csv);
    }
    MonsterFactory.prototype.create(type) {
    var attrs = this.data[type];
    return new Monster(attrs);
    }

    View Slide

  27. // During game initialization
    factory = new MonsterFactory(csv);
    // And then later
    factory.create("fox");

    View Slide

  28. SEPARATE VIEWS
    FROM LOGIC

    View Slide

  29. THINGS
    I LEARNED
    (AND I AM STILL
    LEARNING)

    View Slide

  30. ...ASSETS ARE HARD

    View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. (https://opengameart.org)

    View Slide

  36. (https://gamedevmarket.net)

    View Slide

  37. (http://pixanna.nl/products)

    View Slide

  38. GAME DEV IS
    INFINITE

    View Slide

  39. THANK YOU!
    LMK IF YOU END UP
    BUILDING A GAME (:
    @amfeng
    @jamescshieh

    View Slide