Whirled on the JS Game Jam Code

Somehow JS13K Games appeared on my Twitter feed. I’ve heard about similar JavaScript game jams before, but this one was new to me. I checked its homepage and it says there are multiple categories, one of them is to create a VR game using A-Frame framework. It caught my attention, I remember I have an online course with this topic but I never watched it, I was thinking it is a good opportunity to do it because participation is enough motivation.

I watched the course, it was pretty short because A-Frame is not a huge topic. It’s an overlay around Three.js with extra functions, add VR view by default, also easy to describe the virtual scene, one object is an HTML tag, pretty straightforward.

I didn’t really have any idea what to do, what I did is just throw some objects on the scene and try to move them. This is what I did in the entire jam, I wasn’t even sure I will finish something by the end. Luckily I managed to upload something, it’s a very simple experience. The player inside a tube made by moving rings to make the illusion of constantly moving forward. Objects are coming, look at them for a short period of time makes the player move forward, don’t look at them move the player backwards, the goal is to move forward to the end of the tube. The name becomes Whirled on the Spirit Spiral thanks for shower thoughts.

The whole thing was pretty new to me, I’ve never tried to make any game in native JavaScript from scratch. I had some experience with the Phaser framework, but what I like is the Unity3D engine to create games. This why I spent much more time on it what I was planning. For example, in the beginning, I was generating all the objects with JavaScript, but I had to realise on this way I can’t disable A-Frame’s default camera and lightings, so I had to refactor a lot of things, but I’m kinda happy with the final structure. It would be easy to extend it. I didn’t really do any crazy optimization for the size limit, I was thinking if I use only primitive objects and pay attention to not over-engineer the code and messing up with global variables saves me plenty of space.

I still found many challenges during the development, I try to remember, collect and describe them below shortly with some basic example but I recommend to check the source code if you are interested, it’s short.

1st challenge: Setup development environment

It’s pretty easy, just use Gulp to run automated tasks.

  1. Pug to Html. I’m always using Pug instead of Html, it’s just much cleaner and I have to type less, which is good.
  2. Minify JavaScript and CSS files for the production version. Even I’m using EcmaScript6 I didn’t bother to setup Babel.JS for support old browsers, I’m expecting that if a Browser is able to run virtual reality experiences ES6 wouldn’t be a problem. Also, it saves space which is essential in this competition.

2nd challenge: The game loop

Unlike with using any game engine, I had to create my own game loop. I was using requestAnimationFrame instead of setTimeout because I could get the time difference between two frames and with this information I can be sure the speed is the same in all the machines at different speed.

gameLoop(timestamp)
{
	this.update(timestamp - state.lastRender)
	this.draw()

	window.requestAnimationFrame(this.gameLoop)
}

3rd challenge: The GameObject

I was creating my own JS class to hold an object, I could add additional information like position and rotation and its own render function.

class GameObject
{
	/**
	 * @param object obj Game object
	 * @param array pos Object position [x, y, z]
	 * @param float speed Object speed
	 * @param int type (0: ring, 1: obstacle)
	 */
	constructor(obj, pos, speed, type = 0)
	{
		this.obj = obj
		this.pos = pos
		this.speed = speed
		this.type = type
	}
}

4th challenge: Object container

I create all the object instances, in the beginning, the game and store the references in an array. I just found out later A-Frame has its own object pool system, I’m using it for instantiating objects but not for more, maybe next time.

5th challenge: Let it move

I’ve two methods runs in every frame, both go through all the game objects. The first method calculates the next position for each object, and store them in the game object.

6th challenge: Render

Simply iterate through the object container and tell to the engine where is the current position and let it render there. I didn’t render the objects after the position calculation straight away, because I wanted to do all the renders as short time as possible.

7th challenge: Effects

There are multiple effects in the game, like rings appear on a funky way, the background fading, etc. This why the calculation and the render should happen separately. If I have more time I could add extra effects, but we just got the basic once, these are not very heavy, the framerate stays ok in VR.

8th challenge: Smooth render

Once an object reached the end of the container moves back to the beginning. Fix “manually” the possibly miscalculated swap position.

if (firstValue >= state.minZ + distance) {
	pool[lastIndex].pos[2] = state.minZ
}

9th challenge: Create the player

The player is an empty game object with camera child. It’s better than using the camera object itself because moving the player forward/backwards really have the moving feeling in VR.

a-entity#player
	a-camera(
		camera-cursor
		look-controls
		rotation-listener
		fov="60")

		//- Crosshair

10th challenge: The crosshair

I just added the crosshair as a child of the camera object, so it always in the middle of the screen. A-Frame has embedded raycast function, I just did set which objects should interact with it and that’s it and the target objects know if they got shot what to do, disappear.

11th challenge: Aiming

Every obstacle got a component which made them able to take care about their own death. It’s pretty easy to switch object’s deathable with html/js by simply add/remove a specific class.

if (
	this.el.classList.contains('obs') &&
	this.el.getAttribute('position').z > state.playerPosZ
) {
	Game.destroy(this)
}

12th challenge: Score system

This receives events and can decide which direction should the player move.

13th challenge: Mobile vs Desktop

The game is using default settings like how many objects are in the screen at the same time etc, and the initial setting has a mobile and a desktop version. When the player chooses the version the initial values populated from the correct array.

14th challenge: The outlook

A-Frame has a very nice visual inspector tool which helps me set up the lighting, just make the objects visible.

I think I could continue to write this list for long, menu, sound etcetera, but I think the point is clear. Even it’s a very short and basic experience there are plenty of things to take care. It would be fun to continue the code, it’s very easy to extend now, add more effects, make the mobile version better, the things I could do before the submission, I just didn’t have too much time to tweak it, and it’s good as it is.

Thank you for reading this post. It’s time to play the game or check the source code.

Ludum Dare 41

We attended again to a new Ludum Dare competition. I was quite busy recently and I couldn’t pay attention all the theme voting process, but the last round titles were very promising.

I have decided to not vote for 0, it’s just pointless, I can choose on something whether I like them or not. And there is a theme what I really like.

Combine 2 incompatible genres. I just can’t believe this one won, this was my personal favourite! Even I had no idea what to do with it, I think this theme is perfect for a game jam. If you play with some of the entries you’ll find some really good ones.

Of course I woke up with fever on Saturday morning, so I kinda skipped the first day of developing, but at least we could come up with an idea. It was mainly Starlin’s, but I liked it. A car racing game versus a rhythm game.

I was focusing on the rhythm part, I have never made anything similar, although I was a huge fan of Guitar Hero with my friends. I remember we played with Frets On Fire which is a rhythm game with numerous downloadable songs, so I had the idea the game notes for those tracks are not auto-generated, but I ignored this information, I wanted to run the game by the music beats.

Spolier alert, it didn’t work. I’ve downloaded one of my favourite nightcore song for testing, it keeps the bpm around an energetic 162, I wasn’t afraid I get too sleepy. Unity has some great tool to get some data about a song, I was checking some beat detection algorythm, even I tried some 3rd party plugins, but I was sure a day is defenetly not enough to finish it. So I went to the good old manual solution and tried to hit the tempo by myself and record it, drop the beats randomly.

Meanwhile Starlin made a car model and a few building with great textures with some Japanese spice. The Japanese style was with us for all weekend, I was listening a lot of Jpop (PassCode, Babymetal) which is totally not my style but I started to kinda like it. And we had just a few hours left from the submission, so we just put everything together. There was no chance to write our own song so kept the test one. Actually if we write our own song probably would be easier to auto-generate notes, I would know exactly the tempo and I could hide some reference point in the track, but that is another story. So do the car racing part.

You can try the game on itch.io, I recommend to download it for smoother gameplay. Have fun!

Ludum Dare 40

We attended to Ludum Dare 40, Starlin and I. It’s 72 hours long game jam, that means we need to make a game in 72 hours, but for the better understanding watch this video:

A decision, go to sleep or stay up until 2am to know the theme? I’ve skipped Friday drinks so I would feel stupid if I don’t go to sleep. Anyway who cares the theme, I was sure it will be pretty cool. It’s my first Ludum Dare the theme can’t go wrong, I really liked some of them.

There is that little feeling when I leave REM and wake up, my first movement to get my phone and check the theme. Oh my god! It’s really unlikely, I think the stupidest theme ever won. The more you have, the worst it is. What can we do with it? Starlin woke up and we started to brainstorm, even before our morning coffee. We knew that we want a game with a pigeon. So bird game. The idea is, bird eat too much, become fat, hard to control. But why bird has to eat? To feed the kids!

Ok, what kind of game we should make? We ended up a 2D platformer where the bird has to fly, handle obstacles and somehow go to the next level. We are very inexperienced game developers, we thought it’s enough idea as game design and we are ready to make it alive. I opened Unity and started to coding something, fly left and right, and hoped it will become something fun.

Generate landscape. That’s first. Of course, just for temporary, I didn’t want randomly generated levels, I wanted everything well designed. (didn’t happened) The character can go in any direction and I add new platforms when it’s necessary.

The main problem was the lack of plan. I just didn’t really know what to do. I was playing with the code and hoping something cool gonna happen but it was more like desperate commands what never made to be a part of the game.

To make my life harder I wanted to stream the whole process on Twitch. Just for the fun. I think it wasn’t really successful, I didn’t narrate and I didn’t really know what I am doing during the whole jam.

By the end of the jam we had a basic platformer with controls and we didn’t have anything that makes it enjoyable. The gameplay. This is what we missed during the planning. Our idea was way too complex for this little game, I had a lot of variables to change the experience, so I just added random levels with random settings, I’m very surprised it kinda works.

Anyway, we made it, we could release the game in time. The main thing what I learned is there is never enough planning. If I do this next time I will spend hours of planning in the beginning and never have that moment when I don’t know what should I do.

Here it is: https://ldjam.com/events/ludum-dare/40/the-hunger-maims

There will be three difficulty levels. Main difference between them is the speed of the gameplay. The original idea was using obstacles in completely random order, but during testing I found out some pre-defined patterns would make it more enjoyable. A tiny PHP script helps me to generate JSON files that contain object sequences. I mix resulting JSON data with random items to make it better or even harder to get higher scores. This also allows me to add various power-ups, even I just add some coins in the beginning.

Help to Find Cats

Somebody mentioned me Global Archiact Jam, a VR challenge. Task is clear, do anything with Unity3D for Google Cardboard or Samsung Gear VR in two weeks. Using any kind of legal assets were acceptable, so it sounds like something achievable alone. To be honest I didn’t know there are differences between these VRs, I picked Cardboard and started to work on it.

Using Cardboard SDK is surprisingly easy. It’s automatically creating two cameras for both eyes, the job is making a standard FPS. I already had experience with game controller support, so my hardest task was the actual level design, also testing. Using Cardboard a lot made me motion sickness. I don’t think virtual reality on mobile is bearable more than a few minutes long experience. (Or it’s just my phone.) I had to find some tricks to prevent it, like disable side moving, setup proper player height, physic factors and add a reference frame.

I’m happy I could come up with something in time, it’s very buggy but at least it’s working and I learnt a lot about terrain and level design. Available on Google Play.

Mechanic is the following about:
– Have a pool full of cubes
– Seeder decides the next pattern
– Spawner throws cubes on the field
– Player tries to don’t collide
– Cubes go back to the pool
– Repeat;

Version Control

Hello World! Let me introduce myself. My name is Andras Serfozo, I was born in Budapest and I’m living in London at the moment. I’m web developer, I know Php, JavaScript, Html and surrounding technologies, but I’ve found time to try something different: to create games.

When I got this idea first I’ve tried to do something with JavaScript but I had to realise it is not exactly what I want. I know that there are plenty of amazing tools to make awesome 3D WebGL stuff but I’d like to leave web browsers. Reason is simple, I like the feeling when all browsers are closed on my computer (what is almost never happen).

Once upon an afternoon, I’ve found Unity game engine, it matched to my criterias (easy to use, mobile deploy, the usual things) and I decided to learn it. I started with the basics. I made a Pong. I spent a lot of hours to make it work, I added extra features, like multiplayer game via Bluetooth, AI against computer, but for some reason it wasn’t enough for Google to release it to Play store.

After a while when I tried to organised my code I had to realised I just lost the source code of my Pong game. Died hard drive never helps. I had to face it I can’t modify it anymore. From that moment I decided to store all my source codes in cloud. I have already a lot of stuffs on Bitbucket, it’s great and free, should work for Unity files too.