Trailer for the Roguelike Celebration 2018

The Roguelike Celebration is happening again this year, October 6 and 7. I will be flying to SanFran to assist and also give a talk about the History of Roguelikes.

Had an idea running on my head for a while to make a “trailer” for the event (no one asked me for it). At first, I thought of creating a playable classic roguelike using my JSRL roguelike template. I actually did create the foundations for it (as in walk in a predefined map), but it lacked the cinematic potential for a short trailer. In any case, I integrated the “torch” effect from the unicodetiles.js example into JSRL, which may be useful. You can check out the integration here.

Screen Shot 2018-08-10 at 7.30.17 AM

Then I had another idea and I just couldn’t be at peace until I implemented it. I think it occurred to me a day while driving and listening to the Mega Man III OST. I thought I had found the perfect tune for it. So, even in a busy week with lots of work, I just had to do it.

The trailer features the awesome speakers’ lineup in a “robot-masters” NES Megaman stage selected style.

I implemented it using JavaScript and Phaser, you can check the source code here and the demo running live here

Of course, there’s little structure to the project since it was meant to be a quick job (and is also pretty simple). Most of the relevant logic can be found in a single Object, the Game state. I set up a stage with a black background and the gray strip, as well a Sprite object for the character and 4 text fields. I used a Megaman 10 font (I had found another one for Megaman 2 but for some reason, it could not be loaded as a web font), I performed a simple centering function based on each line’s character count to keep the characters as sprites in the grid (thus getting a bit close to being a NES “background sprite”?).

There was also a simple “particle” animation in the background, instead of stars they were small @ signs because, you know, roguelike. I used the same color palette used on the Roguelike Celebration logo for them.

Of course, the most fun part was doing the pixel art for the speakers. I used a bunch of Mega Man 2 robot masters as a base and then I proceeded on tweaking them for each speaker. The ones I know in person where easier, for the others I had to do a bit of stalki Internet research, I hope I managed to capture their likeness.

Finally, I reused the “Retro TV with scanlines” from Cat Cafe.

 

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!