Advertisement
  1. Code
  2. Corona SDK
Code

Create an Unblock Game - Adding Interaction

by
Difficulty:IntermediateLength:ShortLanguages:

This is the second installment in our Corona SDK Unblock Puzzle game tutorial. In today's tutorial, we'll add to our interface by creating the interactive elements of the unblock game. Read on!


Where We Left Off. . .

Please be sure to check part 1 of the series to fully understand and prepare for this tutorial.


Step 1: Start Button Listeners

This function adds the necesary listeners to the TitleView buttons.


Step 2: Show Credits

The credits screen is shown when the user taps the about button, a tap listener is added to the credits view to remove it.


Step 3: Hide Credits

When the credits screen is tapped, it'll be tweened out of the stage and removed.


Step 4: Show Game View

When the Start button is tapped, the title view is tweened and removed revealing the game view. There are many parts involved in this view so we'll split them in the next steps.


Step 5: Game Background

This code places the game background image on the stage:


Step 6: Movements TextField

Next we add the movements textfield to the stage. This will count the number of moves done by the player.


Step 7: Create Level

This part creates the blocks defined in the Level variable using a double for statement.


Step 8: Game Listeners

This function adds the necessary listeners to start the game logic.


Step 9: Horizontal Drag

The next function handles the horizontal drag of the blocks.


Step 10: Vertical Drag

Now we create the vertical drag function.


Step 11: Hit Test Function

We'll use an excellent and useful function for collision detection without physics. You can find the original example and source at the CoronaLabs Code Exchange web site.


Step 12: Vertical Borders

This code limits the movement by creating virtual borders.


Step 13: Collisions

Here we handle the collisions between the vertical and horizontal blocks.


Step 14: Horizontal Borders

This code limits the movement horizontally by creating virtual borders.


Step 15: Alert

The alert function stops the game, displays a message and removes the active listeners.


Step 16: Call Main Function

In order to start the game, the Main function needs to be called. With the above code in place, we'll do that here:


Step 17: Loading Screen

The Default.png file is an image that will be displayed right when you start the application while the iOS loads the basic data to show the Main Screen. Add this image to your project source folder, it will be automatically added by the Corona compiler.


Step 18: Icon

Using the graphics you created before, you can now create a nice and good looking icon. The icon size for the non-retina iPhone icon is 57x57px, but the retina version is 114x114px and the iTunes store requires a 512x512px version. I suggest creating the 512x512 version first and then scaling down for the other sizes.

It doesn't need to have the rounded corners or the transparent glare; iTunes and the iPhone will do that for you.


Step 19: Testing in the Simulator

It's time to do the final test. Open the Corona Simulator, browse to your project folder, and then click open. If everything works as expected, you are ready for the final step!


Step 20: Build

In the Corona Simulator go to File > Build and select your target device. Fill the required data and click build. Wait a few seconds and your app will be ready for device testing and/or submission for distribution!


Conclusion

In this tutorial you learned how to make our interface come to life by allowing the user to interact with the game's pieces. Experiment with the final result and try to make your own custom version of the game! I hope you liked this tutorial series and found it helpful. Thank you for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.