Comment on page
Navigating the Interface
Understand the Blippbuilder interface
In this guide we will take a look at the different parts of the Blippbuilder interface.
The following sections will provide detailed information on a few important elements of the Blippbuilder tool which can help you get started with creating your own projects.
The design canvas is the middle section of the Blippbuilder interface as shown in the image below:
Design Canvas
- The design canvas provides a 360-degree view of the experience that you are trying to create.
- You can add various elements such as 3D shapes, animation layers or miscellaneous elements such as text, sphere maps, empty sprite etc.
- You can also define the position, scale, lighting and textures of the 3D shapes or any other elements that you might have included onto the canvas by accessing the right panel of the canvas.
- If you are trying to create a project using a printed marker, the selected marker will appear on the canvas.
- You can include various assets on top of the printed marker to create your project.
- You can provide a desired name to the scene you are trying to create. You can add as many scenes as you require.
Now let us navigate to understanding the various elements on the right panel of the design canvas:
On the right panel you can find the following elements listed as shown in the image below:
Project Settings Panel
- Quick Actions- Expand this tab to access various keyboard shortcuts in this panel.
- Project Settings- Expand this tab to access various project settings including lighting, colour, etc. You can also get information on the build and publishing as well as download a copy of the project in this panel.
- Scene- Expand this tab to access scene settings including options such as auto-preload etc.
- Custom Analytics- Expand this tab to include an 'Analytics Label' to easily identify the analyse the performance of the project when published.
There are various customizations that you can define for the loading screen.
Follow the steps below:
- Click the check-box next to ‘Enable Loader Settings’.
- Select a desired colour for the following:
- 1.Font colour- defines the colour of the text
- 2.Background colour
- 3.Progress ring.
- 4.Click the icon in the ‘Add image file’ section to upload an image of your choice and click ‘Done’
This could be a logo image which would appear in the centre of the progress ring. The image size is recommended to be in the range of 150x150px.
- Advanced Blipp Settings:
In this section you can define the following ‘Permissions’ for the Blipp by using the toggle buttons to allow/not allow. It is set to ‘Allow’ by default:
- 1.Share Screenshots
- 2.Add Blipp to Favourites
- 3.Share Blipp Link
- 4.Peel-away
- 5.Scale
- Editor Settings:
You can also allow ‘Code Editor’ or enable other experimental features in the editor by giving permission. This is set to ‘Not Allowed’ by default.
- Upload to cloud- Click the icon save your project on the cloud. You can also see the version history in this section
- Project Recovery- you can save a local file of the project created on your system. Click the icon to save a local copy of your project
- Lighting- the lighting is set to ‘Ambient’ by default. You can change this later from the lighting section. Lighting properties under these Blipp settings are for preview purposes only and adjust the built-in fixed lights in BlippBuilder. If custom lighting is desired in the published experience, light elements should be placed in the scene. For more information refer article ‘Blippbuilder Lighting’
- Texture- the texture is set to grayscale by default. This can also be referred to as ‘Clear Colour.’ This is the default background of the design canvas provided for preview purposes and it does not affect the published experience. You can change this later from the textures section
- "Helper grid radius" specifies the size of the surrounding grid (the default grid when in gyro design mode). When an asset is dragged into the scene, the resulting element will be created on the surface of this sphere (unless you drag onto an existing object, in which case the new object will be created on the surface of that existing object).
- The Scene – You can have as many scenes as desired to create a single AR experience. In an active scene, you can provide a desired scene name by clicking on the bottom panel of the design canvas.
One scene is active at a time.
- Components- this section will reflect the various script modules that you might have uploaded
- Custom Analytics- this section will reflect customized analytics applied to your Blipp along with a label
- The Blippbuilder design canvas comes with a few pre-defined elements and 3D shapes can be used to build the Blipp.
- From the left panel, click on 'Your Library'
- Upload your assets by a simple drag and drop action or browse the system to upload assets.
- Drag and drop the uploaded assets, 3D models from the 3D library, widgets, lighting or animation elements from the left panel to the centre of the screen which is referred to as the 'Stage.'
- In the below image, For eg: An 'empty sprite' element and a 'cylindrical 3D shape' has been dragged and dropped onto the 'stage' as a part of designing the Blipp. Refer image below for more information:
Design Canvas
The following section will explain the various icons in the top panel of the design canvas.
- Project Name: The name of the project provided while creating a Blipp is displayed in the centre of the top panel.
- Learn: Click this icon to be redirected to the learn HUB where you can access tutorial videos on creation of a Blipp.
- Home: Click the Home button to be redirected to the HUB.
- Auto-save: Auto-save is enabled by default and it reflects as All Changes Saved in the top panel.
- Settings: Access General Blipp settings, Custom Loader, Advanced Blipp and Editor Settings.
- Access the marker manager- Click on image icon to access the marker manager
- Undo- Click on this icon to revert the action that was performed on the element/3D model
- Save image of current view- Click on camera icon to save the image of the current view of the design canvas
- Preview- Click the 'Preview' icon to test the Blipp created. You can access this by scanning the QR code displayed on the screen. The test code expires in 20minutes.
- Publish- Click the 'Publish' icon to publish the Blipp created. This means that your Blipp is now LIVE. Scan the QR code on the screen to test the published Blipp. Apply this QR code on all surfaces from which you desire the AR Experience to be triggered.
Each asset or 3D shape which you insert on the ‘Stage’ can have customized layouts, actions, animations, motion effects, positions, lighting, color, texture, fonts, opacity etc.
Let us navigate through the various customizable properties:
- Drag and drop a 3D model or any widegt on to the ‘Stage’. For this example, a text element called ‘Blippar’ has been inserted on the ‘Stage’ as shown in the below image:
Customization
- Click on the widget/3D model that you have inserted on the ‘Stage’
- When you select the element on the design canvas, the right panel will reflect various editable settings using which you can customize your project to suit the requirement.
We have an array of customizations which are listed below:
- Layout
- 1.Define a desired layout for your object in the stage which includes the position, rotation and scale of the object.
- 2.Select the object from the stage and click on 'Layout' from the right panel of the design canvas
- 3.Scale: Resize width and height (click on the padlock icon to maintain the aspect ratio).
- 4.Position: Use the X and Y controls to move the object into the required position on the stage.
- 5.Use the Z control to adjust the depth.
- 6.Rotation: Rotate on its X, Y, and Z axes.
- 7.Ensure Assets are on different Axis to avoid flickering or flashing. This is caused due to assets overlapping on the same 'Z-Axis'
- 8.
Layout
- Action
- 1.The desired action for the object can be defined in this section.
- 2.The actions 'On Touch' can be audio, video, navigation to a website etc.
- 3.Select the object from the stage and click on 'Action' from the left panel
- 4.From the drop-down choose the desired action.
- Basic Properties
- 1.Desired basic properties such as object texture, roughness, metalness, bump, opacity, color etc can be defined in this section
- 2.Select the object from the stage and click on 'Basic Properties' from the left panel
- 3.From the drop-down choose the desired action.
- 4.Refer image below for more information:
Basic Properties
- Components- This section will reflect the various script modules that you might have uploaded
- Custom Analytics- This section will reflect customized analytics applied to your Blipp along with a label
- Add desired animation for the object from the animation layer in the bottom panel
- The animation can have multiple layers and objects
- Refer image for more information
- Click on the expand icon to see the animation applied to the elements
Animation Layer
- Add desired motion effects to the objects. A "Motion Effect" defines a span of time for which a property on an object is animated.
- Select the object from the stage and apply desired motion effects such as move, rotate, scale, fade out, bounce etc.
- Customise various animation effects and create your project.
Last modified 4mo ago