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 |
¶ World Builder/Game Editor
¶ World Builder
The World Builder removes features related to game logic and advanced settings so creators can focus on building a level or world. Great for Hypes or Remixes that already have working logic and are being remixed into new levels.
¶ Game Editor
The Game Editor opens all of HypeHype's editor features allowing creators access to edit logic and other advanced options.
¶ Main Options Menu aka Hamburger Menu
Tap the Hamburger Icon to access this menu
¶ Hype 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 |
¶ Editor Settings
| Hype Options | Manage editor settings specific to the Hype like camera mode and work plane |
| My Options | Manage your personal editor settings, more details on the My Options 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 |
| Particle Effects | Create and edit Effects usable by the Particle Effect node in the Hype. Particle Effects Wiki |
| Cinematic Tracks | Create and edit Cinematic Tracks |
¶ Support
Access to support pages
| Editor Overview | Access to this Editor Overview Wiki entry (you're already here :D ) |
| Give Feedback | Access the bug reporting and feedback form on the HypeHype Help Center |
| Discord | Join the HypeHype Community Discord |
| HypeHype Help Center | Access the HypeHype Help Center |
¶ Quick Menu
The Quick Menu provides quick access to some of the HypeHype Editor's features.
¶ Default Options
| 3 Dots | Access to additional options that can be added to the sidebar if desired |
| Thumbnail | Save the current Editor view as the Hype's thumbnail |
| Picking | Drag a selection area and select all objects within it. See Selecting Multiple Objects for more info |
| Reset View | Reset the editor view to the enabled Game Camera view |
| View | Enable or disable what you can see in the Editor: Nodes, Notes, Custom Camera FOV, Fog |
| Redo | Redo the last undone action |
| Undo | Undo the last action |
¶ 3 Dots
| Move/Rotate/Scale Space | Choose how transform options behave |
| Set Camera | Set the Game Camera to the current editor view |
| Add Note | Add an editor note |
| Free 3D / Lock XY | Limit the editor camera's movement or allow free camera movement |
| Delete Mode | When Delete Mode is enabled just tap any object in the game world to remove it |
¶ Edit the Quick Menu
¶ Add Stuff
| Assets | Browse and add assets from the asset library |
| Nodes | Browse and add logic nodes |
| Hierarchy | Browse all assets used in a Hype |
¶ Assets
Access the Asset Library and browse Premade assets, Visual assets, Music, Sounds & Add-ons that can be added to your Hype.
¶ Nodes
Access 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.
¶ 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. Select the container and tap the Eye icon on the object widget to hide the container in the editor.
https://wiki.hypehype.com/20230314_ui_update/overview/edit_reusable.mp4
New instances of a Reusable can be added to a Hype in two ways.
Drag items from the Builder Panel into the Hype. When dragging new instances of Reusables into a Hype they can be snapped to other physical objects.
https://wiki.hypehype.com/20230314_ui_update/overview/builder_drag.mp4
Tap an item in the Builder Panel to enable Add mode then tap in the game world where you would like to add the item. Add as many instances as you like, tap the item in the Builder Panel again to disable Add mode.
https://wiki.hypehype.com/20230314_ui_update/overview/builder_add_mode.mp4
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.
Note: This video was made using an older version of HypeHype, some UI elements may look different in the current version of the app.
¶ Test & Save
| Save | Opens the menu where you can save or publish the Hype and manage Hype Details. Save Page Wiki |
| 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. |
¶ Paste & Log
| Log | The Log provides warnings of potential errors or problems in your Hype. The red circle displays how many messages are currently available. Tap the log to view the current messages. Logs must be rreviewed before the Hype can be published. For more info visit the Editor Log Wiki |
| Paste | When objects are copied to the clipboard the Paste icon appears here. For more view the Copy & Paste section |
¶ 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 | ||
| Actions | Open the Actions menu | ||
| 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 |
||
| Duplicate | Tap to make a copy of the selected object or objects | ||
| Delete | Tap to delete the selected object or objects | ||
¶ 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 or Transform Space, can be changed in the Quick 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.
¶ 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 • Paste icon appears in the lower right side of the screen once something has been copied to the clipboard |
| 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 clipboard 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 lower right side of the screen, right above the playtest button.
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 Model | Selects Objects using the same visual model. This filter is selected by default and cannot be unselected. |
| Same Colors | Selects Objects using the same visual materials |
| Same Size | Select Objects with the same scale properties |
| Same Nodes | Select Objects that contain the same Nodes |
| In Frustum | Only select objects that are 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
The Advanced Transform options found in the Details panel allow you to manually input values for position, rotation and scale as opposed to using the widget handles to make changes.
¶ Transform Spaces
Transform spaces determine how an object will be transformed when making changes via widget handles or inputting values into the advanced transform menu. The Transform Space can be changed from the Quick Menu. By default the icon to switch spaces is behind the 3 dots icon but can be manually added to the side panel.
| 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 |
Not all transform types use all transform spaces
¶ 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.
¶ Behaviors
Holds a collection of Nodes and a reference object. Behaviors can be applied to objects in a Hype, giving that object the properties contained within the Behavior.
Drag a Behavior to an object to apply it's contents to that object. For example you could apply a jump Behavior to your game character to give it the ability to jump.
For more information on working with Behaviors check out the Behaviors 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 Model | Selects Objects using the same visual model. This filter is selected by default and cannot be unselected. |
| Same Colors | Selects Objects using the same visual materials |
| Same Size | Select Objects with the same scale properties |
| Same Nodes | Select Objects that contain the same Nodes |
| In Frustum | Only select objects that are 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 tapping the small triangle on 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
When saving a Hype you have two options: Save or Post.
| Save |
Save your Hype to your Drafts. 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 link to a draft with someone they will be able to play your draft. Drafts will not have saved leaderboards or other social features. |
| Post | Publish your Hype. |
Published Hypes have two possible states, Public or Unlisted, selected using the Unlisted toggle in the save menu.
| Unlisted | Hype shares all the characteristics of public hypes except it will not appear in feeds, searches or on your public profile. Unlisted Hypes can be used in playlists. |
| Public | Hype is saved and shared publicly. It can appear in public feeds and searches and is available through your profile. |
Once a Hype is published it can still be edited. When saving changes to a published Hype you will have the option to Save or Post Update.
| Save | Save changes without updating the published Hype. This allows you to make bigger changes over multiple sessions. |
| Post Update | Update the published Hype with the changes made |
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.
Objects can hold up to 9 nodes (not including Visual & Object Nodes).
Each Node has editable parameters that can be accessed via the Advanced Details panel when an object is selected.
Add new Nodes to an object from the ➕ button, and remove them via the 🗑️ button.
Add new Nodes independent from any objects via the Logic Menu found at the bottom of the screen.
What Nodes are available will depend on how the logic menu is accessed. For example the Node Character Animation can only be used on specific objects so will only appear as an option in the logic menu when tapping the ➕ icon in the advanced details panel of one of those objects.
¶ 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.
Link types are identified by different colors:
🔴 Red & ⚫ Grey links can both transmit data to the linked node.
In this example a Number Node passes it's value to the Amount of a Transform and also executes it.
A red link also always executes the receiving Node. Execute means that it activates the Node once.
In this example, pressing a Button executes a Force node without passing any data.
Grey links share data without executing the linked Node when the target Node uses an “execute” input. If the target Node uses an “Executing” input than executing logic links are also grey.
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 a button press increases the value in the Number Node. The Text Node value is directly connected to the Number Node so the Text Node displays the Number Node value even though the Number Node has not been executed.
🟢 A green link only sends a "target" to the receiving Node.
In this example a Spawner Node targets a small ball 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. |
| Transform | Expand to reveal and manually edit transform values (position, rotation & scale) |
| + Add-On | Tap to select Add-Ons from the asset library to apply to the object |
 |
Tap the drawer icon to expand or collapse the 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. Wiki entries open in a window over the editor so that when you close the window you can continue right where you left of
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.
https://wiki.hypehype.com/20230314_ui_update/overview/sun_direction.mp4
¶ 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.