BreynGINE

My first game (on your phone)

This is the version for phones and tablets (Android), with the editor's touch interface. Making it on a computer? Go to the version for computers.
You're reading the tutorial in the phone's browser. In BreynGINE, ☰ > Help > Tutorials opens this same page and offers to copy the drawings and sounds it needs into your project; here you can also download them as a ZIP.

Chapter 1Welcome

This tutorial teaches you how to make a complete platform game, from scratch, without writing a single line of code and right on your Android phone or tablet. At the end you'll have a character that runs and jumps, coins to pick up, a score, an enemy to stomp on, a victory screen… and a joystick and a button on the screen to play it with your fingers.

The game you are going to make, on a phone: the joystick on the left and the Jump button on the right. (The pictures of this tutorial show the editor in Spanish; the buttons are in the same places.)
The game you are going to make, on a phone: the joystick on the left and the Jump button on the right. (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 your finger, and animate them.
  • 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".

This is the version of the tutorial for the editor's touch interface: each step tells you which tab to tap and where each button is on the phone's screen, with pictures of the phone.

Tip: you read this tutorial in the browser and make the game in BreynGINE. Switch between them with the phone's recent apps button (or the switch-app gesture), or keep both at once with Android's split screen. Each chapter has its link in the contents: the browser remembers where you were.
Tip: if you make a mistake, the ↶ button at the top undoes almost everything (also in Sprites, in Audio and in BreynFlow rules), and the 💾 disk saves the scene.

Chapter 2The editor on a phone

Before starting, a tour of the screen. On a phone the editor shows one thing at a time, and the tabs at the bottom switch between them.

The parts of the editor on a phone.
The parts of the editor on a phone.
1
☰ Menu: the editor's menus: Scene, GameObject, Component, Project, Debug, Editor and Help.
2
▶ tries your game, ■ stops it and 🎬 tries only the open scene.
3
↶ ↷ undo and redo.
4
💾 saves the scene.
5
The workspace bar: 2D, 3D, Script, Asset Store, Audio, BreynFlow and Sprites. They don't all fit on the screen: put your finger on the bar and slide it to the left to see the rest.
6
The open scenes, as tabs.
7
The view, where you place objects. One finger selects and moves; with two fingers, pinch to zoom in or out and drag to move around the world.
8
Scene: the Hierarchy, with the objects of the scene (the character, the ground, the coins...). The + button creates new objects.
9
View: back to the view (2D, 3D, Sprites, Audio, BreynFlow...).
10
Inspector: the properties of the selected object: its position, its size, its color... At the very bottom there's the Add Component button.
11
Project: the files of your game: scenes, drawings, sounds...
12
More: the console, the debugger and other panels.
The Scene tab (the objects) and the Project tab (the files).The Scene tab (the objects) and the Project tab (the files).
The Scene tab (the objects) and the Project tab (the files).

The gestures

  • Tap is a click, and tap twice is a double click (it opens folders, files and projects).
  • Holding your finger on something is the right click: it opens its menu. For example, hold your finger on an object of the Hierarchy to Rename it, Duplicate it or delete it.
  • Pinch zooms the view in and out, and two fingers move it.
  • Long lists, menus and rows of buttons scroll with your finger.
  • The phone's Back button closes the open menu or window. A menu also closes when you tap outside it (for example, on the strip at the top).
  • Tapping a text or a number field shows the keyboard: type and press Enter (✓) to confirm.

Chapter 3Your project

Every game lives in a project: a folder with its scenes, drawings and sounds. Make it in the Project Manager, the screen you see when BreynGINE opens (if you're inside another project: ☰ > Project > Quit to Project List).

1
Tap New Project, at the bottom.
2
In Project Name write My first game. It's kept in your Documents, in the BreynGINE folder.
3
In Template, choose 2D (camera): you start with a scene ready, with its camera.
4
Tap Create. The editor opens with your project.
Choose the "2D (camera)" template and tap Create.Choose the "2D (camera)" template and tap Create.
Choose the "2D (camera)" template and tap Create.
Tip: to open a project of the list, tap it twice. With the three dots of each project you rename it, make it a favorite or remove it from the list. And in the Store tab, at the top, there's the Platformer with BreynFlow template, with a similar game already made: nice to look at after the tutorial.

The editor opens the scene main, with two objects in the Scene tab: 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
Tap the Scene tab and, in the list, tap Main Camera.
2
Tap the Inspector tab. Find Zoom, tap the x number, write 2 and press Enter; do the same with y. Now everything looks twice as big.
The camera's Zoom, in the Inspector.
The camera's Zoom, in the Inspector.

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

1
Tap ☰ > Project > Project Settings...
The ☰ menu with Project open.
The ☰ menu with Project open.
2
Tap the search box, write clear color and tap Environment in the list.
3
Tap the color bar of Default Clear Color. The color picker opens: choose a light blue by tapping the color circle, or write 8ccbf2 in Hex and press Enter.
4
Tap Close.
The color picker, and the sky already blue.The color picker, and the sky already blue.
The color picker, and the sky already blue.
Tip: to find a property, write its name in Filter Properties, at the top of the Inspector: it's quicker than scrolling the whole list.

Chapter 5Draw the hero

Time to draw. Tap the View tab and slide the workspace bar to the left until you see Sprites. Tap it.

Slide the bar with your finger: Audio, BreynFlow and Sprites are at the end.
Slide the bar with your finger: Audio, BreynFlow and Sprites are at the end.
1
Tap New Sprite...
2
Name: player. In Common sizes, choose 16 x 16.
3
Tap OK.
The new sprite: "player", 16 x 16.
The new sprite: "player", 16 x 16.

You now have a transparent 16 × 16 pixel canvas. This is how the screen is laid out:

  • At the top, the file buttons: New, Open..., Save and, sliding the row, Cut Sheet..., Size..., App Icon... and Add to Scene.
  • Below, the tools: pencil, eraser, fill, line, rectangle, ellipse, color picker and select. Slide the row to see the brush size, the mirrors, the grid and the onion skin.
  • In the middle, the canvas: draw with your finger. Pinch to zoom and move the drawing with two fingers (if something gets painted when the second finger lands, don't worry: it's undone by itself).
  • At the bottom, four tabs: Colors, Layers, Frames and Animations.

Tap a color in the palette (or the color box, for any other) and draw with the pencil. To erase, use the eraser. A trick: draw the outline with the rectangle or the ellipse and fill it with fill.

Starting: a dark rectangle filled with orange. And the finished hero: outline, body, eyes and cheeks.Starting: a dark rectangle filled with orange. And the finished hero: outline, body, eyes and cheeks.
Starting: a dark rectangle filled with orange. And the finished hero: outline, body, eyes and cheeks.
Tip: turn on the left-right mirror (in the tools row, sliding it) 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.

The Frames tab has the frames of your drawing. For the next one, tap Copy (it duplicates the current frame) and change what moves. The onion skin (the last button of the tools row) shows the previous frame faintly so you don't lose your place. Tap a frame to draw on it.

Then, in the Animations tab, tap + Animation and, below it (slide inside the tab), give it its name and choose its first and last frame and its speed. For jump, turn Repeat off.

The Animations tab: idle (1-2), walk (3-4)... and the details of the selected one.
The Animations tab: idle (1-2), walk (3-4)... and the details of the selected one.
Important: use exactly the names idle, walk and jump: BreynFlow will use them to animate the character by itself.

Tap Save. In the Project tab, sprites folder, you'll find your drawing (player.bsprite), its sprite sheet and its animations (player_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 (write 12 in Width and Height). 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 enemy: enemy, 16 x 16, with 2 frames (squashed and stretched) and the animation walk. Save.

The coin and its four frames; the enemy and its two.The coin and its four frames; the enemy and its two.
The coin and its four frames; the enemy and its two.
Tip: already have drawings, 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. The easiest way to get them into your project: with your project open, tap ☰ > Help > Welcome Tutorial and choose Copy and Open: BreynGINE copies them into the sounds folder and opens this page again. (You can also download them here (download the ZIP).) They're moneda_grabada.wav (a coin) and salto_grabado.wav (a jump).

In the View tab, slide the workspace bar and tap Audio. Tap Open..., tap the sounds folder twice, choose moneda_grabada.wav and tap Open.

The waveform: that "fuzzy" line before and after the sound is background noise.
The waveform: that "fuzzy" line 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 your finger along the waveform to select a piece with only noise, without the sound: the beginning, for example. Half a second or more.
2
Slide the row of buttons at the top to the left until you see Effects, tap it and choose Capture Noise Profile.
The Effects menu. At the bottom, "Clean the background noise".
The Effects menu. At the bottom, "Clean the background noise".
3
Tap anywhere on the waveform to clear the selection (with nothing selected, effects apply to the whole sound).
4
Tap 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. Tap Apply.
Reduce Noise, with Listen to hear it first.
Reduce Noise, with Listen to hear it first.

Trim, make it louder and save

1
Drag your finger to select only the sound, from just before it starts until it fades. In the second row of buttons (slide it) tap Trim: only the selection stays.
The sound selected, ready to Trim.
The sound selected, ready to Trim.
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
Tap Save As... and save it in the project's sounds folder as coin.wav.
The sound trimmed and at full volume.
The sound trimmed and at full volume.

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

Tip: the ▶ button of the top row plays it (the selection, or from where you tapped). 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 view (slide the workspace bar to the right and tap 2D). We'll make the ground, three platforms and two walls.

In the Scene tab, tap Main and then the + button. The menu to create objects opens; slide it down to the 2D Game section: objects ready to play, each one with its physics body, its collider and a colored placeholder drawing.

The + menu: Player, Platform, Pickup and Enemy.
The + menu: Player, Platform, Pickup and Enemy.
1
Tap Platform. It appears in the list, inside Main. To rename it, hold your finger on it, choose Rename, write Ground and press Enter.
Hold your finger on an object: Rename, Duplicate, Delete...
Hold your finger on an object: Rename, Duplicate, Delete...
2
On a phone it's easier to place objects by typing their numbers than by dragging them. Tap the Inspector tab and write transform in Filter Properties. In Position set x = 0 and y = 146 (at the very bottom, inside the camera rectangle).
3
To make it longer, in Scale first tap the chain link on the right (so x and y change separately) and set x = 6 and y = 1.
Position and Scale of the Ground, with the link open.
Position and Scale of the Ground, with the link open.
4
Make three more platforms (Main, +, Platform) and place them like stairs, each one a bit higher than the last. Their Position: (-150, 84), (0, 34) and (150, -16).
5
For the walls, make two more platforms, call them Wall and Wall2, set Scale x = 0.17 and y = 20 (tall and thin) and Position (-296, 0) and (296, 0), at the edges of the screen. Nobody leaves the level now.

Tap the View tab to see it: pinch to zoom out until you see all of it.

The level: ground, three platforms and two walls at the edges.
The level: ground, three platforms and two walls at the edges.
Tip: you can also move an object by dragging it with your finger in the view, with the Move tool (the cross of arrows) of the top row. And to change the color of a platform, open its arrow in the Scene tab, tap its child Drawing and change Color in the Inspector.

Chapter 9The player

1
In the Scene tab, tap Main, then + and choose Player (Platformer). A blue square appears: the placeholder drawing. In the Inspector, set its Position to (-220, 114): above the ground, on the left.
2
With the Player selected, go to View > Sprites, open player.bsprite (Open..., sprites folder) and tap Add to Scene (at the end of the top row: slide it).

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.

The player, with its drawing, in the 2D view (zoomed in with two fingers).
The player, with its drawing, in the 2D view (zoomed in with two fingers).

If you tapped ▶ 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 button 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 (Scene tab), tap the Inspector tab and, at the very bottom, Add Component > BreynFlow (Rules Without Code).
Add Component: BreynFlow is the second one.
Add Component: BreynFlow is the second one.
2
Go to View and tap BreynFlow in the workspace bar. The player's rules are there. Tap New Rule. The piece finder opens: the list at the top, sorted by topic, and below it the explanation and an example of the piece you tap. Choose Life Cycle > Every Frame and tap Add to the Rule.
The piece finder: the list at the top and the explanation below.
The piece finder: the list at the top and the explanation below.
3
In the rule, tap + Action (in DO). Tap the search box, write move and choose Move with the Controls.
Tip: the search ignores accents and capitals: "touch" finds "Touch Controls", and in Spanish "tactil" finds "táctiles".

Changing the values

The highlighted words in rules can be changed with a tap. Tap 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.

To close the settings, tap outside them or press Back.

The Move rule, and the settings of "Move with the Controls".The Move rule, and the settings of "Move with the Controls".
The Move rule, and the settings of "Move with the Controls".

The jump rule

Tap New Rule again (it's below the last rule) and make this one:

1
WHEN: Input > Key or Button. By default it's "ui_accept": Space or Enter on a keyboard, the A button of a gamepad... and the Jump button we'll put on the screen.
2
IF: tap + 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. Tap the sound and, in its settings, tap the arrow of Sound > Load and choose sounds/jump.wav.

Tap "Rule 1 (click to name it)" and name the rules Move and Jump.

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 11The touch controls

A phone has no keyboard: your player needs a joystick to walk and a button to jump on the screen. BreynFlow puts them there with a single action, and they only show up when the game is played on a touch screen (on a computer everything stays the same).

With the Player selected, in BreynFlow, add one more rule:

1
Tap New Rule and choose Life Cycle > Scene Starts.
2
DO: tap + Action, write touch in the search box and choose Touch Controls.
The search: Input > Touch Controls.
The search: Input > Touch Controls.
3
The action comes as "show the touch controls (joystick yes, buttons A = ui_accept)". Tap A = ui_accept and, in its settings, tap Buttons: each button is a pair, its text and the action it presses. Write Jump in New Key and ui_accept in New Value, tap Add Key/Value Pair and delete the A with its trash can.
The "Jump" button presses ui_accept, like Space. And the finished rule.The "Jump" button presses ui_accept, like Space. And the finished rule.
The "Jump" button presses ui_accept, like Space. And the finished rule.

Name the rule Touch controls. This is how they work:

  • The joystick, on the left: it appears where you put your thumb and moves the player like the arrow keys (Move with the Controls reads it as it is).
  • Jump, in the bottom right corner, presses ui_accept: the Jump rule works as it is.
Tip: with size, in the settings, you make them bigger or smaller. And to see them on a computer too, turn only touch off: the mouse acts as a finger.

Chapter 12Let's play!

Save the scene (💾) and tap ▶, at the top. Your game opens in its own window, over the editor.

Move with the joystick and jump with Jump. Try climbing the platforms.

It moves and jumps!
It moves and jumps!

To stop, close the game or tap the square ■ of the editor.

While you play, the editor's BreynFlow view flashes each rule that 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.

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 13The coins

1
In the Scene tab, tap Main, + and choose Pickup (Coin, Star...). In the Inspector, set its Position to (-150, 62), above the first platform.
2
With the coin selected, go to Sprites, open coin.bsprite and tap Add to Scene. It spins by itself: its animation starts when the game runs.
3
Add BreynFlow to it (Inspector > 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, tap 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

In the Scene tab, hold your finger on the coin and choose Duplicate. Do it four times. Each copy comes with its drawing and its rules. Spread them over the level with their Position: (0, 12) and (150, -38), on the other platforms, and (-60, 124) and (120, 124), on the ground.

Tip: the copies share their rules: if you change the rule of one coin, all of them change. Very handy for equal objects.

Chapter 14The score and the victory

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

1
In the Scene tab, tap Main, + and choose UI > Text. Call it Score (hold your finger > Rename). In the Inspector, in Text, write Coins: 0, and in Position (write position in the filter) set (-280, -158): the top left corner of the screen.
2
Make another text, Victory, with the text You win!, at (-78, -70). To make it bigger, write font size in the Inspector's filter and set Font Size = 28. Then hide it: tap its eye in the Scene tab.
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 (tap the object, choose An object of the scene... and then Victory); Wait 2 seconds; Restart Scene.
The "Win" rule of the score.
The "Win" rule of the score.

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

You win!
You win!

Chapter 15An enemy

A bit of excitement.

1
In the Scene tab, tap Main, + and choose Enemy. Set its Position to (200, 130): on the ground, on the right. It's already in the group enemies.
2
With the enemy selected, open enemy.bsprite in Sprites and tap 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.
The "Stomped" rule of the enemy.
The "Stomped" rule of the enemy.

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.

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 16Play it and share it

Your game is finished! Save (💾) and tap ▶ to enjoy it.

And now install it as one more app of your phone:

1
Tap ☰ > Project > Tools > Generate APK (Android)...
2
Write the name of the app (and leave Install it on this phone when it's ready checked) and tap Generate.
3
The first time, BreynGINE downloads the export templates (a few minutes) and carries on by itself. When it's done, Android asks whether to install it: accept (the first time, allow BreynGINE to install apps).

My first game is now in your list of apps, with its icon. With App Icon... in the Sprites editor, your character can be that icon. The APK is kept in the build folder of your project, in Documents: you can send it to anyone.

Tip: publish it on the Breynart App Store (☰ > Help > Breynart App Store), so everybody can download it.

Chapter 17What 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.

More tutorials

Want more? In ☰ > Help > Tutorials you'll find these, with step-by-step pictures:

  • 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