BreynGINE

My first game (welcome tutorial)

You're reading the tutorial on the web. In the editor on a computer it's in Help > Tutorials, next to your project. The links that copy drawings and sounds into your project in the editor download them as a ZIP here; on a phone, BreynGINE offers to copy them when you open the tutorial.

Chapter 1Welcome

This tutorial teaches you how to make a complete platform game, from scratch and without writing a single line of code. At the end you'll have a character that runs and jumps, coins to pick up, a score, an enemy to stomp on and a victory screen.

The game you are going to make: "My first game". (The pictures of this tutorial show the editor in Spanish; the buttons are in the same places.)
The game you are going to make: "My first game". (The pictures of this tutorial show the editor in Spanish; the buttons are in the same places.)

Along the way you'll get to know the three tools that make BreynGINE easy:

  • Sprites: to draw your characters and objects pixel by pixel, with their animations.
  • Audio: to see the shape of sounds, trim them, make them louder and take their background noise out.
  • BreynFlow: to say what each thing does with rules that read like sentences: "When something happens, if something is true, do this".

Each chapter is one step, with screenshots. The tutorial is in the Tutorial tab, next to Game: you can drag it to any panel, or out of the editor to have it in its own window. Take your time: you can close it whenever you want and come back from Help > Welcome Tutorial; it opens on the chapter where you left it.

Tip: if you make a mistake, Ctrl+Z undoes almost everything (also in Sprites, in Audio and in BreynFlow rules), and Ctrl+S saves the scene.

Whenever you're ready, press Next.

Chapter 2The editor at a glance

Before starting, a quick tour of the screen. If you have used Unity, it will all feel familiar.

1
Hierarchy: the objects of the open scene (the character, the ground, the coins...). The + button creates new objects.
2
Project: the files of your game: scenes, drawings, sounds...
3
Scene: where you place and move objects. The tabs at the top change the tool of this area: 2D, 3D, Script, BreynFlow, Audio and Sprites.
4
Game: your game shows here when you try it with the ▶ button (top right).
5
Inspector: the properties of the selected object: its position, its size, its color... At the very bottom there's the Add Component button.
6
Help: explains what you do with BreynFlow and suggests the next step.
7
Console: messages from the editor and from your game.
Tip: panels can be dragged by their tab to any edge, as in Unity. If they ever get messy, Editor > Editor Layout > Default puts them back.

Chapter 3Your project

Every game lives in a project: a folder with its scenes, drawings and sounds. For this tutorial, create a new one from the Project Manager (if you're inside another project, use Project > Quit to Project List).

1
Press Create (or Create New Project).
2
Write the name: My first game, and choose the folder to keep it in.
3
In Template, choose 2D (camera). You start with a scene ready, with its camera.
4
Press Create. The editor opens with your project.
The templates: choose "2D (camera)".
The templates: choose "2D (camera)".
Tip: in the Asset Store tab of the Project Manager you have the Platformer with BreynFlow template, with a similar game already made (click it and then Download). It's nice to look at after the tutorial.

The editor opens the scene main, with two objects in the Hierarchy: Main, the root of the scene, and Main Camera, the camera that decides which part of the world is seen.

Chapter 4The camera and the color of the sky

We're making a retro-style game, with small 16-pixel drawings. To see them big, we'll tell the camera to come closer.

1
In the Hierarchy, click Main Camera.
2
In the Inspector, find Zoom and set it to 2 (x and y). Now everything looks twice as big.

In the scene you'll see a rectangle: what the camera shows, the screen of your game. The whole level will fit inside.

Now the sky. The background is gray by default; let's make it blue:

1
Open Project > Project Settings.
2
Write clear color in the search box and click Environment.
3
Click the color bar of Default Clear Color and choose a light blue, like the sky.
4
Close the window.

Chapter 5Draw the hero

Time to draw. Press the Sprites tab at the top.

1
Press New Sprite...
2
Name: player. Width and height: 16 (or choose 16 x 16 in Common sizes).
3
Press OK.

You now have a transparent 16 × 16 pixel canvas. On the left are the tools: pencil (B), eraser (E), fill (G), line (L), rectangle (U), ellipse (O), color picker (I) and select (M). On the right, the colors, layers and animations; at the bottom, the frames.

Pick a color in the palette (or press the color box for any other) and draw with the pencil. The right button paints with the second color (transparent: it erases). The mouse wheel zooms in.

Drawing: dark outline, orange body, eyes and cheeks.
Drawing: dark outline, orange body, eyes and cheeks.
Tip: turn on the left-right mirror (the button with ↔ arrows) and what you draw on one side appears on the other. Perfect for faces.

The animations

A living character moves. We'll make three animations:

  • idle: 2 frames, breathing (the second one with the body one pixel lower).
  • walk: 2 frames, with the feet in different places.
  • jump: 1 frame, with the feet together.

For the next frame, press Copy at the bottom right (it duplicates the current frame) and change what moves. The onion skin (the last button on the left) shows the previous frame faintly so you don't lose your place.

Then, in Animations, press + Animation, give it its name and choose its first and last frame and its speed. For jump, turn Repeat off.

Five frames and three animations: idle (1-2), walk (3-4) and jump (5).
Five frames and three animations: idle (1-2), walk (3-4) and jump (5).
Important: use exactly the names idle, walk and jump: BreynFlow will use them to animate the character by itself.

Press Save. In the sprites folder of the Project panel you'll find your drawing, its sprite sheet and its animations (..._frames.tres).

Chapter 6The coin and the enemy

With what you know, draw two more sprites:

The coin: New Sprite... named coin, 12 x 12. Make 4 frames so it spins: the round coin, narrower, edge-on and narrow again. Make the animation spin with the 4 frames at 8 frames per second, and save.

The coin with the onion skin on.
The coin with the onion skin on.

The enemy: enemy, 16 x 16, with 2 frames (squashed and stretched) and the animation walk. Save.

Tip: already have drawings made in Aseprite, or a downloaded sprite sheet? Open... opens Aseprite files with their layers and animations, and Cut Sheet... splits a sprite sheet into frames.

Chapter 7Clean the sounds

A game without sound is half done. Recording a sound with a phone is easy, but there's usually some silence at the start and at the end, low volume and background noise (a hum, the wind...). The Audio editor fixes that.

To practice, use the two sample sounds of this tutorial: copy the sample sounds to the project (download the ZIP). They appear in the sounds folder: moneda_grabada.wav (a coin) and salto_grabado.wav (a jump).

Press the Audio tab, then Open... and choose moneda_grabada.wav (you can also right-click the sound in the Project panel and choose Edit Audio).

The waveform: that "fuzz" before and after the sound is background noise.
The waveform: that "fuzz" before and after the sound is background noise.

Take the background noise out

As in Adobe Audition: first you show the editor what the noise sounds like, then it takes it out of the whole sound.

1
Drag on the waveform to select a piece with only noise, without the sound: the beginning, for example. Half a second or more.
2
Open Effects > Capture Noise Profile.
3
Click anywhere on the waveform to clear the selection (with nothing selected, effects apply to the whole sound).
4
Open Effects > Reduce Noise.... Listen lets you hear it before applying it. If the sound becomes strange, lower the Reduction; if noise remains, raise the Sensitivity. Press Apply.
After: the line is flat where there was only noise.
After: the line is flat where there was only noise.

Trim, make it louder and save

1
Select only the sound, from just before it starts until it fades, and press Trim (Ctrl+T): only the selection stays.
2
With nothing selected, Effects > Normalize... makes it as loud as it can be without distorting.
3
Select the last bit and apply Effects > Fade Out, so it doesn't end abruptly.
4
Press Save As... and save it in the sounds folder as coin.wav.

Do the same with salto_grabado.wav and save it as jump.wav.

Tip: Effects also has echo, reverb and filters. And if you open an MP3, saving makes a WAV or OGG copy (MP3 files can't be written).

Chapter 8Build the level

Go back to the 2D tab. We'll make the ground, three platforms and two walls.

In the Hierarchy, select Main and press +. The 2D Game section has objects ready to play: each one comes with its physics body, its collider and a colored placeholder drawing.

The Create menu: Player, Platform, Pickup and Enemy.
The Create menu: Player, Platform, Pickup and Enemy.
1
Choose Platform. A green bar appears in the middle of the view. To rename it, select it in the Hierarchy, press F2 and call it Ground.
2
Make it longer: with the Scale tool (S key) stretch it across the screen, or in the Inspector, in Transform > Scale, set x = 6. Put it at the very bottom, inside the camera rectangle (for example, Position y = 146).
3
Create three more platforms and place them like stairs, each one a bit higher than the last (for example at x = -150, 0 and 150, with y = 84, 34 and -16).
4
For the walls, create two more platforms, set Scale x = 0.17 and y = 20 (tall and thin) and move them to the left and right edges of the screen. Nobody leaves the level now.
The level: ground, three platforms and two walls at the edges.
The level: ground, three platforms and two walls at the edges.
Tip: to change the color of a platform, select its child Drawing and change Color in the Inspector.

Chapter 9The player

1
Select Main in the Hierarchy, press + and choose Player (Platformer). A blue square appears: the placeholder drawing. Move it above the ground, on the left.
2
With the Player selected, go to the Sprites tab, open your player drawing (with Open... or double-clicking it in the Project panel) and press Add to Scene.

The drawing replaces the blue square and the collider fits its size by itself. The player is already in the group player, which we'll use in the rules.

If you pressed ▶ now, the player would stand still: it doesn't know what to do yet. BreynFlow teaches it.

Chapter 10Bring it to life with BreynFlow

BreynFlow is the way to give orders to objects without programming. Each rule has three parts:

  • WHEN: what happens (the game starts, a key is pressed, two things collide...).
  • IF (optional): what must be true (it's on the floor, there are 5 coins...).
  • DO: what happens then (move, jump, play a sound, disappear...).
1
Select the Player and, in the Inspector, press Add Component > BreynFlow (Rules Without Code).
2
Press New Rule. The piece finder opens, sorted by topic, with an explanation and an example of each piece. Choose Life Cycle > Every Frame and press Add to the Rule.
3
In the rule, press Action (in DO). Write move in the search box and choose Move with the Controls.

Changing the values

The highlighted words in rules can be changed with a click. Click the speed and, in the settings that open, set:

  • Speed: 120.
  • In Look: Idle Animation, Walk Animation and Jump Animation: idle, walk and jump, the names of your animations. The character walks, stands or jumps with the right drawing, and faces where it goes.

The jump rule

Press New Rule again and make this one:

1
WHEN: Input > Key or Button. By default it's "ui_accept": Space or Enter (and the A button of a gamepad).
2
IF: press Condition and choose Physics > Is on the Floor (so it can't jump in the air).
3
DO: Jump, with force 380.
4
DO: Play Sound. Click the sound and, in its settings, drag jump.wav from the Project panel onto Sound (or click it and choose Load).

Click "Rule 1 (click to name it)" and name the rules Move and Jump:

The two rules of the player, in the BreynFlow tab.
The two rules of the player, in the BreynFlow tab.
Tip: under each rule, in italics, BreynFlow reads it out as a sentence. If the sentence says what you want, the rule is right.

Chapter 11Let's play!

Save the scene (Ctrl+S) and press ▶ (top right), or Ctrl+P. Your game appears in the Game panel.

Move with the arrow keys and jump with Space. Try climbing the platforms.

It moves and jumps!
It moves and jumps!

While you play, look at the BreynFlow tab: each rule flashes when it runs and counts how many times it did (▶ 25). If a condition isn't met, it's marked. It's the easiest way to find out why something doesn't work.

To stop, press the square ■ (or Ctrl+P again).

Tip: can't the character reach the first platform? Raise the jump force or lower the platforms a bit. Tuning is part of making games.

Chapter 12The coins

1
Select Main, press + and choose Pickup (Coin, Star...). Put it above the first platform.
2
With the coin selected, go to Sprites, open your coin and press Add to Scene. It spins by itself: its animation starts when the game runs.
3
Add BreynFlow to it (Add Component) and make this rule:
  • WHEN: Physics > Collision. It comes ready: "this object touches the group player".
  • DO: Change Variable: write coins as the name, click of the object to make it global (for the whole game) and leave add 1.
  • DO: Play Sound: coin.wav.
  • DO: Destroy: this object (the coin disappears).
The rule of the coin, named "Pick up".
The rule of the coin, named "Pick up".

More coins

Select the coin in the Hierarchy and press Ctrl+D four times. Each copy comes with its drawing and its rules. Spread the five coins over the level: one on each platform and two on the ground.

Five coins spread over the level.
Five coins spread over the level.
Tip: copies made with Ctrl+D share their rules: if you change the rule of one coin, all of them change. Very handy for equal objects.

Chapter 13The score and the victory

The coins are counted, but you can't see it. Let's show it.

1
Select Main, press + and choose UI > Text. Call it Score. In the Inspector, in Text, write Coins: 0, and move it to the top left corner of the screen.
2
Make another text, Victory, with the text You win!, in the middle. To make it bigger: Theme Overrides > Font Sizes > Font Size = 28. Then hide it: click its eye in the Hierarchy (or turn Visible off in the Inspector).
3
Add BreynFlow to the Score with three rules:
  • Start with no coins. WHEN: Scene Starts. DO: Change Variable coins (global): set to 0. So, when starting again, the old coins don't carry over.
  • Show the coins. WHEN: Variable Changes: coins (global). DO: Change Text of this object to Coins: {coins}. What's between braces is replaced by the value of the variable.
  • Win. WHEN: Variable Changes: coins (global). IF: Compare Variable: coins (global) greater or equal to 5. DO: Show or Hide: show the Victory text (click the object, choose An object of the scene... and then Victory); Wait 2 seconds; Restart Scene.

Try the game: each coin adds to the score and, with the fifth, you win!

Chapter 14An enemy

A bit of excitement.

1
Select Main, press + and choose Enemy. Put it on the ground, on the right. It's already in the group enemies.
2
With the enemy selected, open your enemy drawing in Sprites and press Add to Scene.
3
Add BreynFlow to it with four rules:
  • Walk. WHEN: Every Frame. DO: Walk Back and Forth, speed 40.
  • Turn at walls. WHEN: Lands or Hits a Wall (it comes as "hits a wall"). DO: Turn Around.
  • Stomped. WHEN: Collision with the group player. IF: Collision Side: the other object came from above. DO: Bounce the other object (the player) with force 260; Destroy this object.
  • Touches the player. WHEN: Collision with the group player. IF: Collision Side: from the side. DO: Activate or Deactivate: deactivate the other object; Wait 0.5 seconds; Restart Scene.

Now the enemy walks back and forth. If you stomp on it, you bounce and it disappears; if it touches you from the side, you start again.

The finished level, in the scene.
The finished level, in the scene.
Tip: "the other object" is the one taking part in the event: in a collision, the one that collided with this one. That's how a rule of the enemy can do things to the player.

Chapter 15Play it and share it

Your game is finished! Save (Ctrl+S) and press ▶ to enjoy it.

To take it further:

  • On an Android phone: Project > Tools > Generate APK (Android)... makes the installer with one button. With App Icon... in the Sprites editor, your character can be the icon.
  • On the computer: Project > Build Settings (Ctrl+Shift+B) to choose the platform and build.
  • Publish it on the Breynart App Store (Help > Breynart App Store).

Chapter 16What next?

You know the basics of the three tools. Some ideas to keep going:

  • Add background music: a "Scene Starts" rule with Play Music. It can repeat whole, or only a section, without gaps.
  • Make more levels: create another scene and, when winning, use Change Scene instead of restarting.
  • Add lives: a global variable "lives" that goes down when the enemy touches you, and the text "Lives: {lives}".
  • Explore all the pieces in the BreynFlow finder: timers, messages between objects, save and load game, chase the player...
  • Look at View as Code in the rules: BreynFlow shows how they would be in C#, in case you want to start programming one day.
Tip: the Help panel always tells you what the selected piece does. And this tutorial stays in Help > Welcome Tutorial for whenever you need it.

More tutorials

Want more? To see more tutorials, go to the Help > Tutorials menu. There you'll find, with step-by-step pictures like this one:

  • My task list: a phone app with screens, lists, settings and its own icon.
  • My invoicing program: a desktop program with clients, products, invoices and PDFs.
  • My 3D shooter: a first-person game in the style of the classics, with a level built from shapes, demons, a key and a door.
  • My jungle adventure: a third-person adventure in the style of Tomb Raider, in a world of blocks: a generated jungle, a Maya pyramid and a mechanism of stone and plate to open its entrance.

Have fun creating!

← All the tutorials