Introduction and features

If you have ever wanted to create a world that your users can explore, but haven't known how to do it, then this project can help you get out there and get after it.

View introduction in video format here: Video on LinkedIn

A full course using multiple characters, multiple boards, side-scrolling animations when moving from board to board, are already being enjoyed by thousands in a professional setting in one of the biggest companies in the world.

With this type of course, you have have the user walk around and size of world, gather items, solve tasks and anything you can think of.

Review the project here: Review360

You control the Avatar with the Arrow Keys on the keyboard and she can only walk on the paths set by you. That means, she can't walk through walls! You can warp to Task slides or to another Board slide using the Intersect trigger.

Download the Project at the bottom of this post.

How the character moves

 

The character is a PNG picture that is exactly 200x200 in size. The trick to movement is to also have the Motion Paths be 200px in length and have them set to Relative Start Point. I have chosen an animation time of 0.25 seconds.

There are 5 states, the Normal state is the character in the Idle Position. The other 4 states are self-explanatory.

Lastly, two triggers are created (NUM 2 appears when you hit Arrow Down on your keyboard). Your character now moves around the Canvas.

How the character was created

The character was created using AI using the following prompt:

I'm creating a game and need a picture of a character. The game has an isometric view and I need the following 4 poses in the same picture with transparent background: 

1 Front view where she has an idle pose and standing still.

2 Front view where she is walking towards the camera.

3 Back view where she is walking away from the camera.

4 Left view where she is walking with arms swinging very little.

Comically small body. Very large head. Female. 3D style. High resolution. Office clothes. Short hair. Glasses. Transparent background. Disney style.

That gave me this character in the poses I asked for.

I use this large character for all slides except for the board. On the board, I took the picture into Photoshop and shrunk the body into something even smaller.

How the board was made

The board was made using PowerPoint and AI. I drew the outline of the board in PowerPoint using square shapes. I guess you could do this in Storyline as well!

Then I found random pictures of inventory on google and copy-pasted them into various positions.

Then I uploaded the picture into the Copilot AI - any image generation AI will work and used the following prompt:

Can you create an exact replica of this image, but make it beautiful 3d top-down style. Make the colors pleasant and give it a disney vibe so that the scene feels warm and welcoming. Keep the layout the same.

How to prevent the character from walking through walls

This is the part that requires you to click the most with your mouse.

First you create a grid of 200x200px square shapes. They only need to cover the areas the character will be walking on. They need to be touching each other and Shape Outline must be turned off - or it won't work.

You then type in a unique identifier in each square shape. I just used the numbers from 1-27. I also renamed all the shapes "Square 1" "Square 2" "Square 3" etc.

Next you create a new Number variable. The default value should be the square your character will be starting on. In my case, 1.

You then create a bunch of triggers that changes the location variable upon intersecting with the character.

You can now track exactly where on the board your character is located. This is key to controlling where it can not move.

Lastly, you create the following trigger for all four arrow keys. 

The numbers will be different for you. But basically you look at Square 1 and visualize if the character should be able to move downwards from this location. If it shouldn't be able to, then you don't add the number to the list. If it should be able to, then you add the number.

Download the project file

Explore all the other various tricks employed to create the soft shadows, the smooth transitions and more by downloading the file right here. :)

This project was created by http://www.mindsparkelearning.com - but feel free to modify it and then make it your own! :)

I hope someone out there can find this project useful.