Overview Of This Week

This week, I focused on coding my video game project in JavaScript with the use of the Phaser framework as well as trying to implement the easing functions.

Coding Project: Zombie Killer Boom Boom

This week I implemented the relevant sprites (the zombies and the main playable character) into the game. I also managed to find and put into the game a bit-grass background for the sprites to move on. I created multiple ways for the player to be able to move such as being able to use the “wasd” keys and the cursor keys. I was also able to create animation for the zombie sprites as well as movement animation for the playable character. So far, the enemies can only spawn on the screen and not chase the player, however, over the coming weeks I will try to implement some sort of algorithm for each zombie to follow the player. The images below will show what I have been able to create this week:

extra challenges or important things from last week I have learnt

Implementing easing functions in JavaScript

At the very start of this week, I wanted to make sure that I would finish the easing functions in JavaScript. I chose the same three easing functions as the ones shown mathematically and on a graph in week 2: exponential easing in, exponential easing out and linear easing. The implementation will be shown below:

The first argument in the function holds the percentage to completion which, in this case, is the “distanceTravelled” variable; this holds the current x position of the game object divided by the whole area to move. The second argument holds the final destination. Finally, the last argument holds the overall duration for the animation to take place; the “timeToTravel” variable holds the current fps multiplied by the desired seconds. This was the case because the code is looped by the setInterval() function making this animation frame-based (This was an extra challenge that I did). It is worth to remember that all these easing functions are inside the “moveball” function. The frame-based animation will be shown below:

The example of the linear ease in function will be shown below:

This function exponentially decelerates the game object. The current x position of the object is subtracted by the goal (which is the desired landing position). This whole sum will then be multiplied by a factor which has to be lower than a value of 1 or this won’t work. This will then be returned to the “movex” variable which will keep increasing in value. But, each subsequent call of this function will reduce the increase in value exponentially until the number is really small that it isn’t noticeable that the game object is moving.

The exponential ease out function will be shown below:

This is a very simple exponential easing equation. This is very easy to see how this is the same as y = x² This is because “start” will hold the current x position which is shown above to be multiplied by itself. The sum is then divided by the end which holds the desired end location.

Extra things I have learnt or problems I have solved this week

Implementing easing functions in JavaScript

• Whilst trying to implement the linear ease equation, I realized that the full duration wouldn’t be exact to the desired time. This is because the full duration would fall short of a few milliseconds each time due to the fact that the setInterval() function would call “moveball”, which holds the call to the “linearEase” function, a certain amount of times per second. This whole process would most likely vary in time on each repetition causing the delay. This showed me how volatile frame-based animation can be if you want an accurate value. This problem can be fixed by implementing a delta time to make the interval of each call more consistent. However, this was not my intention to implement but to test out frame-based animation.

Coding Project: Zombie Killer Boom Boom

• The main problem I had this week was trying to separate functions into different JavaScript files. The problem was the scope of the Phaser framework. To reference specific classes or methods, “this.” had to be used. However, “this” couldn’t be recognized as it was out of scope of the Phaser framework so would call reference errors. The solution was to pass into the functions “this” as an argument to be used.
• I created my own sprite map on a website called piskel to create my zombie with animation

Plans For Next Week

Coding Project: Zombie Killer Boom Boom

I want to create a spell mechanic for next week that shoots from the player in a certain direction. I have decided it won’t be from the direction where the mouse is pointing, rather, the direction of the player. My main focus will be this. If I have time, the stretch goal will be to either to improve on the zombies or to make multiple different spells work.