Corona SDK: Build a Frogger Inspired Game - Adding Interaction

This is the second installment in our Corona SDK Frogger Inspired tutorial. In today's tutorial, we'll add to our interface and the game interaction. Read on!

Where We Left Off. . .

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

1. Start Button Listeners

This function adds the necessary listeners to the TitleView buttons.

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.

3. Hide Credits

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

4. Show Game View

When the Play 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.

5. Game Background

This code places the background image in the stage.

6. Add Cars

The next lines of code handles the cars' placement on the stage. Each line represents a car, its position, the graphic, the rotation, the direction and the name. We'll create that function later in the tutorial.

7. Add Pad

A pad is added to the stage in order to control the frog.

8. Frog

Next we add our player to the stage.

9. Goals

Rectangles are drawn on the stage to represent the goals. These will be added later to the physics engine and hidden.

10. Physics

We will need physics to handle the collisions. This part of the code takes care of that.

11. Game Listeners

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

12. Add Obstacles Function

The following function creates an obstacle based on its parameters. It creates a physics object of the graphic and adds it to a group.

13. Move Player

Pressing the buttons in the pad will call this function. It will move the player thirty-one pixels in the pressed direction.

14. Update Function

The update function that runs every frame. It is in charge of moving the cars across the stage and restoring their position.

15. Collisions

Finally, we check for collisions. If the frog is hit by a car, the graphics are removed and a You Lose message is shown. When the three frogs have reached their goal, a You Win message will appear, ending the game.

16. Alert

The alert function creates an alert view, animates it, and ends the game.

17. 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:

18. Loading Screen

Loading Screen

The Default.png file is an image that will be displayed 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 compliler.

19. 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 512x512px version first and then scaling down for the other sizes. It doesn't need to have rounded corners or transparent glare; iTunes and the iPhone will do that for you.

20. Testing in 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!

21. 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!


In this series, we've learned about moving an object using an on-screen pad and collision detection using the physics engine, skills that can be really useful in a wide number of games. 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!



Related Articles