Dingle’s Tutorial

Construct 2 Tutorial

Pinball

Nicholas Dingle24-1-2014

ContentsPinball....................................................................................................................................................3

The Tutorial.......................................................................................................................................3

Challenges.......................................................................................................................................41

PinballWho doesn’t like Pinball! This tutorial is where I’m determined to show you the tools that you’ll required to start producing a Pinball game but not hold your hand in the level design and multiple level design. However, in saying all that here are the areas that are demonstrated in this tutorial:

Global variables Hinge joints Actual use of gravity Image points

The Tutorial1. Create a New empty project in Construct 2

Sorry it won't look like this

2. Rename the project to Pinball and set the Window Size to 400, 600

3. Change the layout Size to 400, 600 as well

4. The first thing to do is create the Sprites that we’ll use. Add a sprite called LeftFlipper and using the resize button, set the image to 50 width and 20 height and click OK

5. Using the different drawing tools, create something that look like a flipper; such as:

Please feel free to complete the how you’d like it, but make sure it reflects an actual pinball flipper as the next bit requires it.

6. In this stage we need to change the shape of the object’s collision and the point at which the flipper will rotate.

7. Click on the Set Image Origin and Image Points button

8. You’ll receive a new dialog like this

9. What this does is show detailed information about specific points on your image. What we need to add two points to our flipper, one for where it will rotate and the other where we’ll add some force to it

10. On the Image points dialog click the plus button

Rotation point

Add physics force here

11. With ImagePoint1 selected, click the Pencil button to change the name. Type in RotationPoint

12. With RotationPoint still selected, click exactly where we want the point to exist on our sprite.

13. Add another Image point, call this one ForcePoint and place it at the other end of the sprite

14. On the left toolbar click on the Set collision polygon button

15. What you see now is what the sprite looks like to the physics engine, as you can see it’s a rectangle

16. Easiest way to fix this is right click on the sprite, select Guess polygon shape

17. This was my result, not too bad

18. To edit the shape, simply grab a red dot and move it to a new position. To delete a point, right click it and select delete. This was mine after shifting the polygon

19. Close the Edit image dialog

20. Add the Physics behaviour to the LeftFlipper and change to the following properties

21. Delete the LeftFlipper from the Layout

22. Instead of recreating this for the RightFlipper. We’ll just simply duplicate the sprite. DON’T CTRL-drag the sprite as this won’t work. In the Project Panel Right click on LeftFlipper and select Clone

23. You should now have two LeftFlippers

24. Right click on LeftFlipper2, select rename and type in RightFlipper

25. Now to edit the image. Double click on RightFlipper to open the Edit Image dialog

26. On the top toolbar, click on the Mirror button. This should flip the entire image – so we don’t have to flip the image points.

27. Done! Close the Edit image dialog

28. Add another sprite to your project, call it Wall. Set the size to 10x10 and fill in black

29. Close the Edit Image dialog

30. Add the physics behaviour to the wall and set the following properties

31. Delete the wall from the layout

32. Add another Sprite, called Ball. Size = 26x26 and draw a ball

33. Add the Physics behaviour to the Ball and set the following properties

34. Delete the ball from the layout

35. Add another sprite called Bouncer, Size = 30x30 and drawn as a circle

36. Add the Physics behaviour to the Bouncer and set the following properties

37. Delete the Bouncer from the layout

38. Last Sprite I promise! Add another sprite called Spring, set the size to 10x10 and just set it to a solid colour

39. Add the Physics behaviour to the Spring and set the following properties

40. Delete the Spring from the layout

41. OK time to add some layers. Under the Project panel, click on the Layers tab to open the layers panel

42. Layers are a way or organising objects into different sets, to easily manage them. Click the Rename layer button and change Layer 0 to Flippers

43. Using the Add layer button, add 4 more layers and rename to the following

44. Select the Walls layer

45. Click on Projects tab to swap back to the Projects panel

46. Drag on as many Wall objects as you’d like to make up your Pinball layout (limit yourself to walls at the moment)

Mine is a little boring, so it’s up to you to make it interesting for yourself.

47. Go back to the layers panel, Click the lock button next to the Walls layer and select the Flippers layer (you can see where I’m going with this)

48. Switch back to the Projects panel and start dragging in some Flippers

49. Same thing as step 47, lock the Flippers layer and select the Bouncers layer

50. Add as many as you’d like!

51. Lock the Bouncers layer and select the Spring layer.

52. Add the spring in place, make sure it isn’t touching the walls

53. Lock the Spring layer and select the Ball layer

54. Add the ball to the layout (resize it if you need to)

55. OK time for some scripting! This game will be controlled by the mouse. So add the Mouse Object into your project (just like a sprite)

56. Go to Event Sheet 1

57. First thing is we need to lock the flippers into place, that’s easy. Add event and use System->On start of layout

58. Add action and use LeftFlipper and select Create limited revolute joint and click Next

59. Use the following settings and click Done

60. Add another action for event 1, RightFlipper->Create limited revolute joint with these settings

61. Now to add some functionality to them! Add another event, Mouse->On click and use these settings and click Done

62. Add an action for Event 2, LeftPaddle->Apply force and use these settings

63. Add another event for Mouse->On click with these settings

64. Add an action for Event 3, RightPaddle->Apply force and use these settings

65. If you run your game, the paddles should now operate as you’d expect! Here is the event sheet so far

66. Now this is the hardest thing to do; operate the spring. Here is what we need to do:a. See if the Ball is over the springb. If so and the Middle mouse button is held, move the spring down c. When the button is released shoot the ball upward, based on how much the spring

has movedd. Move the spring back to its normal position

67. For this we need to remember two things. How much the spring has moved and if we are allowed to move the spring in the first place.

68. For this we’ll use Global Variables. Right click on some grey colour and select Add global variable

69. Use the following settings and click OK

70. This is it so far

71. Right click and add another global variable use the following settings

72. OK with that in mind, add another event to your Sheet. Mouse->Mouse button is down and the following settings

73. Because we need to know if the Spring hasn’t moved too much in the first place, we need another condition. Right click on Event 4’s Middle button is down and click Add another condition

74. Use System->Compare variable, and use the following settings and click done

75. Click Add action for Event 4 and use Spring->Move Position and use the following settings and click done

76. Click Add action for event 4 again, use System->Add to, use the following settings and click Done

77. Add another event for Mouse->On button released, use the following settings

78. Add another condition to Event 5 (as in Step 73), use System->Compare variable and use the following settings

79. Add one more condition to Event 5, use System->Compare variable and use the following settings

80. This is what you should have for event 5

81. Add action for event 5, Ball->Apply force and use the following settings

The * HowMuchSpringMoved is basically taking how much the spring has been moved by the player and making the spring more powerful depending on the number (20 is the max).

82. Add another action for event 5, Spring->Move at angle, and use the following settings

83. Add another action for event 5, System->Set value and use the following settings

84. Add another action for event 5, System->Set value and use the following settings

85. Almost there. Add an event Ball->On collision with another object and use the following settings

86. Add action for event 6, use System->Set Value and use the following settings

87. There you go! Pretty much done, the only thing left is to reset the ball. Test your game make sure it works.

88. OK I lied… we need one more sprite. Add a sprite call this OutOfBounds, I coloured it in something obvious and set the size to 10x10

89. Delete the OutOfBounds on the layout. Add another layer called OutOfBounds, add the OutOfBounds sprite and place it just outside out game’s layout (lock the layer when you’re

done)

90. Go back to Event Sheet 1. Add another event use Ball->On collision with another object and use the following settings

91. Add an action for event 7, Ball->Set Velocity and use the following settings

92. Add another action for event 7, Ball->Set position and this is the hard part. You need to find the starting position of your ball to set these values to. Here is by Ball’s properties (might have to unlock the Ball layer to see this one)

93. The Position property are the numbers I’ll use in these settings

94. Add another action for event 7, System->Set Value and use the following settings

95. Done!

96. Enjoy your OK style Pinball game

Challenges1. Add a score system

2. Add more objects for the ball to interact with

a. Traps

b. Triggers

c. Tiles

d. Lights to rollover

3. Add multiple levels – using the same techniques as the Breakout tutorial

4. Add multi ball functionality

5. Add highscores and a ladder