This section covers the very basics of hyperPad before diving into its visual coding system. Students will create their first project and learn how to navigate the user interface, import and manage assets, manipulate objects and more.
In this section, you will learn how to:
hyperPad is an iPad app that empowers users to create their own mobile games and apps without needing to type any code - from eager learners to seasoned professionals, anyone can create interactive projects with hyperPad. It uses visual coding instead of traditional code which features blocks that determine how everything behaves.
In this example, when the player collides with the coin, here’s what happens:
hyperPad’s flowchart system makes designing logic very simple compared to traditional programming languages. Later in this course, you will learn more about this intuitive system that we call “behaviors”.
In hyperPad, you can also play projects created by other users in a special place called the Hub. The Hub is a great place to share your work to get community feedback so you can improve your project.
hyperPad allows you to export your projects to the App Store too. The image below shows an app built by Hakan Dede using hyperPad - Hakan has built many mobile games and earns profit from them using monetization.
And you can do this too without writing a single line of code!
If you have not already, you can start by creating your account on the hyperPad website or doing so inside the hyperPad app.
In this part, you will create your first project and learn about the settings that will apply to your project. Don’t stress about it - you can change these settings any time after the project is created. In the Projects page, press [ + New Project ].
This will open up a menu where you can start setting up your project as shown below.
Enter the name of your project and enable Automatic Cloud Backups if you wish. When automatic cloud backups are enabled for a project, that project will automatically be backed up online every time you save and close your project. You can access these backups after creating your project.
Optionally, you can start with a sample project which contains prebuilt demos that you can use as a starting point for your project. For this course though, we will be creating a project from scratch.
Press [ Next ]. You will now see orientation and device support settings.
For this course, select the Landscape orientation for your project as we will be creating a 2D platformer game.
Press [ Next ] again. You will now see the rest of the project settings.
For this course, select the Side View perspective as we will be creating a 2D platformer game. We recommend keeping these settings as is to prevent future complications.
Once you are ready, press [ Create ] and you should be good to go!
After creating a new project, you will be greeted with the scene editor. Do not worry about everything you see right now as we will focus more on each specific menu of the editor as we continue in this course.
The top navigation bar contains many necessary project-related functions. It is essential to understand all of these as you will be frequently using them.
Pressing the hamburger icon on the top left corner of the screen will display all the scenes and overlays in the project. Here, you can also save and quit your project. hyperPad autosaves your projects, so you don’t need to worry about manually saving.
Press the Scene Settings button - you will see the Screen View and Background buttons. You can select either of them to change their settings. Note that these settings are separate for each scene.
Screen View Settings
Change the initial position and zoom of the screen. If you wish to reset the screen position, press Defaults.
Background Settings
Change the background color or change the background to an image. There are different options that determine how the image will fit in the background. If you wish to reset the background, press Defaults.
Press the Global Settings button - you will see project settings and a green hamburger icon will appear on the top left corner of the camera screen.
This green hamburger icon is the Pause button. You are free to customize the color and position of the pause button. Every project in the Hub will have this button so users can quit the project, though in exported projects, this pause button will not be present.
You can access the physics settings by pressing the tab with the rocket like so. Notice how some of these settings are the exact same settings you’ve seen when you created your project - this is where you can make changes to those settings.
The asset dock can contain objects that can be placed on the scene. You can either drag objects out of the asset dock or press on the flask icon to add an object. Below shows an example of the asset dock in use. In this example, the user dragged the plane out of the asset dock and placed it on the scene.
In our project though, the asset dock is empty, but we can populate it by selecting assets from the Asset Library. You can open the Asset Library by pressing the toolbox icon (next to the flask icon).
Currently, we don’t have many assets to pick from. All new projects come with a UI folder containing basic fonts and graphics. Navigate through the contents and select the Arcade graphic asset - this is located in UI/Buttons/Arcade. Later in this course, you will learn how to import and manage your own assets.
After selecting the Arcade asset, your asset dock should look like above. Try dragging the button graphic into the scene! You will see that you have created your very first object!
Alternatively, you can press on the flask icon and select the type of object you wish to add to the scene. For example, I’ve added a health bar in my scene.
The left sidebar contains selection modes as well as grid mode and a button to switch aspect ratios. These features will be very useful when designing complex projects.
When pressing the aspect ratio button, it will switch aspect ratios. Depending on the screen sizes you are supporting, you will cycle through different screen sizes. Refer to the images below - you can observe how the screen sizes appear for different iPad devices; they’re not the same.
The reason we need to consider different aspect ratios when designing projects is because not all devices have the same exact screen size. A game played on a phone will have a different layout compared to the same game on a tablet.
Because phones are smaller than tablets, UI generally takes more screen space on phones than on tablets so users can easily interact with them. A good tip is to work with the smallest screen size you plan to support first - larger screen sizes will easily fit with what you’ve designed with the smallest screen size.
Grid mode allows you to align objects to a grid - simply drag an object (no need to select them) and the object will automatically snap itself into place. You can zoom the screen to change the size of the grid.
Pan Mode: You can pan around the scene without interacting with any objects. This means if you’ve touched an object, it will not be selected. And dragging on an object will not move it.
Multi-Select Mode: You can select multiple objects in an area by dragging a rectangle that covers the objects you want to select. You can perform actions on multiple objects at once. For example, maybe you want to delete a bunch of unneeded objects in the scene.
Select Mode: You can tap on an object to select it and drag an object to move it. You can hold on an object to perform other actions such as Copy and Cut.
Stamp Mode: This requires an object to be copied to the clipboard. To copy an object, hold on an object and press Copy. You can tap anywhere on the scene and it will paste the objects that were previously copied.
The right sidebar will contain all the layers in the scene. Here, you can add and manage separate layers. Later in this course, you will learn more about layers and how to properly utilize them. For now, make sure you stay in the Main layer.
In the next part, we will cover how to import and manage your own assets.
You can import your own assets into hyperPad - these can be images, sound, fonts, animations and particle effects. Ideally, you want to learn how to add any graphic or sound effects you want to use in your projects.
Don’t stress about it - it is very simple to import assets inside hyperPad! In the Asset Library, select the Import button to start importing assets.
Note: If you would like to import graphics or audio from another app, you can!
You will be greeted with this menu. For now, let’s import an image - select Graphics. Similar steps can be taken for importing every other asset type.
You have multiple sources from where you can import your images. For now, let’s choose Camera Roll and select images from there.
Once importing an image, it will appear in the Asset Library like so. You can import as many assets as you wish. You can always remove them later!
Tap and hold on an asset if you would like to perform an action on it - you will be presented with a list of available options as shown above. Most of these options should be self-explanatory, but don’t worry about knowing what they do. Feel free to experiment with them though!
If you would like to perform actions on multiple assets at once, you can use the multi-select feature. Tap on the assets to select them and hold on them to bring up a menu as shown below.
If you would like to select all assets, simply hold on the multi-select button. Tap on the button instead if you want to cancel multi-selection.
Don’t worry if you don’t have any assets - you can find some free assets online or you can download free asset packs from our shop! Press on Get Assets in the Asset Library.
Once done, you will see many asset packs you can download. Look for the Platformer Starter Pack and download it. We will be using it throughout the course (but feel free to import your own).
After downloading the pack, you will see a new Platformer Starter Kit folder inside the Downloads folder (you may already be in the Downloads folder when returning back to the Asset Library).
Inside the Platformer Starter Kit folder, you will find many assets you can use in your project. After you’ve confirmed that you have these assets, you are good to continue in this course!
Let’s try importing graphics into the scene and transforming them! Find some tile graphics and put them in your asset dock - the tile graphic assets shown below can be located at Downloads/Platformer Starter Kit/Grass World. Create a simple ground like shown below and use grid mode to align your tiles. Feel free to decorate your scene with the assets provided in the asset pack!
Want to swap out an object’s image with something else? No problem - just tap on the image itself. It will take you to the Asset Library to choose a new asset you want to use on the object.
Tap on the color wheel icon to change the color of an object. You can also change the object’s opacity (how opaque it is) from the same menu. You may use the color palette below to save and reuse colors - tap a color to use it or hold on a color to replace it with the current color.
The blending mode determines how an object makes things appear behind it. For example, the Dodge blending mode is perfect for creating lighting effects in the scene as it brightens up objects behind it.
For example, there is a radial gradient that lightens up the lamp and its surroundings with a yellow glow. Feel free to experiment with these blending modes!
Pressing the eye icon will make an object invisible (or visible again). When playing the scene, invisible objects cannot be seen, but the objects are still physically there. You can manipulate logic to toggle the object’s visibility during play (you will learn how to program behaviors later in this course).
Scaling and rotating objects in hyperPad is very easy to pick up on. Drag any of the green circles on the selected object to stretch or change the size of an object. To rotate an object, drag the circle with the arrow inside it.
If you want to define exact values for this, you can navigate to the Transform tab and modify the fields as you wish.
You can also modify position and many other properties here. There can be some icons you are unfamiliar with - let’s go over what they do!
Lock Property: When enabled, the corresponding property will be locked, meaning it won’t be able to be edited in the editor. However, this does not prevent the property from changing during gameplay. For example, the object’s position can be locked - this means you cannot move it in the editor, but this doesn’t prevent the object from moving during gameplay.
Proportional Scale: When enabled, making changes to the object’s scale will make sure the object scales proportionally in both axes in the editor. This has no effect on gameplay.
Percentage Units: Scale and position can use percentage units.
Scale percentage is based on the size of the actual image - for example, an 100x100 image with 200% scale would be 200x200 in the scene. Each image can have different sizes, so the same percentage scale does not always translate to the same exact scale in the editor.
When it comes to position, it is a little bit more complex. Position percentage is based on the screen, meaning (50%, 50%) would translate to be the center of the screen no matter which device you are on. We call this relative position. Later in this course, we will learn more about this and how to properly use it.
hyperPad uses the Cartesian Coordinate system where as you move right, X increases and as you move up, Y increases. If you are familiar with graphs in Algebra, you already know everything about the cartesian coordinate system!
The bottom left corner of the screen is the origin (0,0). You can observe this in the editor yourself by moving an object and seeing what its position is - give it a try!
You can change the flip of an object by the buttons shown below.
Flip X will flip an object horizontally whereas Flip Y will flip an object vertically.
The anchor point represents the “anchor” of the object and is the basis of all transformations - the anchor point stays stationary when the object is scaled or rotated. By default, the anchor point is placed at the center of the graphic.
You can press the target icon located next to the lock icon to reset the anchor to the center of the object (50%, 50%).
The anchor point is displayed as a blue circle with an anchor inside it. Notice how the anchor is at the base of the bear’s arm in the example below - the arm rotates around that anchor point to give an illusion that the bear is waving at us.
The Z order determines what objects are in front of or behind which objects. Use the button on the left to find the smallest Z order and use the button on the right to find the largest Z order.
Objects with a higher Z order will be in front of objects with a lower Z order - objects with a lower Z order will be behind objects with a higher Z order. You can see how you can use this to create the illusion of depth in the scene as shown below.
Now that you’ve learned how to transform objects, try decorating your scene! Feel free to use any asset packs you like from our asset store.
In the next part, we will learn how to utilize layers in our project.
hyperPad supports multiple layers in a project (you can have as many as you want!). A layer is simply one set of objects stacked on top of another. This lets you work on one set of objects without affecting the objects stacked above or below the current layer. By default, a main layer and two UI layers are created for you when starting a new project.
If you have not switched layers in your project yet, you’ve placed all of your objects in the Main layer. You can test this by pressing the eye icon next to the Main layer. The Main layer will be hidden, which means all objects on that layer will be invisible as shown below. Make sure to switch it back to being visible by tapping the eye icon again!
Layers also prevent objects from physically interacting with objects on different layers, so you could have a bunch of mice running into each other in one layer but not running into the main character in another layer. We will learn about using physics in hyperPad later in this course.
You will see a gear and plus icons at the bottom of the right sidebar. Pressing the gear will allow you to edit properties of layers and pressing the plus will add a new layer. Feel free to add layers to your project and give them appropriate names. Below demonstrates good usage of layers in a project.
It is worth noting that layers will be in front of layers below. For example, if Layer A is above Layer B, objects in Layer A will appear in front of objects in Layer B. Considering this, you can rearrange layers by dragging them around.
You may have noticed by now that the UI layers (Scene UI and Global UI) cannot be rearranged or edited. UI layers act differently than the other layers - objects in these layers remain stationary on the screen as the camera moves. This is perfect for screen elements such as joysticks, buttons, health bars and more.
The image above shows highlighted objects that are in the Global UI layer. As the camera moves, these objects remain still on the screen.
Every scene will contain a Global UI and a Scene UI layer. Each scene will contain their own Scene UI layer, but every scene will share the same Global UI layer.
For example, there is a PvP game with multiple different game modes. Each game mode is an individual scene. The Global UI can contain the player controls such as the joystick, jump button, etc. as the player uses the same controls for all game modes. Every scene will have different objects in the Scene UI layer depending on the game mode. In fact, many games do this - Brawl Stars is a great example.
Game Mode: Gem Grab
Game Mode: Hot Zone
Notice that in both scenes, we have blue, red and yellow joysticks (Global UI). These are used to control your character. Notice the other elements at the top of the screen - they are unique to each scene (Scene UI). These elements display pertinent information about the match which are unique to each game mode.
Now that you’ve learned how layers work, feel free to add layers to your project and utilize the UI layers as you progress through the course.
In the next part, we will learn about absolute and relative position.
There are two different ways to represent position in hyperPad: Absolute Position and Relative Position. You can toggle between the two modes by pressing the percent sign in the Transform properties. Below, the object is using Absolute Position which is indicated by the percent sign not being enabled.
Relative Position (%)
(Screen Coordinates)
Absolute Position (m)
(World Coordinates)
The object’s position is described by where it is relative to the screen. This means that the object will adjust where it is located based on which screen is selected. This is useful when designing a UI that fits for multiple screens.
The object’s position is fixed in space unlike relative position mode. Use this for when you want objects to remain in the exact same position for all screens.
Try setting an object in relative position mode and changing the aspect ratio. You’ll notice that the object seems to move when changing aspect ratio. In reality, the object is just “attached” to a specific point on the screen.
For example, if the object’s relative position is at the middle of the screen (50%, 50%), the object will remain in the middle of the screen for all aspect ratios.
You can see that the object remains attached to the middle of the screen. If we repeat the same process using Absolute Position instead, the object will not be attached to a specific point on the screen and the object simply stays in place.
The object’s anchor point is used to attach the object to the screen. You can move an object’s anchor point to be at a specific corner or edge of the screen to have the object stick to those particular points.
For example, the jump button located at the bottom right corner of the screen can have its anchor be attached to that same corner. As a result, the jump button always remained attached to the bottom right corner of the screen regardless of screen size.
Here are some other great examples of how to use relative position.
Now that you learned about relative position, you can use it to design some UI that can adjust to multiple screens.
Your game will contain a controllable player character. In the Scene or Global UI layer, design your own UI. Your UI must at least contain a joystick and a jump button like shown above. (Add a joystick by pressing the flask icon!) Your UI also must fit all supported screen sizes. Don’t stress about it - you can edit this anytime as you learn more content! Feel free to use whatever assets are appropriate for your project.
In the next part, we will discuss how to utilize physics in hyperPad.
In hyperPad, an object can be one of three physics modes: physics, wall and scenery. It’s crucial to understand the difference between these modes as well as other physical properties.
Physics: Make your objects conform to the laws of physics. For example, they will fall due to the force of gravity. They can also collide with other Physics objects or Wall Objects.
Example: The player object can be a physics object so it can physically move around and also collide with other objects.
Wall: A physics object that is stationary. Wall objects will not move when bumped into and cannot be affected by external forces. Wall objects typically have collision boundaries that are used for buildings and the ground.
Example: The ground object can be a wall object so it can hold physics objects above it, but remain stationary.
Scenery: A wall object without collisions. Scenery objects have no collision boundaries and exist only as a graphic in your scene. Perfect for objects that only serve as decoration.
Example: Plants and shrubs can be scenery objects because they do not need to have collisions.
You can change an object’s physics mode when objects are selected. For example, the player object is currently a Physics object in the screenshot below.
You’ll also notice other physical properties which you can modify as you please.
Knowing the physics modes, create a player object (physics object) and go through all other objects in the scene to adjust physics properties if necessary. For example, make decoration objects into scenery objects. To test your project, press the play button.
Once done, you have completed this section and you are ready to start your coding journey with hyperPad! (Don’t worry - you’ll learn how to make your player controllable!)
Congratulations on completing this section! You’ve learned how to navigate and use the scene editor and asset library. You can create an entire scene using what you’ve learned so far, but how do you make your scene come alive?
In the next section, you will learn how to code using hyperPad’s behavior system! This means you will get to create your own logic to give objects unique behaviors in the scene. Get ready to start learning how to code!
Be the first to hear about new blogs, updates and fun events!
