ProcJam Summer 2018 – Pokemon Building Generator – Part 1

Procjam Summer 2018 has started so here I go. This will be a small project to create classic Pokemon style houses. (Guess what I might end up using it for)

This will be a two steps generator, the first thing to do is defining a logical model for the houses. We start by examining some examples to extract the structure and an initial set of variations:

Screen Shot 2018-06-20 at 3.23.33 PM

Structure

  • Blocks of 4 tiles
  • Windows and walls can be placed at tiles, having one tile for padding at every side (available tiles = blocks – 1) * 2, this padding is used to project the shadows of the building.
  • Doors can be placed at blocks, having one block for padding at every side.
  • Distorted perspective, the “depth” of the building is represented as blocks of the ceiling.
  • The last floor gets 2 less available tiles due to roof slant

Attributes:

  • Structure
    • Width: 6 blocks
    • Height: 2 blocks
    • Depth: 2 blocks
  • Front
    • 1st floor
      • Windows: Tiles 1, 2, 3, 6, 7, 8, 9 and 10
      • A door at block 3
      • Wooden wall (1 to 10)
    • 2nd floor
      • Windows: Tiles 2, 3, 4, 7, 8 and 9
      • Wooden wall (1 to 3)
      • Brick wall (4 to 10)
  • Roof
    • Slanted
    • Tiled

Next example:

Screen Shot 2018-06-20 at 3.34.38 PM

Front

  • 2nd floor
    • Bar border

Next Example:

Screen Shot 2018-06-20 at 3.43.19 PM

Structure: The last floor gets all available tiles if the roof is flat

  • Front, First floor
    • Poke sign at block 3
  •  Roof
    • Flat

Let’s confirm our model covers all wanted cases

Screen Shot 2018-06-20 at 3.52.51 PM

  • Structure
    • Width: 8 blocks
    • Height: 6 blocks
    • Depth: 2 blocks
  • Front
    • 1st floor
      • Windows: Tiles 6, 7, 10, 11
      • Doors at blocks 2 and 4
      • Mart sign at block 6
      • Brick wall
    • 2nd floor (…)
  • Roof
    • Flat
    • Tiled

Having this, we can start thinking on our higher level generator, its input will be the type of building and its size. Following are the types of buildings we’ll support: House, Gym, Mart. As for the sizes, they will be: Tiny, Small, Large, Huge.

The output of the high-level generator is a logical model of the building, which is used by the lower-level generator to produce a map of tiles. An example of the 1st output for a Large House would be:

Screen Shot 2018-06-20 at 3.34.38 PM

{
  width: 4,
  height: 2,
  depth: 2,
  floors: [
    {
      wall: 'wood',
      windows: [4, 5],
      doors: [1]
    },
    {
      wall: 'wood',
      windows: [2, 4, 5],
      border: true
    }
  ],
  roof: {
    type: 'slanted',
    material: 'tiles'
  }
}

Let’sa go! We fire subl and produce this:

const Random = {
  chance(c) {
    return this.range(0, 100) <= c;
  },
  range(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
};


const SIZE_RANGES = {
  tiny: {
    minw: 3,
    maxw: 4,
    minh: 1,
    maxh: 1,
    mind: 1,
    maxd: 1
  },
  small: {
    minw: 4,
    maxw: 5,
    minh: 1,
    maxh: 2,
    mind: 1,
    maxd: 1
  },
  large: {
    minw: 5,
    maxw: 6,
    minh: 2,
    maxh: 3,
    mind: 1,
    maxd: 2
  },
  huge: {
    minw: 5,
    maxw: 8,
    minh: 3,
    maxh: 5,
    mind: 2,
    maxd: 4
  }
};

const SLANTED_ROOF_CHANCES = {
  house: 90,
  gym: 20,
  mart: 10
};

const WINDOW_CHANCES = {
  house: 50,
  gym: 20,
  mart: 50
};

// https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

const generator = {
  generate(type, size) {
    const model = {
      width: 0,
      height: 0,
      depth: 0,
      floors: [],
      roof: {},
      type,
      size
    }
    // Size of the building
    const sizeRanges = SIZE_RANGES[size];
    model.width = Random.range(sizeRanges.minw, sizeRanges.maxw);
    model.height = Random.range(sizeRanges.minh, sizeRanges.maxh);
    model.depth = Random.range(sizeRanges.mind, sizeRanges.maxd);
    // Type of roof
    model.roof.type = Random.chance(SLANTED_ROOF_CHANCES[type]) ? 'slanted' : 'flat';

    for (let i = 0; i < model.height; i++) {
      model.floors[i] = this.generateFloor(model, i);
    }
    return model;
  },

  generateFloor(model, floorNumber) {
    const floorModel = {
      wall: '',
      windows: [],
      features: []
    }
    const useableBlocks = [];
    for (let i = 0; i < model.width - 2; i++){
      useableBlocks[i] = true;
    }
    const useableTiles = [];
    for (let i = 0; i  {
      if (!t) {
        return;
      }
      if (Random.chance(WINDOW_CHANCES[model.type])) {
        floorModel.windows.push(i);
      }
    });
    return floorModel;
  },

  getRandomSpace(array) {
    const availables = array.find(x => x === true);
    if (!availables) {
      return undefined;
    }
    const spaces = array.map((x, i) => ({x, i})).filter(x => x.x === true);
    return shuffle(spaces)[0].i;
  }
}

const model = generator.generate('mart', 'huge');

console.log(JSON.stringify(model));

Running it with nodejs gives us a variety of models already:

{
  "width":6,
  "height":2,
  "depth":2,
  "floors":[
    {
      "wall":"",
      "windows":[
        4,
        7
      ],
      "features":[
        {
          "x":1,
          "type":"door"
        },
        {
          "x":3,
          "type":"gymSign"
        }
      ]
    },
    {
      "wall":"",
      "windows":[
        3,
        9
      ],
      "features":[

      ]
    }
  ],
  "roof":{
    "type":"flat"
  },
  "type":"gym",
  "size":"large"
}

 

{
  "width":8,
  "height":5,
  "depth":3,
  "floors":[
    {
      "wall":"",
      "windows":[
        0,
        4,
        5,
        13
      ],
      "features":[
        {
          "x":3,
          "type":"door"
        },
        {
          "x":0,
          "type":"martSign"
        }
      ]
    },
    {
      "wall":"",
      "windows":[
        1,
        3,
        5,
        6,
        7,
        9,
        10,
        11,
        12,
        13
      ],
      "features":[

      ]
    },
    {
      "wall":"",
      "windows":[
        0,
        1,
        3,
        4,
        5,
        7,
        10,
        12,
        13
      ],
      "features":[

      ]
    },
    {
      "wall":"",
      "windows":[
        0,
        1,
        5,
        7,
        8,
        9,
        11,
        13
      ],
      "features":[

      ]
    },
    {
      "wall":"",
      "windows":[
        0,
        1,
        4,
        5,
        8,
        9
      ],
      "features":[

      ]
    }
  ],
  "roof":{
    "type":"flat"
  },
  "type":"mart",
  "size":"huge"
}

Next step is using these models to create the maps of tiles.

Paladin’s Quest LCD

20180509_183241

An entry for the LCD Jam, about 8 hours dev.

JavaScript + Phaser as usual for great quickness. Pretty happy with results, nice feedback received, may develop further afterwards.

Play online here (Source code here)

Screen Shot 2018-05-07 at 7.51.39 AM

The game is a simplified dungeon crawler, classic style roguelike, which emulates (loosely) a LCD game display.

There are 4 different enemies: Headless, Floating Skull, and Phantom. Scattered in the dungeon you will find strong weapons and replacements for your shield, you will need these to survive!

Each level is 3×3 rooms, you must find the exit which is located in the middle of one of the 9 rooms.

Screen Shot 2018-05-07 at 7.51.11 AM

The LCD shapes (i.e. the different parts of the paladin) were made by Giovanny Ramirez, the wiggly dungeon room and the “brick game” frame I made myself.

1884 – Golf over Africa, LudumDare 41

The theme for the Ludum Dare 41 was “Combine 2 Incompatible Genres”. I’m pretty familiar with genre mashup, and I accepted Jim Shepard‘s challenge to jump in.

As usual for the LudumDare, I wanted to do something different than what I always do. That usually means doing something more accessible to the casual public, as well as ditching pixel art, and including real-time stuff and animations.

Here’s what I came up with: (Play online!)

golf

1884, the European superpowers have met to decide the future of the African continent… now their leaders face each other in an Open golf tournament to divide the land between themselves!

Screen Shot 2018-04-24 at 7.01.56 PM
Title Screen

I went for a combination of a Golf game with territory based war game (think Crusader Kings / Europa Universalis, or maybe RISK). It’s made for 2 to 4 players who take turns to play, the first country to occupy 10 territories wins the match.

In order to try to occupy a territory, you must land your ball on it, every turn the player decides the direction and power of his shot. The outcome depends on the stats of his country.

You can also invade other player’s territories, where the success of the invasion depends on the Military stat of each country. Countries also have other 2 stats: Logistics affects how far your shots will fly (with Great Britain being the best on this) and Leadership affects how accurate your shots are.

Game Screenshot
In-Game

Since I knew in advance my time would be extremely limited during the span of the compo, I went for my usual toolkit: Phaser2 + ES6. All art was done on GIMP, basically a lot of repetitive work extracting the different countries from a colonial map of Africa, and some flags and UI stuff.

Africa-colonial1
Colonial Africa

Due to the “weird” square and “high” resolution of the game (as in being about 800x800px, high for browser games standards) ended up doing a lot of work to make sure it would display fine on browsers with a smaller window height (you’d be surprised this is still very common in 2018) as well as the fancy retina displays which always mess up with scaling calculations.

This one went from ideation to fully complete product in less than 12 hours. I’m really happy how it turned out. Here are some areas where this could be expanded in case I work back on it ion the future:

  • Adding a “zoomed” version of the territory the player is doing his shot from. And an animation of the country leader shooting-
  • Making the viewport landscape and adding scrolling (and maybe a scaled map)
  • Enhancing the appearance in general.

Rogue Program – Github GameOff

(I must have posted this some weeks ago, but I’ve been a bit busy!)

Some months ago, a conversation on twitter inspired me to make a game inside a character based UI from the 80’s…. for some reason.

twitterChallenge

I decided to go ahead and try to implement the idea as an entry for the Github Game Off, whose theme for this year was “retro” (very fitting). Since github provided the location for the Roguelike Celebration (and was publicizing the jam at the event), I felt more encouraged to participate.

TitleScreen

In Rogue Program, you are a character living inside the Alameda Video Rental System. The Rogue Program has activated and is turning the characters of the system into vicious monsters. Adventure through the different modules and menus of the system looking for clues and tools, while learning what has happened to the outside world.

rp1

I went for a P1 phosphor green monochrome 80×25 CP437 characters appearance, using a fixedsys font and unicodetiles.js. I used my JSRL boilerplate as a foundation but despite looking as a traditional roguelike, the game is more of a simple cRPG with fixed locations and plot (REXPaint by GridSageGames was a hugely helpful tool to draw the maps). I think however that it should provide a fun time and a decent challenge.

rogueProgram

Source code is available at Github. Play now at itch.io and don’t forget to report thy feat if you manage to win 🙂

JSRL – JavaScript boilerplate roguelike released

Well, I decided to release this based on my work this year on Monster Trainer Roguelike; one of my first mistakes was spending time during the 7DRL to build a simple generic roguelike engine as a basis for the game… the question is, I never released it in such simple form! I decided to release it as I think it may be helpful for devs to use as a starting point for their roguelike or character based games!

It’s now in github at https://github.com/slashman/jsrl, you can also check the online demo here

If you are curious what kind of games can be created from it, check Monster Trainer Roguelike

boiler3

What is this about

A very bare bones roguelike with a character based display

Features

  • Player can walk around
  • Raycasting Field of View algorithm
  • Player can move between persistent levels
  • Enemies move around chasing the player
  • Player can pick up, drop and use items (including using items on a given direction)
  • Player remembers visited maps
  • A simple Being class based on Races definitions, with “random” and “follow player” intents
  • A simple Item class based on Item Type definitions
  • Infrastructure for Level Generation
  • Line wrap text boxes

How to use

  • Clone the repo
  • Delete .git
  • Create awesoem gaem

Credits

Uses unicodetiles for IO – http://tapiov.net/unicodetiles.js/

OpenArthurianX6 dev update

Forgot to post here about the latest development of OpenArthurian which actually happened around a month ago 🙂

After that first dev stream I mentioned on the last entry, I did 5 more

Combat is almost done now, pending only adding some projectile effects for ranged combat. Next up is working on level transitions and the chunked world model.

Exodus Destiny also did some work on the game, finishing a first iteration of the Talk module as well as the Pick up / Drop functions (along with the Inventory)

Unfortunately I won’t be able to work a lot in the project for the next couple of weeks since I’ll be flying to San Francisco for the Roguelike Celebration and there’s another private game dev project I’m working on, but I’ll come back strong after that, I promise!

OpenArthurianX6 – Dev news

After all the craze that was 2017 js13k, I went back to my duties with OpenArthurianX6.

So far I’ve been working on the combat system mostly. The game features an hybrid action mode, the “mobs” move around the grid based map, deciding what to do every x millisecond (at first restricted to moving around or sitting idle). First task I took was allowing the transition to combat mode, in which the mobs take turns to act.

To achieve this, I added a synchronization phase where all mobs finish their moves before the actual combat state is established.

Next up was adding the “attack” action, but in order to make it work, a major refactor on how the actions flowed was done. Everything was changed to use promises instead of timers. This will allow to more easily add other actions in the future as well as parallel input modes (keyboard/mouse)

Also implemented some damage calculations based roughly on Ultima 6, and added the corpses to the ground when killed.

Finally, added some simple AI for mobs to seek enemies based on their alignment, for now they just seek the player and attack him. The actual attack action was pretty straightforward to implement for the mobs since they are the same as the player 🙂

I streamed the development of this latter part, you can check it in Slashware’s youtube channel here!