Electrical Power and Machines Course: Interactive Laboratory

I developed this Mobile 2D application as a contract developer for the Mechanical Engineering Department at Universiti Teknologi PETRONAS. They had requested for a 2D application to digitise lab experiments for the Electrical Power and Machines course. Using 2D images of electrical components, users interact with virtual plugs and make connections using touch interactions.

Prior to this, I had no knowledge on developing 2D applications. I took on the project believing (and confident) that I would be able to learn the basics and necessities fast enough to complete it within my contract period (three months). Thankfully, learning how to build for 2D platforms was made easy thanks to Zenva academy (not a paid promotion, I really like the learning platform).

Everything else I needed to know to make the project work (such as how to implement scrollbars), I learned through YouTube and forums. Gestures and touch interactions were implemented using Carlos Wilke’s Lean Touch+ asset, which I highly recommend if you are looking to implement touch controls on any device.

About the App

The application features two lab experiments: Asynchronous Machines and Synchronous Machines. It guides the user through a series of lab questions and tasks (the applications’ storyboards were provided to me in advance), making use of touch input to interact with the virtual objects. Each scene represents one step, such as identifying the correct component or connecting plug X to plug Y. The UI panel displays the relevant instructions, hints and additional information (if any).

The game mechanics for most of the lab tasks are simple enough: the user touches two plugs; check if the two plugs match; if the connection is correct, a line connecting the two plugs is rendered. When my contractor first presented the idea to me, I immediately thought: “if statements”. They are perfect for the job. Simple, clean if-statements.

What made it challenging was the number of conditions within each statement, and programming what happens after a certain condition has been met or otherwise. I also had to implement logic to check for other conditions: whether the user had selected a plug at all, whether the user had selected the correct or incorrect plugs, whether the user had selected the plug they were supposed to first, how to make certain icons appear when they should. Making sure each and every plug in each scene behave the same way was a meticulously tedious process.

I created GameObjects that would handle the behaviours of the plugs and placed them over relevant locations in each scene. These “Plug GameObjects” contain 2D Circle Colliders and other relevant components to detect touch input such as the Lean Selectable component. The behaviour of each scene is controlled by a “GameController” script, where I programmed all the necessary functions and logic. It is completely handled by this one object, ensuring encapsulation.

Other tasks include the identification of certain components and dragging and “locking” a 2D component with another. The mechanics for these interactions were fairly simple. I mainly used the LeanSelectable and Lean Drag Translate components from the LeanTouch+ asset and used 2D Box Colliders to detect if anything is happening to the relevant objects (if it is touched, if trigger entered, etc.)

Based on the storyboard, more and more components are displayed as the user progresses through the tasks. To enable the user to easily move around the scene and zoom in and out, I added the Lean Drag Camera and Lean Pinch Camera components to the Camera GameObject. I could easily control the minimum and maximum zoom rates with the given public variables, and edit the speed at which the user moves around the scene with the Dampening variable. Seriously, touch interactions has never been easier with Carlos Wilke’s LeanTouch+ asset.

The UI consists of the following:

  • Instructions: specifies how to complete the lab task
  • Hint: specifies how to complete the lab task with even more detail (it can be shown or hidden with a button)
  • Information: additional details for the students (it can be shown or hidden with a button)
  • Correct feedback: displayed when the user has successfully performed the task correctly. Features a green theme
  • Next question button: only appears once the user has completed the task successfully
  • Incorrect feedback: displayed when the user has made a mistake
  • Error feedback: displayed when the user has not performed a pre-requisite task
  • Exit Application & Back to Home button: displayed when the user presses the Android ‘back’ button

In some scenes, the hint and information UI panels were too large to fit the phone screen. I offered two solutions for this issue to the team: 1) Draggable UI and 2) Scrollable UI. The “Draggable UI” solution is whereby the UI panels are selectable and draggable – the user can select it and place it anywhere on the screen. The Scrollable UI makes use of the scrollbar component to enable the user to scroll through the large amount of text in a fixed space.

I thought that they would prefer the Scrollable UI implementation since (in my opinion) it looked cleaner and more consistent with the rest of the application. However, they chose to implement the Draggable UI – perhaps because it’s much easier to view the information all at once than having to drag a small scrollbar in a small UI panel.

Improvements

  • Add sound effects when the user clicks a plug and when a user connects a plug incorrectly or correctly
  • The game logic to check the connections works, and at the time of writing I could not think of anything better, but I know it can be simplified and improved to be more elegant

Thoughts

The scariest part when taking on this project was knowing that I do not know anything about 2D game development. It all but dissipated when I learnt how to from a single course in Zenva. After that, I tackled the project like I would any other.

Implementing the logic presented a nice and challenging exercise. I remember the frustration I felt when things did not work the way I programmed it to – but this feeling comes with any new project. Building the GameController Script was nerve-wracking – knowing that this single script affects the entire build, and that any small change may or may not destroy it, was scary.

But that is what makes programming so exciting; solving new problems that prop up along the way, figuring out new ways to solve bugs and issues and the tingling excitement and anxiety from typing new lines of code… It was fun. Coding is fun. There is so much more out there to try and explore.

I am grateful that the contractor reached out to me to develop this application and be a part of their team. It gave me the opportunity to not only learn new things, but also the chance to revise and polish things I have forgotten.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s