The HypeHype Editor allows you to create, edit and remix Hypes!
¶ **** WIKI NOTE ****
The November 20, 2023 update brought significant changes to the HypeHype Editor UI, please bear with us as we work to update this documentation to reflect all the changes in the new editor layout
¶ 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 |
¶ 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 |
| Delete Mode | Enter delete mode and delete items from your scene by tapping them |
| Set Camera | Set the Game Camera to the current editor view |
| Reset View | Reset the editor view to the enabled Game Camera view |
| Area Pick | Drag a selection area and select all objects within it. See Selecting Multiple Objects for more info |
| Snapping | Select snapping modes for objects & logic |
| Redo | Redo the last undone action |
| Undo | Undo the last action |
¶ Additional Options
| Thumbnail | Save the current Editor view as the Hype's thumbnail |
| Add Note | Add an editor note |
| View | Enable or disable what you can see in the Editor: Nodes, Notes, Custom Camera FOV, Fog |
| Move/Rotate/Scale Space | Choose how transform options behave |
| Free 3D / Lock XY | Limit the editor camera's movement or allow free camera movement |
| Hierarchy | Access to the Hierarchy menu |
¶ Snapping Modes
There are 4 options for snapping objects:
| Free Movement | Objects can be moved freely in the world |
| Snap to Edges | Objects will snap to the edges of other objects |
| Snap to Grid | Objects will snap to the working plane |
| Physical Collision | Objects can be moved freely but collide with other objects that have physical collision models note: this mode only works with objects that have a physical collision model |
Logic snapping can also be enabled or disabled from the Snapping Mode menu. Logic will always snap to the grid unless logic snap has been disabled.
¶ Edit the Quick Menu
¶ Toolbar
Found at the bottom of the screen in portrait and the right in landscape, the toolbar is where you will find most of the tools, features and assets you need to create a game in HypeHype.
| Environment | Edit Ground & Sky settings |
| Build | Add or edit Reusables, Behaviors & Tiles |
| Texts | Create or edit Texts & Editor Notes |
| Colors | Create or edit Visual Materials & UI Colors |
| Physics | Create or edit Physical Materials & Gravity Settings |
| Logic | Add or locate Logic Nodes & Timelines |
| Effects | Create or edit Particle Effects |
| Music | Add music to be used by the Music Player |
| Settings | Edit General Settings, Player Save Settings, Hype Editor Settings, My Editor Settings & Layers |
| My Assets | Add & manage custom assets & audio recordings |
¶ Paste
When something has been copied to the clipboard tap the clipboard icon to paste it into the game world.
The number of object groups in the clipboard is displayed in the upper right of the icon.
The clipboard can hold up to 5 object groups.
More Info: how to Copy & Paste objects.
¶ 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 reviewed before the Hype can be published.
More Info: Editor Log Wiki
¶ Asset Library
Tap the Assets Icon to open the Asset Library and add new assets into your scene.
From the Asset Library you can add:
- Premades - objects with logic
- Models
- Particle Effects
- Logic - premade logic set-ups
- Music & Sounds
- Behaviors - logic that can be applied to objects
- Animations
- Tiles
- Custom Assets
¶ Playtest
Tap the Play Icon to start a playtest of your Hype. Check the Playtesting section for more info on playtesting options.
¶ Save
Tap the Save Icon to go to the Publish page and save your Hype.
¶ 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 Clipboard Icon will appear in the lower right side of the screen to the left of the Asset Library
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.
¶ Behaviors, 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 | |
| Node 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 | Tap to open or hide the playtest options |
| 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 arrows traveling along with the link line.
The visualizations for links will also give some indication what the link is doing.
¶ Red Links
Red links always execute the target node.
Red links may also share data with the target node
¶ Gray Links
Gray links only share information, they will not execute the target node
¶ Math Links
Math links will perform some math in the target object and the link will show the symbol for the type of math operation being performed.
Math links can be Red or Gray depending on if they execute the target node.
¶ Reader Links
Reader Links can share values with the target node without the source node being executed.
Reader Link visualization will be different depending on what type of value is being shared.
¶ Yellow Links
Yellow Links share a single value.
¶ Orange Links
Orange Links share a vector.
¶ Pink Links
Pink Links share Rotation data.
¶ Object Links
Object links share an object with the target node.
Object Links can be Green or Blue. Green if the link is coming directly from the object, Blue if the object is being sent through a node
¶ 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 |
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) |
 Behavior Settings |
Any Behaviors applied to an object will appear at the bottom of this panel. If they have editable properties they can be edited here. |
| + Behavior | Tap to select Behaviors from the asset library to apply to the object |
 |
Tap the drawer icon to expand or collapse the details panel. |
 |
Tapping the target icon will center the editor camera on the selected object |
¶ 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.