Skip to content

Commit

Permalink
More updates
Browse files Browse the repository at this point in the history
  • Loading branch information
lawsie committed Oct 25, 2024
1 parent 517fb49 commit ac672cb
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 419 deletions.
4 changes: 2 additions & 2 deletions en/meta.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ steps:
- title: Create obstacles
completion:
- engaged
- title: Collision detection
- title: Speed up!
- title: Lots of obstacles
- title: Collisions
completion:
- internal
- title: Quick quiz
Expand Down
2 changes: 1 addition & 1 deletion en/step_2.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

--- task ---

Open the [starter project](https://editor.raspberrypi.org/en/projects/dont-collide-starter){:target="_blank"} project.
Open the [starter project](https://editor.raspberrypi.org/en/projects/dont-collide-starter){:target="_blank"}.

--- /task ---

Expand Down
315 changes: 35 additions & 280 deletions en/step_3.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,338 +11,93 @@ Create the obstacles that you will have to avoid to keep playing the game.
</div>
</div>

### Start with one obstacle

You can make obstacles in the same ways that you made your player. How do the obstacles fit with your theme?

You are going to use a `for` loop to make lots of copies so you only need to make or choose one obstacle.

--- task ---

Define a `draw_obstacles()` function:
Define a `draw_obstacles` function to draw a cactus emoji 🌵.

--- code ---
---
language: python
filename: main.py - draw_obstacles()
line_numbers: false
line_number_start:
line_highlights: 4
line_numbers: true
line_number_start: 12
line_highlights: 13-14
---


# Draw obstacles function goes here
def draw_obstacles():
ob_x = width/2
ob_y = height/2
text('🌵', ob_x, ob_y) # Replace with your obstacle
text('🌵', 200, 200)

--- /code ---

Add code to `draw()` to call `draw_obstacles()` each frame.
Call the `draw_obstacles` function so that the cactus is drawn on the screen.

--- code ---
---
language: python
filename: main.py - draw()
line_numbers: false
line_number_start:
line_highlights: 5
line_numbers: true
line_number_start: 22
line_highlights: 27
---

def draw():
def draw():
# Put code to run every frame here
global safe
safe = Color(200, 100, 0) # Add the colour of your theme
safe = Color(200, 100, 0)
background(safe)
draw_obstacles() # Before drawing the player
draw_obstacles()
draw_player()

--- /code ---

--- /task ---

--- task ---

**Choose:** What does your obstacle look like? Your obstacle could be:
+ An image provided in the starter project
+ An emoji 🌵 or text
+ Drawn using a series of shapes

--- collapse ---
---
title: Use a starter image
---

Images included in the starter project will be shown in the `Image gallery`.

![The Image gallery displaying the included images.](images/starter-images.png)

Make a note of the name of the image you want to use.

Load the image into the `setup()` function

--- code ---
---
language: python
filename: main.py - setup()
line_numbers: true
line_number_start: 9
line_highlights: 12
---

def setup():
size(400, 400)
global player
player = load_image('turtle.png') # Load your player image
obstacle = load_image('shark.png') # Load your obstacle image

--- /code ---

Find the line `# Keep this to run your code`. Before that line, define a new `draw_obstacles()` function, call `obstacle` as a global variable and use it in the call to `image()`.

--- code ---
---
language: python
filename: main.py - draw_obstacles()
---

def draw_obstacles():
ob_x = width/2
ob_y = height/2

global obstacle

image(obstacle, ob_x, ob_y, 30, 30) # Resize to fit your theme

--- /code ---

--- /collapse ---

--- collapse ---
---
title: Use emoji characters
---

You can use emoji characters in the p5 `text()` function to represent your obstacles.

Here's an example:

--- code ---
---
language: python
filename: main.py - setup()
---

def setup():
size(400, 400)
text_size(40) # Controls the size of the emoji
text_align(CENTER, TOP) # Position around the centre

--- /code ---

Find the line `# Keep this to run your code`. Before that line, define a new `draw_obstacles()` function.

--- code ---
---
language: python
filename: main.py - draw_obstacles()
---

def draw_obstacles():
ob_x = width/2
ob_y = height/2
text('🌵', ob_x, ob_y)

--- /code ---

--- /collapse ---

[[[processing-python-text]]]

[[[generic-theory-simple-colours]]]

[[[processing-python-ellipse]]]

[[[processing-python-rect]]]

[[[processing-python-triangle]]]

[[[processing-tint]]]

[[[processing-stroke]]]

**Tip:** You can use several simple shapes in the same function to create a more complex obstacle.

--- collapse ---
---
title: Draw an obstacle using multiple shapes
---

![A tree drawn with green triangles for the body and a brown rectangle for the trunk](images/tree_obstacle.png)

--- code ---
---
language: python
filename: main.py - draw_obstacles()
---

def draw_obstacles():
ob_x = width/2
ob_y = height/2
# Draw a fir tree
no_stroke()
fill(0,255,0) # Green for needles
triangle(ob_x + 20, ob_y + 20, ob_x + 10, ob_y + 40, ob_x + 30, ob_y + 40)
triangle(ob_x + 20, ob_y + 30, ob_x + 5, ob_y + 55, ob_x + 35, ob_y + 55)
triangle(ob_x + 20, ob_y + 40, ob_x + 0, ob_y + 70, ob_x + 40, ob_y + 70)
fill(150,100,100) # Brown for trunk
rect(ob_x + 15, ob_y + 70, 10, 10)

--- /code ---

--- /collapse ---

--- /task ---

### Get your obstacle moving

--- task ---

Now add code to increase the `y` position of the obstacle each frame, and have it wrap around when it gets to the bottom to create the effect of another obstacle.

The p5 `frame_count` variable starts counting the frames when you click run.

`ob_y %= height` sets the `y` position to the remainder when divided by `height`. With a `height` of '400', this will turn `401` into `1` so when the obstacles goes off the bottom of the screen, it reappears at the top.

--- code ---
---
language: python
filename: main.py - draw_obstacles()
---

def draw_obstacles():
ob_x = width/2
ob_y = height/2 + frame_count # Increases each frame
ob_y %= height # Wrap around
text('🌵', ob_x, ob_y) # Replace with your obstacle

--- /code ---

**Test:** Run your code and you should see a cactus as well as your player.
--- /task ---

### Lots of obstacles

You could draw lots of copies of your obstacle at different starting locations but that's quite a lot of work. Let's use a shortcut.
--- task ---

<p style="border-left: solid; border-width:10px; border-color: #0faeb0; background-color: aliceblue; padding: 10px;">
<span style="color: #0faeb0">**Procedural generation**</span> is used in the creation of game worlds, obstacles, and movie scenes to create randomness but with certain rules applied. A <span style="color: #0faeb0">seed</span> means you can generate the same results every time you use the same seed.</p>

--- task ---

This code uses a `for` loop with `randint()` to choose obstacle positions for you. Calling the random `seed()` function first means that you will always get the same random numbers. This means that the obstacles won't jump around every frame and you can change the seed until you get one that positions the obstacles fairly.
Add two variables to keep track of the obstacle's x and y coordinates. Update the code to draw the emoji so that it uses these variables.

--- code ---
---
language: python
filename: main.py - draw_obstacles()
line_numbers: true
line_number_start: 13
line_highlights: 14-16
---

def draw_obstacles():
seed(12345678) # Any number is fine

for i in range(6):
ob_x = randint(0, height)
ob_y = randint(0, height) + frame_count
ob_y %= height
text('🌵', ob_x, ob_y) # Replace with your obstacle
obstacle_x = 200
obstacle_y = 200
text('🌵', obstacle_x, obstacle_y)

--- /code ---

Useful information:

[[[using-seed-in-python]]]

[[[generic-python-for-loop-repeat]]]

--- /task ---

--- collapse ---
---
title: Epilepsy warning
---

Testing your program has the potential to induce seizures for people with photosensitive epilepsy. If you have photosensitive epilepsy or feel you may be susceptible to a seizure, do not run your program. Instead, you can:
- Make sure you have added the `seed()` line of code to make sure your obstacles don't jump around
- Ask somebody to run it for you
- Move on and complete the project, asking someone to run the project for you at the end so you can debug
- Slow the game down by using `frame_rate = 10` in your call to `run()` like this:

```python
run(frame_rate = 10)
```
You can alter the speed of the game by changing `10` to a higher or lower value.

--- /collapse ---

--- task ---

**Test:** Run your program and you should see multiple objects on the screen, wrapping around when they get to the bottom.

Change your code until you are happy with the obstacles you have. You can:

+ Change the seed to get obstacles in different starting positions
+ Change the number of times to loop repeats to get a different number of obstacles
+ Adjust the size of the obstacles

**Tip:** Make sure it is possible to avoid your obstacles but that there is no easy path through your game.

</div>
--- /task ---

--- task ---

**Debug:** You might find some bugs in your project that you need to fix. Here are some common bugs.

--- collapse ---
---
title: Only one obstacle is being drawn
---

Check your function that draws multiple obstacles:
+ Make sure it uses a `for` loop to call the obstacle drawing function more than once
+ Make sure it uses `randint()` to change the (x, y) coordinates it is passing to the obstacle drawing function
+ Check that you have used `ob_x` and `ob_y` as the coordinates for your obstacle

For example:
Now, add `frame_count` to the obstacle's y (vertical) position.

--- code ---
---
language: python
filename: main.py — draw_obstacles()
line_numbers: true
line_number_start: 13
line_highlights: 15
---

def draw_obstacles():
seed(12345678)

for i in range(6):
ob_x = randint(0, height)
ob_y = randint(0, height) + frame_count
ob_y %= height
text('🌵', ob_x, ob_y) # Replace with your obstacle
obstacle_x = 200
obstacle_y = 200 + frame_count
text('🌵', obstacle_x, obstacle_y)

--- /code ---

--- /collapse ---

--- collapse ---
---
title: The obstacles are changing position every time a frame is drawn
---

Make sure that you have used `seed()` inside the function that draws multiple obstacles.

--- /collapse ---

--- /task ---

<p style="border-left: solid; border-width:10px; border-color: #0faeb0; background-color: aliceblue; padding: 10px;">
Programmers use lots of neat tricks like using the `%` operator to make objects wrap around the screen and the `seed()` function to generate the same random numbers. The more coding you do, the more neat tricks you will learn.</p>
--- task ---
**Test:** Run your code and the cactus emoji should move down the screen until it reaches the bottom.

--- save ---
--- /task ---
Loading

0 comments on commit ac672cb

Please sign in to comment.