This is something I’ve wanted to do for a long time; over the past years, I’ve complainedrepeatedly about how I worked so much on Pixal, and then I lost the direction of the project and it all went to hell. Well, it’s about time to fix that.
Let me introduce you to Legends of Kramora: The Golden Age of Ibaran – A prequel to Wrath of Kramora (otherwise known as Ananias), this story takes place years before the great serpent arose from the underworld to destroy the world; fighters from all around the world travel to Ibaran, to compete in the tournament and gain fame and fortune.
The first task (besides making sure this beast works fine in modern infrastructure) is to remove the World Browser – It’s worth months of work, and yet the scope creep it brought killed the project around 2010. I’ll focus instead on providing fun combat and tournament mechanics, making an entire game around it.
This will take a little bit; for good or bad, the SVN history of the project was lost, so there’s no way to automatically revert the months of work that went in; instead, I have to manually restore things that I had changed already with the idea of them working in a less abstract way, tying them to “buildings” and locations inside the world that you could navigate with your Expeditions (for instance, the Colosseum was a building there, so I have to manually restore it into a list in the profile page)
In any case, I feel happy that I was able to revive this project and it didn’t take a lot of time. I’m hoping some people will still find it interesting after these years; I myself still look forward to playing a light browser-based game in the dead times of the day.
Of course, another important thing I’m doing is adding a light narrative to this and tying it to the rest of the Kramora series. I believe this is important since the original Pixal didn’t have any setting and was maybe a bit too abstract.
It’s also amusing how much of how this codebase works I am able to remember; I already had to fix a bunch of 10 years old bugs that lay dormant in the code.
A public beta version will be available soon!
Aprox. Work Time: 246 days, 727:00 (725:00 + 2:00)
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!
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/MillerLCG 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.
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
Next up, a view of the complete structure of the game, and then some final thoughts!
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!
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.
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.
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!
I decided to revive the “My Brazil World Cup” project from 2014, thinking it would be quick and easy to set it up for 2018. It wasn’t quick… collecting all the info and the pictures, setting everything back up… in any case. Here it is: worldcupalbums.com
In this web app, optimized for mobile browsers, you collect virtual stickers themed around the upcoming World Cup trying to complete a collection. You buy stickers using “Russios”, which you obtain by spinning a roulette every 10 minutes. You can trade repeated stickers with your enemies.
This is heavily based on a tradition (mostly South American?) of collecting stickers to fill an “album”. (I guess it’s the equivalent of Sports Trading Cards in North America). Panini has traditionally published and distributed the official FIFA World Cup Albums for ages (Since Mexico 1970). I grew up seeing my father do this, and the tradition keeps going.
There’s also an official virtual album, but mine is better.
About 5 years ago, I set myself to finish Pixal. One of the big things I had to do was creating a huge world which players could explore with their expeditions.
I begun by pasting together the output of several runs of a fractal/voronoi terrain generator, doing small modifications for them to fit.
The whole world
In order to ease the edition of the world, I divided it into 350 32×32 tiles sectors (total world size: 800×448 tiles). My sister was entrusted with the huge work of creating the individuals maps by hand.
The world divided in 350 sectors
In addition to the ground level, we also created a subterranean / underwater map and another one for the “skies”.
There was a server side component which swallowed the TMX maps into the database and allowed players to browse the world. Then, to make scale even grander, I allowed zooming into each one of the tiles, generating another persistent map (32×32 I think), in which you could create your own buildings, or explore caves (randomly generated using CA). Then the project collapsed under its own weight, even though all this hard mapping work was finished.
In the end, Pixal was never released, and this world was left unexplored.
Today I decided to try to include some of my oldest game projects into my page at http://slashie.net. A couple of them were ArcherFire and NeoArcherFire, the first games I created which included graphics.
Bundled with the original ArcherFire, I found a file which was supposed to be its source code. I tried checking it out: it was a .BAS file so I thought it’d be a plain text file with QBasic source code… I was wrong, it was a binary file.
Then I remembered back then the version of “QBasic” I used allowed saving the source code as binary files for faster loading times. I downloaded QBasic and tried to load the file (Using DOSBox, of course). It failed, unable to read the binary contents.
I googled a bit and refreshed my mind: back then I was using QuickBasic, not QBasic.
[from wikipedia]
A subset of QuickBASIC 4.5, named QBasic, was included with MS-DOS 5 and later versions, replacing the GW-BASIC included with previous versions of MS-DOS. Compared to QuickBASIC, QBasic is limited to an interpreter only, lacks a few functions, can only handle programs of a limited size, and lacks support for separate program modules. Since it lacks a compiler, it cannot be used to produce executable files, although its program source code can still be compiled by a QuickBASIC 4.5, PDS 7.x or VBDOS 1.0 compiler, if available.
I downloaded it and was able to check the source code, finding out that it was Neo ArcherFire, the enhanced version which used DirectQB, and my final game project using any BASIC variant!
I made this game back on 2003, the source code is surprisingly organised 🙂
I exported the binary “project” to ASCII, and uploaded it to github, if you are curious you can check it out here, but I’d recommend getting MSQuickBasic so you can navigate the SUBs easily 😀
This game was powered by DirectQB, a lib released in 1999 by Angelo Mottola which greatly extended what could be done by QuickBasic, you can find more info here.
Although this wasn’t really my first game, I think it’s very unlikely for me to find any older source code, it was lost in my old 486… may be some day I’ll find a rusty diskette with it? Some of the things I miss the most are:
The source code of the original ArcherFire (with graphics): The only surviving compiled version has you starting with 1 hit point left, so it’s pretty hard 😀
The romhack for translating Final Fantasy I to Spanish, which I recall was a lot of work and was (almost?) done
The non-graphics versions of ArcherFire, as well as some earlier console-mode games I made including a set of “athletics” games (I recall one being about 100 meters dash), another adventure game where you could move a happy face around, and a puzzle game similar to Dr. Mario.
Eight years ago, back on November 2007, I started a project. I wanted to do something different than I used to do back then.
I worked on the project for about 3 years investing about 700 development hours and learning a lot in the process, but the project never went public.
I can think on two reasons why it happened:
I never had a clear idea on what the game was going to be
I started the project thinking on doing something pretty simple so you could create a virtual character and buy clothing for it.
Then, for some reason, I added combat to the mix, probably because I just have something with Fantasy medieval combat.
But I actually think that choice was ok. Developing a doll-dresser was not very exciting in the end. The combat model evolved becoming complex and interesting, and I put a tournament in place where people could participate. By then I was using the open source graphics from Dungeon Crawl.
By the end of year 2, the game was actually pretty fun, or so it seemed based on playtester’s feedback. You could create a group of pixals, make them participate on a tournament and buy equipment for them. Fights were based on a deck of skills you had, where you earned new cards as you leveled up. Good players got weekly medals, new equipment was spawned daily on the stores. Denzi, one of biggest contributors to the pixel art of Dungeon Crawl Stone Soup had joined the team and provided a slew of awesome pixel art. (hint: Most of it is being reused for Ananias today) Everybody was happy.
However, fueled by player feedback and some books I had read on the subject of virtual worlds, I wanted more.
It all begun with the idea of providing alternate activities other than fighting; I toyed with the idea of the city where the fights took place, and now there were other buildings where the pixals could work for money. The idea started evolving to the point where I wanted to create an entire world where expeditions of pixals could explore the world, build settlements, trade stuff. A virtual economy, a world browser.
I failed.
Not only was the world browser a huge undertaking, I also didn’t actually know how to make exploring the world an interesting adventure…. I had people creating a huge 3 levels map for the world which I never ended up using. I added a zoom feature, including random cavern generation for the detailed terrain and a rudimentary system for placing tiles into the world, which would eventually become buildings. I then tried adding guilds (?). None of that made exploring the world fun.
If I had had a clear goal on what the game was going to be, I could have released on 2009, at least as an initial version; developing the world browser was not needed to have a working game, and actually unleashed a ton of risks into the project which actually happened. Which brings me to the next point…
I underestimated the effort.
Developing the world browser was just too much for me… just from the technical perspective back then we didn’t have widespread and readily available tools for bidirectional interaction with the server from a browser (such as modern websockets), but that was only part of the problem, I also lacked the skills required on game design and world building to create a compelling experience and an interesting world.
I tried to work around this by planning, separating things into modules, estimating, organizing stuff. But in the end I hit a point where no matter how I tried to look at the project, I could see no way forward.
Eventually, I ran out of energy and abandoned the project, just to pursue a second one which would suffer a very similar fate…
…but that’s a story for another day.
—
From time to time, I feel the urge of rolling all the world browser thing back, and do a public release of just the tournament… but times have changed, there’s much more competition now… maybe no one would care.
Fourth year in a row, I’m activating misilleta.com; it’s a facebook app where people creates flowers arrangements and shares them with friends, did it on my own for a local tradicional event in my city (Medellin Flowers Fair)
This year someone told me to make it so that the app could create the flower arrangements automatically using the user’s profile picture, so I set into it 🙂
I’m using the basic php gd functions for image handling, basically obtaining the image data from a URL, scaling it, adding contrast and then going thru the pixels, looking for the flower that matches its color best (using a simple less-distance criteria on the RGB cube) and placing with a bit of a random variation into the virtual flower canvas; then connecting to the already existing infrastructure for handling the flower arrangements.
In the process I found out the flowers that I had there were not covering enough hues (so the pictures looked a bit crazy)
I had to color some of the flowers to cover more of the green and blue hues, as well as black and grey.
Well, now that the world cup has started, I gotta mark this project as finished. I also did a drawing for a tshirt among the people who completed the virtual album.
What were the results? I learned a bit about JQueryMobile, managed to create an application targeted to the local audience and got some little exposure. I also ended up with the “Collections” framework I might possibly do something with later on.
Another financially unsuccessful project, but at least friends and family had a little bit of fun.
Slashie's Journal 
