Creating a HTML DOM game!
Starbase Devlog #1
A little back story
I love making prototypes with new technology. It’s basically all I do. I’m studying interactive technologies and game development so I usually build games in Unity, Flash, and Java, but last summer I was an intern at Adobe and got to create some amazing web application prototypes.
For my final studio project I’ve decided to merge both game and web development and create a HTML DOM game! Kind of inspired by the famous Cookie Clicker and Candy Box web games. This means there is no canvas involved, just straight up GPU-powered HTML, CSS, and JavaScript. To shake things up even more I’ve started learning Grunt and Sass to speed up my web development workflow!
And that’s what I’m going to be talking about in these posts: my development on the game (currently named Starbase), what challenges I’m facing, and how I solve them. You can also check out the source code.
I love pixelated games
It’s usually the art style I use whenever I work on a game. That’s normally because I can draw small pixel stuff way faster than detailed realistic or stylized textures, and I like to work fast.
So, naturally I wanted to make Starbase a pixelated game. Big problem. Google Chrome doesn’t support point-filter upscaling, unlike every other browser. Chrome is my default browser! But I couldn’t be defeated so soon. I needed to come up with a way to enlarge my pixel art without relying on Google Chrome to upscale my art correctly.
Enter Grunt. Using some awesome plugins and a simple configuration JSON file, I’m able to automatically upscale my images, compile and compact my scripts, and Sass files and move them to a build folder. Using a Node.js server with Connect, I can test my webgame on my computer without a more complicated server. I strongly recommend learning Grunt!
Getting around
I’m drawing a lot of inspiration from Nimblebit’s Tiny Tower. I want the player to have a starbase full of little people walking around and moving between rooms. In order to have the units move, I’m using CSS3 transitions, animations, and transforms. Because my web game is all JavaScript (and jQuery) I wanted to use a library that would handle some of the more complex transformations and timing elements for me. Luckily I found the amazing Transit.js that has a very powerful (and easy to understand) API.
$("#unit").transition({x: 20}, 500, 'linear', function(){
//Talk about easy. And it stacks!
//Call this multiple times to build a queue of movements.
});
Centering the rooms and dealing with touch
I also needed a way to have the horizontally aligned rooms be centered in the middle of the screen. I also wanted it to be draggable left and right on mobile, scrollable horizontally using vertical mouse wheels, and scrollable left and right on trackpads. Luckily, I found an awesome jQuery library named Sly with most of these needed features built in. Score.
Sly also has support for clicking/touching the next or previous item to change the centered room, which is totally sweet. Best part is, it moves and positions the list using GPU-accelerated CSS3, which means it runs at native speeds on my iPad!
Same time, same channel
That’s all for this week’s update. Next week I’m working on adding the user interface and basic resource management to Starbase. I’m looking forward to documenting my findings there. If you’re interested in getting in contact with me or have a question or two, hit me up!
