ArcherFire: Duet of Aces – js13k 2018 – Part 2

JS13k 2018 has gone by! this is the second of a series of posts detailing my journey, as well as the structure of the game I built. You can play it online here!

If you haven’t, check part 1 here

Day 4

First thing I did was fixing the build scripts since I really needed to know how I was doing vs the 13KB limit (last year I spent a lot of time by the end of the time-frame, removing things). I figured out the build problems by checking the script for Lost of Asterion; I had to replace a dependency (gulp-uglify) with the ES6 ready version (gulp-uglify-es) since I was using ES6 features in my code (cannot live without arrow functions now). The zipped archive was 5.36KB, and I had 46 hours to go.

I created a list of priorities in Trello, as I said there was a game there already, so what was left was polishing some rough edges and add fancy stuff. The last missing core thing was making the levels consistent (that is, they should be the same every time the player plays). Of course, the trick because of the size restrictions is not having the levels hand-designed but rather using a seedable (and small) pRNG, I ended up using an implementation of  Park/Miller LCG based on this.

function LCG(s) {
  return function() {
    s = Math.imul(16807, s) | 0 % 2147483647;
    return (s & 2147483647) / 2147483648;

I seeded it with 13312, and it’s used only for the enemy wave generation.

Another annoying thing I was pending fixing was replacing the temporary setTimeout based timers with something that relied on the game update cycle instead so that the game wouldn’t go bananas when the animation was paused (say because the game’s tab became inactive) but the timers kept running. I added a simple function to the RAF loop to keep track of a list of timers on every frame update, reducing a timeout value by the update delta, and executing a callback when it reached zero.

Next up was showing the “current wave” in the UI, so that players could have a sense of progress besides the score so they could brag about being able to reach wave X. This was also used to increase the difficulty of the waves, so the further the player is the harder the enemies and the shorter their reaction time (so they shoot more bullets)

There were some weird issues where mobs were being “killed” out of nowhere, I thought this may be due to the way they were being sliced out of the lists during the update phase which might cause the wrong mob to be deleted. I changed it so that when a mob’s update function deemed it necessary for the mob to be killed, it is marked and then all the marked mobs are deleted, instead of doing it on the spot. It seemed to work.

Also added some cosmetic changes on the explosion SFX, changing the colors so that it looked a bit darker and different when fizzling, and a scaling effect so the ships would look like they were “landing” on the game (but it didn’t look very good)

Finally, continuing with the idea of adding a music track, I asked on the js13k slack and was lucky to have Ryan Malm offer to create a track for the game, as long as I could set up SoundBox on it.  So I did that and added one of the sample tracks.

Screen Shot 2018-09-18 at 10.34.22 PM
SoundBox in action

Day 5

The final day of development was long, but not really too crazy compared to last year.

I proceeded to add more variation to the different enemy formations, adding the following:

  • Enemies coming from below
  • Horizontal row of mines
  • Vertical row of mines

I also did the best I could to enhance the appearance of the turret “platforms” and the mines.

Designing the appearance for the enemies

Added some planets to the background, they are a circle filled with a gradient, their generation is tied to the wave generation so they serve as milestone markers to see how far you’ve gone (so far I have only been able to reach the second, purple planet, in my highest score)

Did some playtesting and balanced the difficulty a bit, then, since the game bootup was a bit crappy, I added a “loading” screen to cover the process of converting the soundbox script into a WAV stream, in turn, I also added a simple title screen with the name of the game, some credits, and instructions. This required adding some “mode” handling to the game and a simple state machine.

Was getting close to midnight when I got the theme song by Ryan, it was awesome! because of time constraints, it was a bit short (about 15 seconds long) but it did a great job at enhancing the atmosphere of the game.

It should be noted that this 15 seconds track, including the whole “library” to play it, is 2.5KB of compressed source code. Compared that to 361 KB for the OGG export. It’s really wonderful.

I did some work on the player bullets, changing them from red balls to missiles, using a different sound effect for them, and throttling the fire rate so it was more controlled and predictable. Also, since I still had plenty of space, added sounds for the explosion when a ship was destroyed, and a beep for starting the game.

Continued with small tweaks, removing the “ships landing” scaling effect which didn’t really look too good, changing the keybindings for the “down” key for player 2 to be “5” instead of “2”.

The game was almost ready to ship, I did some basic CSS styling for the containing page (black background, centered canvas), but more importantly scaling the canvas to 100% height so that it looked good on most horizontal display cases.

I hesitated a lot, but in the end, decided to jump into allowing the player to restart the game without having to refresh the page when dying. Anyone who has participated in a jam knows how tricky it can be to reset the game state, especially if you didn’t design for that in advance. But I went ahead and did it, and I think being able to restart quickly  became an important part of the game (and makes it look much more polished)

As part of the final playtesting, I added “shield” to the ships so the player can take 3 hits before dying instead of exploding instantly, and increased the acceleration so it’s easier to dodge bullets. I also fixed an issue with the Numpad not working in Safari and Firefox


Coming soon, a blog post detailing the complete structure of the game, and some final thoughts!

ArcherFire: Duet of Aces – js13k 2018 – Part 1

JS13k 2018 has gone by! this is the first of a series of posts detailing my journey, as well as the structure of the game I built. You can play it online here!

Before Coding

I wasn’t really sure what to do, I actually was wondering if I was going to be able to participate at all, but the weeks before coding I toyed in my head with several different ideas… one of them would be a mobile entry based on my Energy Radar project (which is inspired by Pokemon Go), running completely offline but allowing players to interact and capture monsters as a team. I decided against it because of it being maybe too big in scale.


Another one would have been an offline life simulator, someone living on the forest, fishing, something more of an experience than a game since there would be little stress, this would have been more heavy on the graphical side so I abandoned it (more so as the deadline was getting closer)


Finally, had an idea of a non-linear “Space shooter”, keeping some of the Energy Radar ideas on offline interactivity, players could fly from planet to planet; once in a planet, they would input a code from another player on the same planet, which would allow them to advance on the plot.


Knowing that I may very well wound up doing something completely different, but I had to start somewhere, I went with this idea.

Day 1

At first, I tried to use source from Lost in Asterion (my js13k from 2017), but lost a lot of time. I went instead with a fresh copy of js13k boilerplate. I modified the example and was able to have a static starfield in little time.

Since this was going to be a non linear shooter, and I thought having a “lerping” camera effect would be cool, I invested a lot of time trying to make the “camera” work (again, based on Lost in Asterion). It worked, almost, since I wasn’t really tweening it but rather handling it as an object on-screen with acceleration and position, so it was hard to make it “stick” to the player once it reached him.

I also added simple keyboard input to move the “ship” around, and with the camera following it, it was a rudimentary space scene.

Screen Shot 2018-09-03 at 11.05.36 AM.png

Day 2

After giving it some thought in my head, and reading my postmortem from 2017, I decided to go on a different route. I would instead focus on making a simple arcade game, and use the 13K to add as much eye and ear candy as possible.

I ditched all the work that I had done in the camera since it was now going to be a linear game (and it wasn’t really working very well)

With a more clear vision of what the game was to be about, I implemented a lot of things,

  • Collisions between player and enemies.
  • Bullets killing enemies, increasing the player score.
  • Removing mobs when out of the screen (stars, enemies, bullets).
  • “Serial rendering” of mobs allowing potential complex representations.
  • Render score with LCD like display.

Since I needed something to test my “rendering” system, I decided to design the player ship, I based myself on the ship from the original ArcherFire made in QBasic in 2002.

Screen Shot 2018-09-13 at 9.30.34 PM
Original QBasic Archerfire, 2002

Doing vectorial art, however, is something I don’t have any experience with. I can do _some_ pixel art, but this is a different beast. Plus I had to manually input the sequence of commands to draw each shape. I did the best I could with the little time I had.


In the end, this design is represented as follows in the code:


(Note that this is meant to be only half of the ship, the other half is drawn mirrored)

Since I was already drawing a scaled version of it, I figured I’d try to include a practical 3d looking effect when turning the ship, it did look pretty good.

Tried to build the game by the end of the day to see how I was doing with the size but found out there was a problem with uglify which didn’t let me thru.


Day 3

Since I was no longer going for the “offline social” component, I wondered how to incorporate the theme. One obvious option was to provide hotseat multiplayer, and I ended up adding that.

Made enemies being able to shoot at the nearest player, and added the infrastructure to be able to create enemies given a set of parameters. Also added enemies cruising from left to right of the screen, and platforms with 4 mounted turrets.

Added explosion effects, since I didn’t have any tweening library and the rendering was being done manually, had to implement the explosion animation by drawing an expanding circle which would them be “hollowed” when dissipating. Drawing a “hollow” circle in canvas context2d was not as easy as I thought! I ended up using a weird trick to compose the path to fill: Draw the outer circle clockwise and the inner one counter-clockwise. I still don’t understand how that worked.

For SFX, I included again the good old trusty jsfxr. It keeps being useful even after years of not being updated. I added sounds for the explosions and the firing of bullets.

I saw that I still had plenty of space left so I began wondering how to include music. I tried minimusic, set it up and made it work inside the game with a test melody, but was unable to come up with anything half decent (guess why, I’m not a musician!). I left it there, asking a friend to see if he could maybe device something out of it.

Also designed one of the enemy ships (again based on ArcherFire 2002). I tried to implement some way to “rotate” its rendering but after spending some time on it gave up.

Finally, I added one first version of the “wave generator”, that is the thing that puts up new enemies on the stage as the player goes thru. After putting that I found myself with a rudimentary but complete game that someone might even enjoy!


Journey onward to Day 4 and 5, and then a detailed rundown of the game’s structure and some conclusions and thoughts!

OAX6 Source Code Released, Instructions to create a game.

The source code for OAX6 can now be checked out by campaign backers as defined in their perk level.

It is still early, but even at this stage, a simple game could be created! I hope some of them get to play around with it and come back with suggestions. Of course, as development continues it will become easier (ultimately providing editing tools for this) and more complex games will be able to be created.

Below are the current, 0.1 instructions to create a game using OAX6:

How to Create a Game Using OAX6


This guide applies for v0.1, first version publicly available to backers. We are in a very early stage still, the engine is limited both in what it can do and on how easy it can be used.

This build is provided for the following reasons:

  • So you can fulfill your curiosity on how the game works.
  • So you can start having an idea of the capabilities and format of the engine for your future projects using it.
  • So that more people (who cares about the project) has access to the source in case something terrible happens.


After cloning the repository

The default scenario should show up in the browser.


Tiled maps are saved on scenarios/wod6/maps.

Make sure you are using uncompressed JSON format.

The maps should have the following layers:

  • Solid Tiles: Any tile in this layer is considered as solid when loaded on the engine
  • Mobs: Tiles placed here should have at least an ‘id’ custom property, pointing to a valid MobType. It can additionally have a type, which can be ‘mob’ or ‘npc’, if the type is npc, then it should have a NPC id instead of a MobType id
  • Buildings: This and the following 4 layers don’t have any logical effect, use them to make cool maps.
  • Vegetation
  • Objects
  • Terrain

Scenario Data

Set your scenario data in scenarios/wod6/Info.js


  • minuteOfDay: Determines the stating time
  • map: Points to the list of maps below (name)
  • x: Starting player position
  • y: Starting player position
  • party: List of NPCs in the starting party, id, x and y
  • scene: Points to the list of scenes below


  • name: Identifies the map
  • filename: Filename in scenario/wod6/maps/


Key is the scene key, each scene is a list of string which are shown in succession


Defined in src/js/data/Appearances.js

  • The numbers refer to indexes on the tileset
  • The mob appearances include 4 frames for each direction


Defined in src/js/data/Items.js Each item can have the following attributes:

  • id: Identifies the item
  • name: Description of the item
  • appearance: Referencing an item appearance on Appearances.js
  • flyAppearance: Used when the item is “flying” (for example when thrown)
  • throwable: Whether the item can be thrown
  • range: Max distance for throwing the item
  • flyType: ‘rotate’ or ‘straight’ animation to use when throwing the item
  • damage: Points of damage caused


Defined in src/js/data/MobTypes.js

  • id
  • name
  • appearance: Points to Appearances
  • hp
  • damage
  • defense
  • speed: Determines the order in the queue for combat mode
  • corpse: References Items.js, item placed on the floor when the mob dies
  • intent: ‘seekPlayer’, ‘waitCommand’, ‘wander’, ‘combat’

NPCs – Basic Data

Defined in src/js/data/NPCs.js

  • id
  • name
  • type: Points to MobTypes
  • alignment: ‘b’ for friendly, ‘a’ for enemy, ‘c’ for neutral. Likely to be revised
  • weapon: Points to Items
  • firstTalk: Number, will talk to player first if he gets closer than this.
  • intent: Same options as MobTypes

NPCs – Conversations

The conversation trees are defined in the “dialog” attribute of each NPC.

They are a list of objects, each object is a dialog fragment, tied to a keyword.

Each dialog fragment can have either

  • A list of dialog pieces (see below)
  • A list of dialog variants (see below)
  • A synonym keyword

A dialog variant contains a condition with a flag name and value, and a list of dialog pieces. If the condition is met the conversation will follow these dialog pieces.

A dialog piece can be either

  • A string of text
  • An object with the following types:
  • “event” is similar to a normal text, except it describes something happening instead of something the NPC is saying.
  • “dialogInterruption” is similar to a normal text, except another NPC is talking
  • “endConversation” finishes the current conversation
  • “joinParty” makes the NPC join the party
  • “setFlag” sets a global flag to a given value

There is a special dialog fragment marked as “unknown” which is used when the keyword input by the player doesn’t match any dialog fragment or variant.

Assembling a build

Once you have all data set, you can execute the script, then the game package will be available in the build directory (open the index.html file using a web server)

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.


OpenArthurianX6 – Pushing dev for Milestone 1

Still not there but it’s been a lot of work. As I worked towards the goals for Milestone 1 I found quite a bit of work was needed on the dialogs and the mobs AI.

Screen Shot 2018-08-04 at 10.20.31 PM


  • “The Law of Virtue” scenario
    • New test map (Forest clearing)
    • Cutscenes
    • Asteroth conversation
    • Shamino conversation
  • Scenario setup
    • Read starting map, starting time of day and starting player position from Scenario Info
    • Allow placing NPCs and Mobs on the tiled map
  • Added support for simple “Cutscenes”, that is sequences of text dialogs to tell the story.
  • Dialogs
    • Support multiple fragments of dialog per keyword
    • Add variants per keyword based on player flags
    • Add support for “triggers” executed inside the conversation
    • Add triggers to join the party, end conversation and set player flag
    • Fall back to “unknown” dialog if no match on variant
    • Merge triggers into the dialog as objects so they happen sequentially
    • Add support for dialog qualifiers (in addition to normal dialog lines)
      • Dialog interruption: for other NPCs to participate in.
      • Event: For event descriptions
    • Add support for keyword synonyms
    • Allow NPCs to start a dialog when getting closer
  • AI
    • Make friendly mobs act differently than party members
    • Make unfriendly NPCs have a minimum range before chasing
    • Implement intents for mobs
      • seekPlayer: Do nothing waiting for the player to be on sight
      • waitCommand: Do nothing.
    • Implement subintent logic based on intent.
    • Use direct LOS to define if can track player.
  • Combat
    • Speed up combat
  •  Art
    • Added Shamino and Soldier Mob appearances

Source Code

Funders with early source access privileges will be given access to the source code repository on request starting now!

Dev Streams!

Note that some work was done offline, of course.


The history of “Ultimate Collector”, Garriott’s stab at social gaming

In 2018, Portalarium is mostly associated with Shroud of the Avatar, the controversial multi-million dollars crowdfunded MMO / Single Player computer RPG. With all the noise it has caused, it’s easy to assume this game was Garriott’s comeback project after his long post-Tabula-Rasa hiatus.

However, before diving into the first new millennium iteration of his “Ultimate RPG” dream, Richard was strong on taking his newly founded company, “Portalarium“, into something completely different: games in social networks, and their efforts ultimately led them to partner with one of the biggest names on the scene: Zynga.


As you might have guessed, the game is now long gone. It actually never managed to have a broad public launch (although a couple of videos in youtube about hacking the game indicate it might have been shortly available to the public). Portalarium removed all information about the game from their website and killed all of its presence in social media, and it seemingly never made it past the threshold to be included on Zynga’s social games portfolio.

Still, the history of the development of this game is intertwined with Richard plans for the “Ultimate RPG”, which makes it interesting to imagine what Shroud of the Avatar could have been.