JavaScript - Point and click RPG prototype/side project

Playing around with Articulate for my current job made me remember when I first learnt about Macromedia Flash from the school IT technicians, when I made loads of Flash games - which very quickly got my email banned by school for sharing them!

However, remembering all this, I thought I might try to make a point and click RPG prototype to learn a little more about Storyline's APIs.

Here it is:

https://evanclark.co.uk/Portfolio/Point_Click_Game/story.html

Instructions

Just click around on the screen and your character will move there. Walk to the stairs to go to the next floor. Walk to the chest and click "Loot" to loot the chest.

 

Assets

The assets were all taken from free vector sites, with the character being an animated gif I found online. 

 

A question for you all...

Before I get into how it works, I do want to some advice: 

I am looking for a new job as my post is coming to an end soon. This was meant to be a fun side project and making it look professional would be a lot of work. Having said this, do you think it is worth adding to my portfolio in its current state, or leaving it out?

 

How it works

World Movement

I've got an almost invisible shape covering the entire slide. When users click on it, JS runs which calculates the x and y distance from the slide centre. It'll also calculate moveXDirection and moveYDirection to be -1, 0 or 1. The character is in the centre of the slide and the world moves around the character. On the main slide's JavaScript, there is an array of every object on each slide. A for loop inside a function moves all the objects in the array using this sort of logic: obj.x += speed * moveXDirection (and the same for y). This is a bit of an oversimplification, as it has to be a little more complex for the collision to work, however the principle of it is fairly consistent. 

Character Animation

There are 16 gifs, each with a different animated character, one for walking and one for idling in each direction (0, 45, 90, 135, 180, 225, 270 and 315 degrees).

I did have it so all of these were different states, and the state changed, however this caused a lot of flickering as they were constantly being loaded. Instead, I placed them all on the centre of the slide, and changed the opacity of them depending upon moveXDirection and moveYDirection.

Collision

There are hotspots around all the borders and objects on the slide, and a hotspot underneath the character. All the world hotspots are in an array of objects. There are a couple of functions that are called which detect collision. These work by comparing the x,y and object width of both the character hotspot and the world hotspots based on where the world hotspots will end up after movement. This allows me to toggle movement, and also all these functions to detect when the character is close to the chest or the staircase.

Moving between floors

Each floor is its own slide. A hotspot is placed in-front of each staircase, and a variable changes once the character hits this hotspot (using the same collision logic as above), which triggers a slide change. 

Now, that is straight forward, until you realise that when you go up a floor, and then go back down, this returns you to slide 1 which starts at a different location to the staircase you've just come down.

This was the trickiest part of the entire project. I could've made it work by having the bottom floor be multiple slides each with different starting locations, however, this didn't seem like the best solution: what happens if a floor has numerous staircases? We'd need numerous slides, and fixing any bugs or changing things on that floor would involve changing numerous slides. Fine for this two floor map, but not really suitable on a larger scale.

Therefore, I made a tiny 1x1 invisible object where I want the character to be when they come back down to floor one. Then, a variable is used to determine whether the world moves to this object (or at least, the world moves by the distance of the object to the centre of the slide). This seemed like it could easily be scalable, and it worked quite well!

Inventory & looting the chest

This was perhaps the simplest of all. There is an inventory layer on both slides. Each inventory square has multiple states - one for each object, and a textbox to list a number of items. I only got the first square working as a proof of concept. It has a variable determining what is in it - in this case just a normal text variable. If I was to expand it, I'd likely have a Storyline text variable for each inventory slot (given there are only five, this seems to be the easiest solution) which would include the name of the item in that inventory slot and a number of the item (e.g. coins_50). This string can then be sliced in the main JavaScript to determine the number of the object displayed and the state of the inventory square. 

When you loot the chest, it simply changes the inventory variables and adds a random value (between 4-9) to the coins if you didn't have any already.

There is a little animation where the coin grows and goes to your inventory. This is just an entrance animation and a motion path that are triggered when the player clicks the "Loot Chest" button. 

The state of the chest also changes to "Looted" when the player clicks on the button; or at the timeline start based on a variable (whether the player has looted the chest already or not).

Accessibility

This is obviously not very accessible at all! It was a fun side project to push Storyline's API a bit, which I thought would be fun to share with you all. I wouldn't use anything like this for eLearning due to its accessibility, but it was definitely a good bit of CPD for myself!

Final Thoughts

Unsurprisingly, eLearning authoring tools like Storyline are a bit clunky when it comes to making an actual top-down RPG and making it work in Storyline was a challenge - although the fact they can is a credit to its versatility! It could have been made much smoother with an external JavaScript file referenced by the Storyline project, or used JavaScript's own event listeners, however this defeats the point of the challenge.

Overall though, I'm actually quite happy with the project and impressed at how much Storyline has the potential to do - I could've pushed this so much further!