I actually created this tutorial in German for my students, I hope there aren't too many mistakes with the translation into English. It is meant for people, who don't know much about C2.
1. Open C2 and then open a “new empty project“.
Let’s start with the playing field and its boundaries.
2. Creating boundaries: Click on the white background. To the left you find the window “properties”. Choose “layout size”: 854, 480.
3. Inserting an object: Right click on the white background and choose “insert new object”. Double click “sprite” object. Now the cursor looks like a plus. Click the white background again.
4. Designing the object: Many windows open up. Choose the bucket symbol (middle window, named “edit image”). A new window opens up named “color palette”. There you choose the color black. In window “edit image” you just click on the big square in the middle, so that it turns black. After closing this window, a black square appears on the white background.
5. Changing object properties: When the object is chosen, the window “properties” appears to the left. There you can change the following values:
name: wall
size: 854, 16
Adding behaviors to the object: Click on “behaviors”. A new window named “wall: behaviors” opens up. Click the plus. In the new window “add behavior” you choose “solid” with a double click. Close the windows.
6. Move the wall to the top of your field, so that it looks like this:
see Pong1
7. Copy&paste the wall (click on the wall, press strg and c, then press strg and v, then click on the background).
Move the second wall to the bottom of your field. Both walls limit the playing field, so that the ball will bounce off later on.
Now let’s create the ball!
8. Create another black sprite object with the following values (check 3-5):
name: ball
position: 427, 240
size: 16, 16
behaviors: bullet
speed: 225
bounce off solids: yes
set angle: no
Info: The ball will move with speed 225, it will bounce off the walls and move back into the playing field in a random angle.
It’s time to create the players!
9. Create another red sprite object. Attention: After coloring the square in the window “edit image” red, do not close the window! Can you see the window “animation frames (1)”? There you right click the empty white space. Choose “add frame”. In the window “color palette” you choose blue and click the square in window “edit image”. To the very left in window “properties” you change the following value:
speed: 0
Now you can close “edit image”. Choose the red square and change:
name: pad
position: 20, 240
size: 16, 48
behaviors: solid
Click on “instance variable” (window “properties”). In the new window “pad: instance variables” you click the plus. In the new window “new instance variable” you change:
name: player (type must already be “number” and initial value “0”)
10. Copy&paste the red square (check 7). Change:
angle: 180
position: 834, 240
player: 1
initial frame: 1
Info: We create the second player as a copy of the first one with the same properties, but 180° rotated and blue (that’s what we did in the “animation frame” window).
Great! Now we can check out what we did so far. At the top of our main window C2we find the symbol for play. As soon as the cursor reaches it, we can read the description “run layout”. Click it! A tab opens up in your browser, there we will be able to play the game later on. Your layout should look like this at the moment with the ball moving between the players:
see Pong2
After closing the tab, we get back to the player’s functions. We want to be able to navigate the left, red player up and down with the arrow buttons while the right, blue player is meant to be controlled automatically by the computer.
11. a) Choose the red player and add the following:
behaviors: 8 directions
b) Now you change:
directions: up&down
set angle: no
default controls: no
12. Repeat 11.b) for the blue player!
13. Right click the background to create a “keyboard” object.
14. Choosing another tab: Can you see the blue and yellow tabs above you playing field? They are called “layout 1” and “event sheet 1”. Until now we were only working within the layout tab. Now choose the “event sheet”.
15. Addind an event: You can either click on the grey writing “add event” or double click the background or even right click and choose “add event”.
The window “add event” opens up. Choose “keyboard” and then choose “key is down”. A smaller window opens up, there you click <click to choose>. When another very small window opens up, you simply press the arrow “up” on your keyboard, so that the words “up arrow” appear below “press a key”. Confirm with “ok”, then with “done”.
Right click the space between the number 1 and the keyboard symbol.
see Pong3
Choose “add” and then “add another condition”. Choose “add”. In the new window “add condition” you choose “compare instance variable” (you can also search for this at too of the window with the search function). Two windows open up, but you just click “done”.
Now click “add action” (look at the circle in the image above). Choose “pad”, then choose “simulate control”. In the new window you choose “up” (next to “control”) and confirm with “done”.
16. Again, click the space between 1 and the keyboard. By doing this, you choose the whole event, it turns yellow. Copy&paste!
17. Now the same event appears, but with the number 2 at the beginning. Double click “up arrow”, in the new window double click “up arrow” again. Now you need to press the down arrow on your keyboard. Confirm with “ok” and “done”. Double click on “simulate 8direction pressing up”. Instead of “up”, you now choose “down”.
Info: We just programmed the red player, so that we can navigate it with the buttons arrow up and arrow down. Actually we could have chosen any other button, as well.
18. Create a new event. Choose “pad”, then “compare instance variable”. In the new window “parameters for pad: compare instance variable” you change:
value: 1
19. Right click the space between 3 and pad, choose “add”, then “add sub-event”. Choose “pad”, then “compare Y”. In the new window “parameters for pad: compare Y” you change:
comparison: < less than
Y co-ordinate: ball.Y (you need to type it in and confirm with enter)
To the right in line 4 you choose “add action”, then “pad”, then “simulate control” and finally “down”.
20. Copy&paste the sub-event. Double click on “Y < ball.Y” and change it into “Y > ball.Y”, by choosing “> greater than” instead of “< less than”.
Now double click on “simulate 8direction pressing down”. Instead of “down” you now choose “up”.
Info: We now programmed the virtual, blue player. He will always try to be on the same level or height as the ball.
see Pong4
Check your progress with “run layout” and check the handling of the red player. You may need to hit the ball with the edge of your player, so that the ball bounces off in a different angle. The game is over, when the ball “leaves” the field. We want to change that in the last step. After every goal, a new ball will appear in the middle of the field.
21. Create a new event. This time you choose “ball”, then “is outside layout”.
To the right you click “add action”, then “ball”, then “set position”. Change:
X: 427
Y: 240
Congratulations!
You created your first game! Don’t forget to save it. Anyone who has C2 installed, can play your game in the browser, when you send the file. The person just needs to click “run layout”. You can continue work at this file at any time.
If you wish, you can vary many things, such as the ball’s speed, the colors, the second player, sound effects or the background (create a new layer and move the objects, rename the first layer, call it “background”). Some changes might be more complicated, check out scirra.com to get more help!