Posts

Showing posts from July, 2020

UI Challenge 3: Combination of Button & Slider

Image
UI Challenge 3 Reference I feel that designs are really nice and cute. Besides that, I feel it would be fun if I grab these ideas and make it interactive in my own style. I want to create a mini game which all the elements are interactable. Idea & Sketches My idea is to create a mini game that contains instruments for the user to play with. I list out the ideas that are compulsory to insert in my final design: 1. Piano 2. Violin  3. Bass   4. Gramophone 5. Volume Slider Design Development Process For this project, I want to try something new and different, I create the scene in 1080x1920px (portrait) size.During this process, the script and functions are quite straightfoward as I just apply on every concept that I've learnt during the practices. The most challenging part of this project is to find the perfect audio source. I've searched for a long time so that it fits the overall feeling and mood. I ended up compose and record the audio source by myself. I compose the...

UI Challenge 2: Slider

Image
SLIDER SET 1 Development Process I thought that basic slider is very easy to do as I just have to follow what Mink had taught us during the class. Unfortunately, I faced a lot or problems when creating the slider. For example, my handle of the slider will distort whenever I play it. Secondly, the fill of the slider will change its position when I change its assets. I was very frustrated and seeked help from lecturer. At last, I understand what was the problem and the method to solve it. I realized that it helped a lot when I came across the same problem on Part 3 UI Challenge. By that time, I already knew how to fix it. Besides that, I had learnt how to use 'mathlerp' in order for the value of image to start from 0 to 100.  Final Outcome Rationale The slider is a basic slider. It changes value when the user slides from the left to the right. Basically, the value decreases when the slider moves to left while it increases when it moves to the right. The trolley will follow the sl...

UI Challenge 1: Button

Image
BUTTON SET 1 Visual Reference UI Reference I tried to do something like this but it failed. Design Development Process This is a set of gummy buttons. I designed it in  gummy looking because I planned to develop it into interactive buttons whereby the button will change the shapes following the cursor. I found the reference in Pinterest but the designer used HTML to create the button. I tried to ask Mink about it and it requires a lot of functions such as Mesh Renderer , Circle Collider 2D, etc... I tested it out and it failed because I still haven't own the skills to create such interactive soft body button.Thus, I have to stick back on my initial idea. I use After Effects to create the animation (wave) so that the gummy elements have slimy texture. These series of buttons are quite basic because the buttons will animate only when I pressed on them.  Final Outcome Rationale (Set 1) These sets of buttons share the same characteristics and similar interactive experience.The fir...