The HypeHype Editor allows you to create, edit and remix Hypes!
¶ Editor General Controls
| Select | Tap to select or deselect objects |
| Multi-Select | Hold one finger down and tap with another to select multiple objects |
| Move | Drag with one finger to move the editor camera |
| Rotate | Drag with two fingers to rotate the editor camera |
| Zoom | Pinch with two fingers in or out to zoom the editor camera |
¶ Main Options Menu aka Hamburger Menu
Tap the Hamburger Icon to access this menu
¶ Support
| HypeHype Wiki | Access the HypeHype Wiki without exiting the Editor |
| Report a Problem | Access HypeHype Bug Reporting Portal to report a problem or view known issues. |
¶ Settings
The Hype Settings allow you to manage options for your Hype.
| General | Options related to the general presentation and gameplay of your Hype, more details on the General Settings Wiki |
| Background & Fog | Manage your Hypes's background colors & fog settings, more details on the Background & Fog Wiki |
| Ground | Manage settings related to the ground of your Hype, more details on the Ground Wiki |
| Player Save Settings | Manage settings related to player save data, more details on the Player Save Settings Wiki |
| My Editor | Manage your personal editor settings, more details on the My Editor Wiki |
¶ Hype Resources
The Hype Resources allow you to manage elements that can be used throughout your Hype.
| Visuals | Create and edit Visual Materials, usable by objects in the Hype. Visual Materials Wiki |
| Physics | Create and edit Physical Materials, usable by physical objects in the Hype. Physical Materials Wiki |
| Texts | Create and edit Texts, usable by the Text & Speech nodes. Texts Wiki |
| UI Colors | Create and edit UI Colors, usable by UI and Text in the Hype. UI Colors Wiki |
| Effects | Create and edit Effects usable by the Particle Effect node in the Hype. Particle Effects Wiki |
¶ Camera Options
Quickly set the Hype's view, reset the editing camera or take a thumbnail. For more about working with the camera check the Camera Wiki.
| Set Camera | Sets the Hype’s camera position to match the editor camera |
| Reset View | Resets the editor camera back to the Hype's camera position |
| Thumbnail | Make a thumbnail for the Hype from the current editor camera view |
¶ Quick Menu
The Quick Menu provides quick access to some of the HypeHype Editor's features.
The menu is scrollable, hold and drag up and down to view all the options.
This menu can also be edited. Scroll to the bottom of the menu and tap Edit to make changes.
- Hold and drag icons up or down to reorder
- Hold and drag icons out of the menu to remove them
- Tap the plus icon at the bottom to add new options (by default all currently available options will be in the menu)
- Tap the button labeled Default at the bottom of the screen to reset the menu to default settings
- When done editing tap the back arrow in the upper left corner of the screen.
¶ Add Stuff
| Assets | Browse and add assets from the asset library |
| Logic | Browse and add logic nodes |
| Hierarchy | Browse all assets used in a Hype |
| Paste | If objects have been copied to the clipboard the paste option will appear here |
¶ Assets
Access the Asset Library and browse Premade assets, Visual assets, Music, Sounds & Add-ons that can be added to your Hype.
¶ Logic
Access available Logic Nodes to add to your Hype. Logic Nodes can also be added directly to objects via the Advanced Details Panel.
¶ Hierarchy
Open the Hierarchy menu to browse everything used in a Hype including Logic Nodes, Objects, Tiles and all types of containers. When you select an asset from the Hierarchy menu it will be selected in the Hype and the editor camera will focus on it's position.
¶ Paste
When items are saved to your clipboard the Paste function appears. Tapping paste opens a menu with all object groups saved to the clipboard, select one and it will appear in your scene. Get more info on using the Paste function in the Copy & Paste section.
¶ Builder Panel
The builder panel contains all Reusables and Add-Ons used in a Hype.
Tap Edit to reveal the Reusable or Add-On container in the editor. Tap Hide to hide the container in the editor.
New instances of a Reusable can be added to a Hype by dragging them from the Builder Panel into the Hype. When dragging new instances of Reusables into a Hype they can be snapped to other physical objects.
Add-Ons can also be applied to objects from the Builder Panel by simply dragging and dropping from the panel to the object.
Watch a brief Introduction Tutorial to the Builder Panel on YouTube.
¶ Test & Save
| Play | Click the Play icon to playtest your Hype in the editor. Ensure everything works as intended before publishing your Hype. More info on playtesting and playtesting options in the Playtest Section. |
| Save | Opens the menu where you can save or publish the Hype and manage Hype Details. Save Page Wiki |
¶ Selected Object Tools
¶ Selected Object Widget
| Editing Mode | Tap to choose between editing modes: | ||
 |
 |
 |
|
| Move | Rotate | Scale | |
| Object Editing | Drag from the Editor Mode icons or from the handles around the object to start editing it | ||
| Glue |
To glue two objects together, drag from the Glue button and release on top of the Glue target object Tap the Glue button to see and remove Glue connections |
||
| Logic Link |
To create logic links, drag from the Logic Link button and release on top of the Link target object Tap the Logic Link button to see, modify and remove Links |
||
¶ Movement
When an object is being moved a field of small dots will appear around it. These dots represent points on the Editing Plane grid.
If the Editor camera is aligned (or close to be aligned) with any specific axis of the Editing Plane objects will maintain alignment with that axis when moved.
When moving an object with the Move icon objects will snap to the ground when near it. Moving an object on a single axis with the handles it will not snap to the ground.
The type of movement can be changed in the Advanced Transform menu. You can select between movement based on global coordinates, local rotation of the object or the Editor camera orientation.
¶ Handles
When an object is selected 3 handles will appear around it. Use these handles to move the object on one axis at a time.
The handles are color coded based on which axis they adjust.
 |
 |
 |
| Red edits the X axis | Blue edits the Z axis | Green edits the Y axis |
The handles will appear different depending on the editing mode.
 |
 |
 |
| Arrows move | Circles rotate | Squares scale |
¶ Details Panel
When any item is selected it’s details panel will appear in the upper right corner of the screen. Visual Objects show the Basic details panel by default while Node Objects will show the Advanced details panel. Switch between Basic and Advanced panels by tapping the tabs at the top of the panel.
¶ Object Tools
| Actions | Opens a sub menu containing different options to edit the selected Object |
| Group/Ungroup | Group multiple objects together or ungroup objects that have already been grouped. This option will only be visible when multiple objects are selected. |
| Remove | If the object is in a container this option to remove it from the container will be visible. |
| Delete | Delete the selected object from the Hype |
| Duplicate | Create a copy of the selected object |
¶ Actions Menu
This menu includes additional options for editing a selected object or objects.
| Copy | Copy the selected object or objects to the clipboard • Copied objects will remain in the clipboard when switching between Hype projects • Clipboard can hold up to 5 unique copy groups |
| Align with Live Physics | Tapping this will activate physics on the selected object allowing it to fall or interact with other objects in the editor. |
| Focus on Selection | This will focus the camera on the selection. |
| Select Similar Objects | Brings up a menu with options to select similar objects. |
| Add to Builder Panel | Makes the selected Object into a Reusable and adds it to the Builder Panel. The selected object will become an instance of the reusable. |
| Show In Hierarchy | Show the selected object in the hierarchy menu |
¶ Copy & Paste
Copy any object or group of objects to the clipbaord by tapping Copy in the Actions Menu. Note this is different from Duplicate which immediately makes 1 new copy of an object or group of objects.
Once something has been copied a Paste option will appear in the bottom toolbar.
Tap Paste and select which copied group you want and it will appear in your Hype.
The clipboard can hold up to 5 unique copy groups.
Copied objects will remain in the clipboard when switching between Hype projects.
¶ Select Similar Objects Menu
This menu includes 5 toggles that can be used to filter the objects that will be selected.
Before making a selection, the objects currently included in the filter will appear with a white outline in the editor.
| Same Visual | Selects Objects using the same visual model. This filter is selected by default and cannot be unselected. |
| Same Colors | Selects Objects using the same colors |
| Same Size | Select Objects with the same scale properties |
| Same Nodes | Select Objects that contain the same Nodes |
| In Frustum | Only select objects that currently in view of the Editor camera. |
| Select # Object/s | Tap this to select all filtered objects. The number in this button will update based on the filters selected to show how many objects will be selected. |
¶ Advanced Transform
| Panel | Open the advanced transform panel by tapping the arrow in the lower left when an object is selected. |
| Lock |
Tap the Lock icon to lock a certain transform axis, tap again to unlock it. Locking axis in this menu will only limit movement within the editor not during gameplay. |
| Values |
What values are shown depends on the current Transform Mode on the selected object. Position shows global coordinates Rotation shows global rotations as degrees Scale shows size multipliers. 1 = default scale, 0.25 = lower scale limit, 5 = upper scale limit |
| Transform Type | Changing the transform type will adjust how the object is transformed |
¶ Transform Types
| Local |
Transform is based on the object’s orientation. For example, if an object is flipped upside down lowering the Y value will move the object up instead of down |
| Global | Transform is based on global X,Y & Z coordinates regardless of the orientation of the object or the camera. |
| Camera |
Transform is based on the orientation of the camera: X moves left or right in the camera view |
¶ Social Hub
The Social Hub gives you access to social features like chats/DMs. The social hub is available everywhere in the app but has some additional features when accessed via the editor
¶ Social Hub Menu
| Do Not Disturb | Toggle this on if you do not want to see incoming messages while in the Editor. |
| Create Group | Create a group chat between multiple friends |
| Live Stream | Toggle this on if you would like to live stream your Editor session for other HypeHype players & creators. |
¶ Chats
Access a private chat for the Hype you are working in or Chats with your HypeHype friends.
¶ Asset Replace
Want to replace an asset quickly in your Hype? Using Asset Replace will allow you to replace one asset with another without losing all of the logic and settings that have been applied to the original object.
Step 1 - Select the asset you'd like to replace and make sure you have the Basic Details panel visible.
Step 2 - Tap the preview image of the asset in the details panel.
Step 3 - Select a new asset from the asset library. If the new asset is part of a set you will be asked which object from the set you want to use.
Step 4 - Asset replaced. All Nodes from the original asset are now a part of the new asset.
¶ Add-ons, Reusables & Containers
These tools can be used to organize & simplify editing.
¶ Add-ons
Holds a collection of Nodes and a reference object. Add-ons can be applied to some objects in a Hype, giving that object the properties contained within the Add-on.
Drag an Add-on to an object to apply it's contents to that object. For example you could apply a jump Add-on to your game character to give it the ability to jump.
For more information on working with Add-ons check out the Add-ons Wiki Entry.
¶ Reusables
A Reusable contains objects and Nodes. You can create multiple instances of the Reusable.
If you make changes to the original Reusable or any of the instances, the changes apply to the Reusable and all of the instances.
For more information on Reusables check out the Reusables Wiki Entry.
¶ Containers
A container contains objects and is most commonly used to organize Logic Nodes.
Drag and drop objects to the Container to add them to it. Containers can be closed and opened, hiding or showing the contained objects in the editor view. Use Containers to organize Logic Nodes and reduce logic clutter in your Hype.
For more information on working with Containers check out the Containers Wiki Entry.
¶ Select Multiple Objects
Hold one finger down while using another finger to tap on objects you want to select. This can also be used to select individual objects in an object group.
¶ Area Select Objects
Tap the Area Pick icon in the Quick Menu to activate a rectangle selection tool for selecting multiple objects quickly!
¶ Select Similar Objects Menu
To select all versions of an object in the Hype select one object then open the Actions menu and tap Select Similar Objects. This menu includes 5 toggles that can be used to filter the objects that will be selected. Before making a selection, the objects currently included in the filter will appear with a white outline in the editor.
| Same Visual | Selects Objects using the same visual model. This filter is selected by default and cannot be unselected. |
| Same Colors | Selects Objects using the same colors |
| Same Size | Select Objects with the same scale properties |
| Same Nodes | Select Objects that contain the same Nodes |
| In Frustum | Only select objects that currently in view of the Editor camera. |
| Select # Object/s | Tap this to select all filtered objects. The number in this button will update based on the filters selected to show how many objects will be selected. |
¶ Batch Edit
With multiple objects selected any shared parameters can be edited on all the objects at once via the details panel.
Properties that are already set the same on all the selected objects will appear as normal in the details panel. If a property has different settings on some of the objects, text stating “Multiple Values” will appear.
¶ Playtesting
Playtest your Hype before publishing to ensure everything is working as intended. Tap the play icon in the lower right to start a playtest.
During playtesting you have some options to help you test and improve your creation.
Access the playtesting options by swiping from the left side of the screen.
| Left Side | |
| Logic On/Off | Show or hide logic nodes during the playtest |
| Camera | Tap to access a free camera allowing you to look at things outside the game camera view during a playtest |
| Thumbnail | Save the current view as the Hype's thumbnail |
| Show | Toggle between some presets to help you visualize how your Hype might look on different devices |
| Arrow | With the menu open tap the arrow to hide it |
| Right Side | |
| Speed Slider | Speed up or slow down the runtime of your game (fast or slow motion) |
When playtesting with the logic view turned on you can select nodes to see what they are doing and even make adjustments to how they work. Note that any changes made during a playtest will not be saved when returning to the editor.
¶ Save
Hypes can be saved as private drafts, saved as Unlisted or published publicly.
Drafts are saved to HypeHype servers and are available to your profile across devices but will not appear in public feeds, searches or on your public profile and cannot be used in playlists. If you share a draft link with someone they will be able to play your draft. Drafts will not have saved leaderboards or other social features.
Unlisted Hypes share all the characteristics of published hypes except they do not appear in public feeds, searches or on your public profile. Unlisted Hypes are commonly Hypes that are part of a progression based playlist.
Published Hypes are saved and shared publicly. They can appear in public feeds and searches and are available through the creator profile. Once a Hype is published it can still be edited. When saving changes to a published Hype those changes will immediately be applied to the published Hype.
For more on saving and publishing a Hype see the Save & Publish Wiki
¶ Auto-save
Automatic save system records a backup of your Hype.
When loading a Hype in the Editor you will prompted if you would like to load the Autosave.
In the event of an app crash you will be prompted immediately upon reloading the app if you would like to continue working from the autosaved file.
Autosaves are saved locally on your device.
¶ Nodes
Nodes give objects attributes and behaviors.
Nodes can be attached to any object.
By default, objects from the asset library already have a Visual Node, which controls the visual properties of the object including it's 3D model & visual materials. Some objects may also have a Physical Node that define physical properties.
Objects that do not have a Visual Node appear in the editor as colored tiles that are generated upon adding new Nodes from the Logic panel. These objects are invisible during gameplay.
All objects can hold up to 9 nodes (not including Visual & Object Nodes). Additional Nodes can be added by opening the details menu of an object and clicking the ➕ button next to the object Node.
Each Node has editable parameters that can be accessed via the Advanced Details panel when an object is selected.
Add new Nodes from the ➕ button, and remove them via the 🗑️ button.
Executing a Node means that the Node performs its function.
¶ Node Links
Links allow Nodes to work together to create mechanics and logic functions.
Nodes on a selected object can be linked to other nodes and objects by dragging from the link icon on the right of the object widget. This creates a link that indicates its direction by the little arrows traveling along with the link line.
This is just one example of creating a link. There are many different ways to create links and many different types of links.
Link types are identified by different colors:
🔴 Red & ⚫ Grey links can both transmit data to the linked node.
For example a Number Node passes it's value to the Amount of a Transform
A red link also executes the receiving Node. Executing means that it activates the Node once. Sometimes the red link will only execute the linked Node.
For example, pressing a Button executes a Random.
Grey links share data without executing the linked Node.
In the following example each Button press adds a value of 1 to the Number but since the Number Node is not executed it is just holding that value.
🟠 Orange links share values or vectors. Number or Vector Nodes can share values with any Node setting that uses a value or vector. Tap the Node setting in the Advanced Details panel to link it to a Number or Vector Node.
Orange links do not need to be executed.
In the example below anytime the value in the Number Node is updated it will automatically be changed in the Text Node and displayed to the player.
🟢 A green link only sends a "target" to the receiving Node.
For example a Spawner Node targets an object to be the object it will spawn.
¶ Glue
Glue allows objects to be attached to each other. Glued Objects will behave as a single object in the Hype.
A selected object can be glued to another object by dragging from the glue icon to the object it should be glued to. The selected object will become a child of that object.
Tapping the glue button opens a popup of glue details from which glue connections can be removed.
Glued objects are referred to as a child, and the target object is referred to as a parent. If the glued object has a Physical Node attached, it will inherit physical properties from the parent object. However, its physical material can be changed individually.
¶ Details Panel
When an item is selected a details panel will appear in the upper right corner of the screen. Visual Objects show the Basic details panel while Node Objects will show the Advanced details panel. Switch between Basic and Advanced details panels by tapping the tabs at the top of the panel.
¶ Basic Details
| Asset | Tap the image of the asset to swap it out with a new asset from the Asset Library. See Replace Asset for more. |
| Visual Materials |
The 4 colored spheres represent the Visual Material used by the object. Change the object’s visual materials by tapping on the spheres and selecting. Note: This menu always shows 4 visual material options even if the object uses less visual materials. For example, in the image above the tree only uses the first 2 visual materials. |
| Physics Type |
Quickly change the object’s physics type to one of 3 commonly used options:
Unmovable Object - The object has a physical body but cannot be moved by physics. This is the “Static” setting in the Physical component. Dynamic Object - The object has a physical body and can be physically moved by other objects or forces. This is the Dynamic setting in the Physical component Note: Setting this to Unmovable Object or Dynamic Object will automatically add a Physical Node in the Advanced Details Panel. |
 |
Tap the 3 dots to collapse the details panel. Tap anywhere in the minimized panel to expand it back to the Quick Details panel. |
¶ Advanced Details
In the Advanced Details Panel you can access all of the Nodes contained within the object. Additional Nodes can be added by tapping the + Icon to the right of the Object Node.
Tap on a Node to expand its view and edit its parameters.
With the view expanded a small question mark appears over the Node Icon, tap that question mark to access the Wiki entry for that Node.
Links made using nodes in an object will be visualized by lines connecting the component's to the object it is targeting. While the details panel is open this visualization can be changed with the Link Visualization icon at the bottom of the details panel. With this option turned on links will appear between the Details Panel and the targeted objects. With it turned off links will run between the object holding the Nodes and the targeted object.
¶ Node Debug Overlay
Sometimes things may not be working as expected. When this happens it's very helpful to be able to look at a node's properties while the game is running to see what it is doing.
When playtesting, open the Playtest Menu and enable the logic view to see your logic nodes in the scene while you play.
Use the playtest camera to find nodes outside the game camera's view.
Select an object or node and the details panel will appear in the upper right allowing you to see what is happening in any node while the game is running.
Starting a playtest while an object or node is selected will automatically enable the logic view and display the details panel for that object or node.
Note: not all Nodes are supported.
¶ Effects
Effects are used by the Particle Effect Node. Users can create their own particle effects or add pre-made effects from the Asset library. Click the Effects option in the Hamburger Menu to create and edit a Hype's Effects. For more on working with Effects check out Effects Management Wiki & Particle Effects Node Wiki
¶ Light
Hypes have 1 light. The Light Node is automatically in every new Hype. To find the node make sure the logic view is enabled and look for this icon:
The light source in HypeHype is a directional light that provides consistent light throughout the Hype. Set the direction of the light by rotating the Light Node.
¶ Color Picker
The Color Picker is used by any feature in Hype Hype that allows you to give something a color including, Visual Materials, UI Colors & Particle Effects.
On the outside wheel you can select the hue of your color. The inner circle determines the brightness and saturation. The larger of the two circles in the lower left displays the currently selected color while the smaller circle displays the last used color.
Clicking the Currently Selected Color circle will bring up an info panel displaying the RGB & HSV values as well as the HEX code for the selected color. Tapping on this info panel will allow you to manually input the HEX code to create a new color, allowing you to match colors with things even outside of the app.
Clicking the Previously Selected Color will make that the currently selected color. This works across features so, for example, if you are in Particle Effects and make a particle red then go into visual materials and open the color picker that same red will be the previously selected color. This allows you to easily match colors across different aspects of your Hype.
The slider at the bottom adjusts the alpha or transparency of the color.
¶ Editor Notes
Editor Notes are small text fields that are only visible in the Editor. Use them to leave notes for yourself or Remixers. Commenting your logic and leaving helpful notes will help you and other creators edit or Remix your Hype.
Editor Notes can be created from the Quick Menu. The the size and color can be adjusted with a selection of pre-set options.
Notes can be left free standing in the editor or Glued to other objects.
¶ Need More Help?
While this document is still in development you may not always find all the information you are looking for. If you still have questions check out the HypeHype Discord. There you can discuss Hype creation with HypeHype developers and other Hype creators. Don't be shy, there are many knowledgeable Hypsters on the Discord who are happy to help other creators learn the tools they need to realize their dreams.