Go back

In part 2, you learned how to import assets from the hyperPad Asset Shop. Now we're going to use those assets, and build the first level for our game.

 

We'll start off by adding a background to our scene. There are a few different ways of doing this, we'll cover the quickest and easiest method. You can learn about the other options by viewing the "Backgrounds" documentation in the Scenes category.

To add a background tap the "Scene Settings" button located in the Top Tool Bar. From the popup select Background.

 

In the window that appears now, you can select an image, or color for the background. For this game, we'll set an image. To do this, tap the larger square that says "Tap to Change Background".

Now that the Asset Library has popped up, navigate to where the assets are located. If you didn't move them after Part 2, then you can go to Downloads ->Platformer Starter Kit -> Backgrounds.

Select the image you want, and the background is set.

 

Now, you may notice that the background doesn't look just right in your scene. Depending on the image, you may need to change the image placement. You can do this with the options at the bottom of the window. In our case, the background selected is completely 

We'll use Aspect Fill for our background, it will scale the background image to fill the screen, and clip parts that are not visible. Try playing with the different options to see the difference.

 

 

Adding Objects

With the background now set, we'll move on to building the platform your characters can walk and stand on. Once again, open the Asset Library and navigate to the downloaded "Platformer Starter Kit". Locate the "Grass Ground Middle" graphic (Downloads>Platformer Starter Kit>Grass World) and tap on it to add it to the Recently used Objects dock located at the bottom of the editor.

Once the desired graphic is on the dock, you can just simply drag it off to place a copy in your scene.

 

You can continue to drag objects off the dock to build your level, but you may notice that it can become difficult to align the objects.

 

Snap Mode

To solve this, you can turn on the "Grid" which will snap objects as you move them around with the Move Tool. To enable the snap mode, press the grid icon in the tool palette. This will enable a visible grid on your screen and snap all objects to that grid.

Grid Icon

For more precision, you can zoom in to refine the grid.

Duplicating Objects

For repetitive objects like your ground, you can actually use the duplicate functionality. To do this, let's use the "Box Select" tool to select multiple ground objects and duplicate them. Press and hold the Select icon, then select the Box Select icon.

Select the objects you want to duplicate. In this case a few ground graphics we added. Once the Object Properties appear, tap the duplicate button.

 

Conclusion

Now, repeat the steps above to create an interesting level. Don't limit your self to the screen boundaries, as in Part 4 we'll be adding a player, and giving it the ability to move the screen.

Optional Tasks

Try using the layers feature of hyperPad!

 

Final Result

You can see the level we created in the Hub. Feel free to Branch it and make your own additions or changes.

Download Level

Unlock endless game and app creation with hyperPad for a one-time payment. Turn your Procreate designs or digital art into interactive comics, games, and more, then publish directly to the App Store from your iPad. Start your game dev journey with hyperPad today and bring your ideas to life!

Be in the know

Be the first to hear about new blogs, updates and fun events!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

recent posts

See all posts