Interactive UI Inspiration #3

So much fantastic interactive UI was made this week! See below for some of my favorites (through March 31) from Dribbble. If you get inspired to make your own site, check out Mammoth Interactive’s Web Developer course.

Ginga website by Zhenya & Artem

Ginga website by Zhenya & Artem

Common Music by Mari Kostrova

Common Music by Mari Kostrova

Sneak Preview of our new contact page by Wonderland.

Sneak Preview of our new contact page by Wonderland.

Menu icons by Pierre Copsey

Menu icons by Pierre Copsey

Book Transition by Alberto Conti

Book Transition by Alberto Conti

DailyUI - Day2^ by Saimon Brath

DailyUI – Day2^ by Saimon Brath

Home part present by Ninja Kasama

Home part present by Ninja Kasama

Fluence iPad by Eleken.

Fluence iPad by Eleken.

Sign in by 李超

Sign in by 李超

Sagmeister & Walsh - Motion & Visual exploration by Nikolay Tarasov

Sagmeister & Walsh – Motion & Visual exploration by Nikolay Tarasov

Page Transition by Pascal Gärtner

Page Transition by Pascal Gärtner

Inspired to make your own website? Use this link to get our Web Developer course for only 9 dollars!

Static UI Inspiration #3

Best static UI from this week (through March 30) on Dribbble. If this inspires you to make your own app, check out Mammoth Interactive’s Ultimate iOS course.

Smarthome app - Voice Control by Majo Puterka

Smarthome app – Voice Control by Majo Puterka

Green Basket App by Dipin Das

Green Basket App by Dipin Das

Website design for a hair salon by Minami Takahashi

Website design for a hair salon by Minami Takahashi

Infrared - Creative Photography Portfolio by Margarida Borges

Infrared – Creative Photography Portfolio by Margarida Borges

404 page for a cooking show by PHAM Bich Trâm Cynthia

404 page for a cooking show by PHAM Bich Trâm Cynthia

Matilde On Bibas Game by Pedro Ribeiro

Matilde On Bibas Game by Pedro Ribeiro

App ui design iOS by Christophe Kerebel

App ui design iOS by Christophe Kerebel

Creative Web Design by Denis Bujupaj

Creative Web Design by Denis Bujupaj

 

 

UI聊天页面 by Ami

UI聊天页面 by Ami

Inspired to make your own app? Check out Mammoth Interactive’s Ultimate iOS course.

Designing a Button | Unity Tutorial

In virtual reality (VR) games, one of the few interactions a player can make is press a button by looking at it. In this tutorial, we will design a button in Unity. If you are a beginner and want to learn how to build virtual reality games, check out our Unity3D course!

VR has limited interactions with keys. Other devices like computers or Xbox, which have a lot of keys that players can press to interact with the game. Create a cube in the Hierarchy. We will have the cube work like a button. Give Cube the position 0 -1 -5. Change its X Scale value to 2.

Create a material in the Assets folder. Make sure that you do not create the material in the Google SDK folders. Name the material “ButtonMaterial”. Drag ButtonMaterial to Cube in the Scene. Change the color of ButtonMaterial to green with RGB values such as 0 184 100.

We will have the button be somewhat see-through. From the Rendering Mode menu in the Inspector, select “Transparent”.

In the Color window, set the alpha of ButtonMaterial to 147.

We will have the button contain some text. Right-click on “Cube” in the Hierarchy. Select 3D Object > 3D Text. “New Text” will appear in the Hierarchy. The text “Hello World” will appear in the Scene.

Set the X Scale value of New Text to 0.5. In the Text Mesh component, set Anchor to “Middle center” and Alignment to “Center”.

Set the text to sit just in front of the cube by changing its Z position to -0.7. Change Font Size to 15. In the Text property of Text Mesh, change “Hello World” to “Btn” (a shortened form of “Button”).

The text “Btn” will be of poor quality in the Scene. To correct this, scale down New Text in the Transform component. Then increase its font size in the Text Mesh component.

As such, the button’s text will be of better quality. Rename New Text “Label”. Rename Cube “Button”. Want to learn more? Check out our Unity3D course, where you build 30 virtual reality games!

Blender Art Inspiration

Dribbble is full of jaw-dropping art. See below some of my recent favorites made with Blender. To learn how to make your own 3D models in Blender, check out our Super Marlo Runner course.

Low poly airplane scene animation by Mohamed Chahin

Low poly airplane scene animation by Mohamed Chahin

Low Poly Elephant Family by Jordan Blakey

Low Poly Elephant Family by Jordan Blakey

Yellow bridge by Maciej Szymaś

Yellow bridge by Maciej Szymaś

Keep dancing by Agatha Yu

Keep dancing by Agatha Yu

shipbuilding by John Oquist

shipbuilding by John Oquist

Inspired to make your own Blender art? Enroll in our Super Marlo Runner course today!

Activating VR Split Mode | Unity Tutorial

If you want to make your game work in VR, you need to activate the VR Split Mode. If you are a beginner and want to learn how to build virtual reality games, check out our Unity3D course!

Once you’ve integrated a VR software development kit (SDK), press Play to simulate the game. Notice that you will still not see the screen split to show the views of two cameras.

With Google VR SDK, we need to make a small adjustment to the game to view the scene in split mode. Stop playing the scene. In Assets, open the GoogleVR folder. Then open the Prefabs folder. We will use the GvrViewerMain.prefab file. This file has been saved for later reuse, so we do not have to build an entire game object that will change the scene.

Drag and drop GvrViewerMain.prefab to the Hierarchy. In the Inspector, you will see that the GvrViewerMain game object contains a Gvr Viewer (Script) component. This script does the VR logic.

Press Play. The Game window will show the scene from two cameras.

In the Hierarchy, click on “Main Camera”. You will see that this object contains Main Camera Left and Main Camera Right.

Click on “Main Camera Left”. In the Inspector, you can see that this camera’s X position is -0.032. Main Camera Right’s X position is 0.032. The distance between the cameras represents 6.5 centimeters, which refers to the distance between the human eyes.

A VR game contains two cameras to represent two human eyes. The left camera shows the scene from the player’s left eye. The right camera shows the scene from their right eye. With the help of a VR device, dividing the view into two cameras makes feel as though they are in a virtual world.

Create a cube in the Hierarchy. Move the cube closer to the camera. If you cross your eyes, you may be able to see the illusion that occurs because of the split view: the cube appears to be popping from the screen.

Press and hold the Alt/Option key. As you move the cursor, you will be able to look around the scene. If you hold Control, when you move the cursor, the scene will tilt. This could be used to change the weapon a player is holding when the player tilts their head.

Want to learn more? Check out our Unity3D course, where you build 30 virtual reality games!