Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
1 change: 1 addition & 0 deletions de-DE/code/code-project-example/main.py
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
print("Hello, world")
4 changes: 4 additions & 0 deletions de-DE/code/code-project-example/project_config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
name: "Code Project Example"
identifier: "code-project-example"
type: 'python'
build: false
Binary file added de-DE/images/animate.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/badge.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/ball.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/banner.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/blanket.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/blanket2.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/bricks.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/cat.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/centre.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/choose-sound.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/clip.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/cube.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/direction.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/dog.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/downloadall.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/drawing.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/edit-sound.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/erase.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/grass.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/headphones.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/mat.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/order.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/pen.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/pencil.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/photo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added de-DE/images/pi.png
Binary file added de-DE/images/player.gif
Binary file added de-DE/images/popupsave.png
Binary file added de-DE/images/rabbit.png
Binary file added de-DE/images/rotate-art.png
Binary file added de-DE/images/rotate.png
Binary file added de-DE/images/rug.jpeg
Binary file added de-DE/images/saveas.png
Binary file added de-DE/images/scissors_closed.png
Binary file added de-DE/images/scissors_open.png
Binary file added de-DE/images/screwdriver.png
Binary file added de-DE/images/seashell.png
Binary file added de-DE/images/select_tool.png
Binary file added de-DE/images/size.gif
Binary file added de-DE/images/sound-tab.png
Binary file added de-DE/images/start-text.png
Binary file added de-DE/images/sunglasses.png
Binary file added de-DE/images/text.png
Binary file added de-DE/images/tiles.jpeg
Binary file added de-DE/images/upload.png
Binary file added de-DE/images/usb.png
Binary file added de-DE/images/vector.png
25 changes: 25 additions & 0 deletions de-DE/meta.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
title: This is our flatgame
hero_image: images/banner.png
description: Make an awesome flatgame - a cross between a video game and visual poetry!
pdf: resources/creator-flatgame.pdf
version: 1
listed: true
copyedit: false
last_tested: "2025-01-01"
steps:
- title: What you will make
- title: Make the artwork
completion:
- engaged
- title: Get photos to your device
- title: Add a background
- title: Scrolling
- title: Add a player sprite
- title: Move the player sprite
completion:
- internal
- title: Add sound
- title: Add artwork
- title: Challenge
completion:
- external
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
1
00:00:00,640 --> 00:00:06,400
Open the Scratch starter project and in the 
background sprite, upload one of your photos  

2
00:00:06,400 --> 00:00:16,960
to be used as a background. Rename the sprite 
background and drag it to the top of the costumes.

3
00:00:16,960 --> 00:00:22,320
Delete the placeholder costume, but make 
sure you don't delete the Zoom costume.  

4
00:00:22,320 --> 00:00:31,840
Click convert to vector. Rotate and resize 
the photo so that it covers the paint area.  

5
00:00:31,840 --> 00:00:39,040
In the starter code, change the pull down menu 
in the switch costume block to say background.

Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
1
00:00:00,480 --> 00:00:06,800
The player sprite explores the flatgame, 
checking out different drawings and textures.  

2
00:00:06,800 --> 00:00:15,040
To add a player sprite, upload a new sprite 
and rename it player. Go to the costumes tab.  

3
00:00:15,040 --> 00:00:19,600
Use the eraser tool to remove any part of 
the image you don't want.  

4
00:00:19,600 --> 00:00:25,120
You can change the size of the eraser tool for smaller 
details. This doesn't have to be perfect.  

5
00:00:25,120 --> 00:00:32,480
Flatgames have a very cut-out collage 
feel so it can be roughly done.

6
00:00:32,480 --> 00:00:38,880
With the select tool, drag over the image 
to select it all and centre and rotate the image. 

7
00:00:38,880 --> 00:00:45,840
Convert to vector and use the 
select tool to resize and  

8
00:00:45,840 --> 00:00:51,120
rotate the sprite to how you want it.
Right click and duplicate the costume.  

9
00:00:51,760 --> 00:00:59,040
Move the new costume and rotate it very slightly. 
This will animate it to look like it is moving.

29 changes: 29 additions & 0 deletions de-DE/resources/This is our flatgame - Add artwork - part 4.srt
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
1
00:00:00,400 --> 00:00:05,200
Upload a new sprite and name 
it "artwork one".

2
00:00:05,200 --> 00:00:17,120
Remove any background that you don't want.
Use the select tool and line up with centre.

3
00:00:17,120 --> 00:00:21,840
Convert to vector. And then add the code  

4
00:00:21,840 --> 00:00:26,960
so that the sprite moves in the 
same way as the background.

5
00:00:31,440 --> 00:00:36,480
Add text to tell the story of your 
artwork image. 

6
00:00:36,480 --> 00:00:39,920
Change the colours, the size,
and the position of the text.

Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
1
00:00:00,560 --> 00:00:06,480
Flatgames are a cross between video games and 
poetry. They've got very simple controls where  

2
00:00:06,480 --> 00:00:13,040
the player moves around the screen to explore 
artwork, drawings, and cut-out collages.  

3
00:00:13,040 --> 00:00:18,160
This is your chance to make something fun or 
imaginative to share what code club means to you. 

4
00:00:18,160 --> 00:00:24,800
When you've decided what your flatgame is 
about, you can start making artwork.  

5
00:00:24,800 --> 00:00:29,280
Remember, the flatgames are messy and quick 
and don't really need to make sense.  

6
00:00:29,280 --> 00:00:35,840
Just get started and make, draw, craft 
way more than you need.

7
00:00:35,840 --> 00:00:41,680
Draw characters, backgrounds, textures, words, or anything 
else that's related.

8
00:00:41,680 --> 00:00:46,480
With a tablet or phone, take some photos of your artwork.
You can also take photos of things around the room  

9
00:00:46,480 --> 00:00:51,600
that can be used as a background or texture, 
and this gives the flatgame a cut-out look.

5 changes: 5 additions & 0 deletions de-DE/scratch-translatable.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
move x

move y

background
39 changes: 39 additions & 0 deletions de-DE/step_1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
## What you will make

Flatgames are a cross between a video game and poetry.

They have very simple game controls, where a player moves around a screen to explore artwork, drawings, and cut-out collages.

Here is a flatgame about a beach:

<div class="scratch-preview">
<iframe allowtransparency="true" width="485" height="402" src="https://scratch.mit.edu/projects/1200050605/embed?autostart=false" frameborder="0"></iframe>
</div>
This one gives an ant-size tour of a desk:
<div class="scratch-preview">
<iframe allowtransparency="true" width="485" height="402" src="https://scratch.mit.edu/projects/1200050948/embed?autostart=false" frameborder="0"></iframe>
</div>
And this one is about a card game!
<div class="scratch-preview">
<iframe allowtransparency="true" width="485" height="402" src="https://scratch.mit.edu/projects/1200050338/embed?autostart=false" frameborder="0"></iframe>
</div>

### Was du brauchen wirst:

To make a flatgame, you start by crafting and making hand-drawn artwork for the game.

You'll need:

- 🎨 Drawing or crafting materials (pens, paper, scissors)
- 📷 A phone or tablet to take photos
- 👾 The Scratch [starter project](http://rpf.io/flatgame){:target="_blank"}

Club leaders can download and use the [mentor helpsheet](resources/mentor-help-flatgame.pdf){:target="_blank"} for tips on getting started.

<div style="border-left: solid; border-width:10px; border-color: #41b653; background-color: #e3f4e6ff; padding: 10px; color: #000000; font-family: inherit;">
<h3>Wusstest du schon?</h3>
The original flatgame was made by Llaura McGee, who is a game designer at <a href="https://dreamfeel.ie/" target="_blank" style="color: #0faeb0; text-decoration: none;">Dreamfeel</a>. They started making flatgames to make video games look arty!
</div>



87 changes: 87 additions & 0 deletions de-DE/step_10.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
## Challenge

Flatgames are a great way to be creative and try new things out with scratch. Try some of these challenges - and don't worry about making it neat!

Here are some ideas - have a play! What else can you add?

\--- task ---

### Make start text

Let people know the title of your flatgame and how to play

- Make a paint sprite and call it "start text"

- In the costume tab, add the text you want.

- Move the text so it is easy to read, somewhere near the centre:

![Screenshot of making start-text Scratch editor](images/start-text.png)

- In the start text code, add the following blocks to show and hide the start text when the flag is clicked:

```blocks3
+When flag clicked
+show
```

```blocks3
+when [any v] key pressed
+wait (0.2) seconds
+hide
```

\--- /task ---

\--- task ---

### Add more artwork sprite

Flatgames are great when they are full of art!

- Duplicate the artwork 1 sprite and name it artwork 2

- Upload a new costume and edit it in the same way as the artwork you made earlier.

You can think about where you want to place the new artwork sprites - are they all in a line, or spread out?

\--- /task ---

\--- task ---

### Change layer of artworks

It can be fun for the player spite to walk under and over the artwork, change some of the layers to do this.

1. In the artwork sprite add the layer block to the green flag event.

```blocks3
+go to [front v] layer
```

\--- /task ---

\--- task ---

### Animate the artwork

You could animate some of the artwork to add movement to the flatgame.

- Decide on which artwork you want to animate.

- Select the chosen artwork sprite and duplicate the costume.

- Move the new costume very slightly, this will be the next sequence in the animation:

![Screenshot of making sprite animation in Scratch editor](images/animate.png)

- Make a new green flag event and add this code:

```blocks3
+when flag clicked
+forever
next costume
wait (1) seconds
```

\--- /task ---
82 changes: 82 additions & 0 deletions de-DE/step_2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
## Make the artwork

<html>
<div style="position: relative; overflow: hidden; padding-top: 56.25%;">
<iframe style="position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; border: none;" src="https://www.youtube.com/embed/v6O8Uqkz54E?rel=0&cc_load_policy=1" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
</iframe>
</div><br>
</html>

You'll start by crafting and making hand-drawn artwork based on your Code Club.

This is your chance to make something fun or imaginative and share what Code Club means to you.

\--- task ---

Decide what your flatgame will be about. Choose one of the ideas below, or ask your club leader for suggestions:

- The first thing you see when you arrive at Code Club every week.
- A tool you use all the time at Code Club.
- The best game ever made at Code Club!
- If you have an outdoor space — is there something inspiring about it?
- Your journey to or from Code Club.
- A theme based on right where you are 👀 Look around the room you are in. Was fällt dir auf? What is interesting or different about it?

\--- /task ---

When you've decided what your flatgame will be about, you can start making artwork. Remember that flatgames are messy and quick, and don’t need to make sense. Just get started, and don't worry about making more artwork than you need!

\--- task ---

Draw or craft characters, backgrounds, textures, words, and anything else related to your idea.

![An A4 paper with doodles and sketches. Someone is drawing](images/drawing.png)

\--- /task ---

\--- task ---

With a tablet or phone, take photos of your artwork. You will use these photos for your game, so try to take clear pictures in a bright room. 📸

![Taking a photo with a mobile phone of hand-drawn images](images/photo.png)

If you can't use a camera, there are some images below you can use.

\--- /task ---

\--- task ---

You can also take photos of things around the room that can be used as a background or sprites. These will give the flatgame a cut-out look.

**Remember: Don't** take photos of people faces or identifying features.

- Look around for any interesting textures or patterns, and take photos of details you like.

- Could you make a Raspberry Pi or BBC micro:bit into a sprite? What else could you find?

- Are there any books with some text or pictures that might look cool?

- What about larger things like furniture, or — if you can go outdoors — plants and trees?
\--- /task ---

## No camera? No problem!

You can use the following pictures if you don't have a camera, or create some of your own in the paint editor in Scratch.

\--- task ---

To use the images in the Drive folder, just [follow this link](https://drive.google.com/drive/folders/1zZ06mkskqer21uXyxuO8Hht9szpn9cYc){:target="_blank"} and click `Download all` at the top right of the window that opens.

![Google Drive folder named 'flatgame' with two subfolders, 'Textures' and 'Things', and a 'Download all' button.](images/downloadall.png)

\--- /task ---

\--- task ---

In the pop-up window, choose the folder you want to save the images to — something easy to get back to, like `Downloads`or `Documents`, is good. Call the file `flatgame` and click `Save`.

![Save dialogue window on macOS showing the filename 'grass' being entered, with the Downloads folder selected as the destination.](images/popupsave.png)

\--- /task ---

In the next step, you'll upload your artwork to Scratch!
Loading