BreynGINE

My 3D shooter (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 1Infernal Base

In this tutorial you'll make a first-person shooter in the style of the 90s classics, like Doom: corridors of a base, demons that chase you, a gun, medkits, ammo, a red key and a door that only opens with it. Without writing a single line of code, and all of it on your phone.

"Infernal Base", the game you are going to make. (The pictures of the phone show the editor in Spanish; the buttons are in the same places in English.)
"Infernal Base", the game you are going to make. (The pictures of the phone show the editor in Spanish; the buttons are in the same places in English.)

Along the way you'll learn:

  • Shapes: building the level right inside the editor, with floors, walls, stairs and textures, and cutting doorways in the walls.
  • Lights: setting the mood with colored lights.
  • 3D game objects: the first-person player, the enemies and the pickups, ready to use.
  • BreynFlow in 3D: moving, looking around, shooting, chasing, biting, picking up and opening doors.
  • Touch controls: a joystick to walk and a button to shoot, and your finger to look around.

This is the version of the tutorial for the editor's touch interface, with pictures of the phone. If you don't know the bottom tabs yet (Scene, View, Inspector, Project, More), the workspace bar and the gestures, look at the chapter The editor on a phone of My first game: it also explains how BreynFlow rules work. Here we'll go a bit faster.

Tip: want to see it finished before you start? The Asset Store tab of the project manager has the template 3D Shooter: it's the game of this tutorial, ready to play and to look into its rules.

Chapter 2The project

1
In the project manager, tap New Project.
2
Name: Infernal Base. Template: 3D (camera, light and sky).
3
Tap Create.

The editor opens in the 3D view with the scene main: a sky, a light (the sun), a camera and a plane.

We'll build the level with shapes, and the player brings its own camera, so delete what we don't need: in the Scene tab, hold your finger on Main Camera and choose Delete. Do the same with Plane.

The drawings and the sounds

So you don't have to draw everything, this tutorial comes with the game's drawings and sounds. With your project open, tap ☰ > Help > Tutorials > My 3D shooter (tutorial) and choose Copy and Open: BreynGINE copies them into the project and opens this page again. (You can also download them here (download the ZIP).)

Two folders appear in the Project tab: sprites (the demon, the gun, the muzzle flash, the medkit, the ammo and the key) and sounds (the shot, the pain, the death, the hurt, the pickup and the door).

Tip: when you finish, try swapping them for your own: the drawings open in the Sprites view and the sounds in Audio.

Chapter 3Moving around the 3D world

In the View tab, with the 3D view:

  • One finger taps to select, and drags the colored arrows to move what's selected.
  • Two fingers: pinch to zoom in or out, and drag to turn the camera around.
  • The axes at the top right (X, Y, Z) put the camera facing front, from above or from the side with one tap. From above (Y) is the best way to see the plan of the level.
  • ⋮ Perspective > Focus Selection takes the camera to the selected object.
The finished base, in the 3D view of the phone.
The finished base, in the 3D view of the phone.

Chapter 4The floor

The level has three rooms in a row: the starting room, the demons' room and the final room, with the exit. It's 12 meters wide and 30 long.

At the top of the 3D view there's the Shapes button. Tap it:

Shapes: cubes, spheres, ramps, stairs, floors, walls... and the tools to combine them.
Shapes: cubes, spheres, ramps, stairs, floors, walls... and the tools to combine them.
1
Choose Floor. A 10 × 10 meter slab appears where the view is looking.
2
Hold your finger on it in the Scene tab, choose Rename and call it Floor.
3
In the Inspector: Size = 12, 0.2, 30. And in Position: 0, -0.1, -9 (type position in Filter Properties to find it right away).
4
In Look (right below Size), tap the Stone texture.
The Size and the Look of the floor, in the Inspector: the color and the texture.
The Size and the Look of the floor, in the Inspector: the color and the texture.

Textures are measured in meters: however much you stretch a shape, they never get distorted, and they continue from one shape to the next. The first time you use one, it's copied to the project's textures folder.

Tip: before creating each shape, tap Main in the Scene tab: that way the new shape goes into the scene and not inside the one you had selected.

Chapter 5The walls

1
Shapes > Wall. Call it West Wall. In Look, choose Tech Panel. Size: 0.25, 3, 30. Position: -6, 1.5, -9.
2
Hold your finger on it and choose Duplicate. Call the copy East Wall and set its Position x to 6.
3
Duplicate again: South Wall, with Size 12, 3, 0.25 and Position 0, 1.5, 6.
4
Three more copies of the south wall, changing only their Position z:
  • North Wall: z = -24.
  • Middle Wall: z = -6 (between the first and the second room).
  • Door Wall: z = -18 (between the second room and the final one).
The six walls, seen from above.
The six walls, seen from above.
Tip: the copies share their texture. If you change the color or the texture of one of them in Look, only that one changes.

Chapter 6Doors in the walls

Right now you can't go from one room to another. Let's cut an opening in the two middle walls with the Cut a Hole tool: one shape "bites" another.

1
Tap Main and Shapes > Cube. Call it Hole. Size: 2.4, 2.8, 1. Position: 0, 1.3, -6. It goes through the Middle Wall, and its bottom goes a little into the floor: that way the hole leaves no ledge to trip over.
2
With the Hole selected, tap Shapes > Cut a Hole.
3
A list of the shapes of the scene opens: choose Middle Wall, the wall to cut the hole in, and tap OK.
"Cut "Hole" out of...": the Middle Wall. And a doorway!"Cut "Hole" out of...": the Middle Wall. And a doorway!
"Cut "Hole" out of...": the Middle Wall. And a doorway!

The Hole is now inside the Middle Wall: if you move it, the opening moves. Do the same with the Door Wall: another cube, Door Hole, the same but at z = -18.

Tip: Join works the same way: select a shape, tap Join and choose the one it joins. Separate undoes the join or the hole. And everything can be undone with ↶.

Chapter 7Ceiling, stairs and a platform

The ceiling: Shapes > Floor, called Ceiling, with Size 12, 0.2, 30, Position 0, 3.1, -9 and the Ceiling texture. Now the inside can't be seen from above: tap the Ceiling's eye in the Hierarchy to hide it while you build (and show it again when you finish).

The stairs: in the second room, some stairs go up to a platform where the key will be.

1
Shapes > Stairs. Position: 4.25, 0.75, -9.5. Texture: Metal. They go up towards the back.
2
Shapes > Cube, called Platform. Size: 3.5, 1.5, 4. Position: 4.25, 0.75, -12.75. Texture: Metal.
The stairs and the platform, in the second room.
The stairs and the platform, in the second room.
Tip: in the Inspector of the stairs you can choose how many steps they have.

Chapter 8The lights

With the ceiling on, it's dark inside: the sun doesn't get in. Good: we'll set the mood with lights.

1
In the Scene tab, tap Main, tap + and choose Point Light (in the Light section). Position: 0, 2.6, 0. In the Inspector: Energy = 1.5 and Range = 10 (find them with the filter). It's the light of the first room.
2
Duplicate it for the second room: Position z = -12, Range = 12 and a red Color (tap the color and set 255, 90, 60): the demons' room.
3
Another copy for the final room: z = -21, green.
The demons' room, with its red light.
The demons' room, with its red light.

Chapter 9The player

1
Tap Main, + and, in the 3D Game section (slide the list down), choose Player (First Person).
The objects for 3D games: the players, the enemy and the pickup.
The objects for 3D games: the players, the enemy and the pickup.

It comes with its body, a capsule-shaped collider and a Camera at eye level: what the player sees. It's already in the group player.

2
Set its Position to 0, 0, 3: in the first room, facing the doors.
3
In the Inspector, at the very bottom, tap Add Component > BreynFlow (Rules Without Code). Go to the View and slide the workspace bar to BreynFlow. Make the rule Move:
  • WHEN: Every Frame.
  • DO: Move with the Controls. Tap platformer and, in its settings, choose the first person style and Speed 5 (in 3D it's in meters per second).
The Move rule, in first person.
The Move rule, in first person.

The touch controls

A phone has no mouse and no keyboard: you need a joystick to walk and a button to shoot. With the Player selected, make another rule:

  • Touch controls. WHEN: Scene Starts. DO: Touch Controls (type touch in the search box).

The action comes as "show the touch controls (joystick yes, buttons A = ui_accept)". Tap A = ui_accept and, in its settings, tap Buttons. Write Shoot in New Key and mouse_left in New Value (the left mouse button, the one that shoots on a computer), tap Add Key/Value Pair and delete the A with its trash can.

A single button: Shoot, which presses mouse_left.
A single button: Shoot, which presses mouse_left.

This is how it plays on a phone:

  • The joystick, on the left: it appears where you put your thumb and moves you like WASD: forward, back and sideways.
  • A finger anywhere else on the screen looks around: drag it to turn the view, like the mouse on a computer.
  • Shoot, at the bottom right. It doesn't do anything yet: the shooting rule comes soon.

Try it!

Save (💾) and tap ▶. Walk with the joystick and look around with your other thumb. Go through the doorways and up to the platform. To stop, tap ■.

Walking around the base.
Walking around the base.
Tip: does the view turn too fast or too slow? In the settings of Move with the Controls, change the Mouse Sensitivity: it's for the finger too. On a computer the touch controls don't show, and the game is played with the mouse and WASD.

Chapter 10The player's screen

Now, what is shown over the game: the gun, the crosshair, the health and the ammo. First, two settings so it looks right on any screen. Open ☰ > Project > Project Settings:

  • Type stretch in the search box, tap Window and set Stretch > Mode to canvas_items: the player's screen grows with the window.
  • Type texture filter, tap Textures (in Rendering) and set Default Texture Filter to Nearest: pixels look sharp.

Go to the 2D view (in the workspace bar): that's where the player's screen is laid out. The blue rectangle is the screen, 1152 × 648.

1
Tap Main, + > Image (UI section). Call it Gun. In the Inspector, in its Texture, tap the little arrow > Quick Load... and choose sprites/gun.png. Set Expand Mode to Ignore Size, and in Layout > Transform: Size 224, 232 and Position 464, 416 (at the bottom, in the middle).
2
Another image, Flash, with sprites/flash.png, Ignore Size, Size 144, 96, Position 504, 340 (at the tip of the gun). Hide it with its eye in the Hierarchy: it's only shown when shooting.
3
+ > Text: Crosshair, with the text +, font size 32 (Theme Overrides > Font Sizes), at Position 566, 300.
4
Two more texts, with font size 28: Health ("HEALTH: 100") at 24, 24, and Ammo ("AMMO: 20") at 910, 24. They go at the top, so the touch controls don't cover them.
5
+ > Panel: Damage, covering the whole screen (Position 0, 0, Size 1152, 648), with a red, half transparent Self Modulate (alpha 90). Hide it: it shows for a moment when a demon bites you.
The player's screen, in the 2D view of the phone.
The player's screen, in the 2D view of the phone.
Tip: to place things in the 2D view, typing the numbers in the Inspector is better than dragging with your finger: it's more exact.

Chapter 11Shooting

Ammo and health are global variables: the player, the enemies and the pickups use them. Add BreynFlow to the Health text with these rules:

  • Start. WHEN: Scene Starts. DO: Change Variable health (global): set to 100; ammo (global): set to 20; key (global): set to 0.
  • Show the health. WHEN: Variable Changes: health (global). DO: Change Text of this object to HEALTH: {health}.
  • Show the ammo. WHEN: Variable Changes: ammo (global). DO: Change Text of the text Ammo to AMMO: {ammo}.

Now, on the Player, a new rule, Shoot:

  • WHEN: Key or Button. Tap ui_accept and choose mouse_left: the Shoot button on a phone, and the left click on a computer.
  • IF: Compare Variable ammo (global) greater than 0.
  • DO: Shoot. In its settings, change health to life: the shot takes 25 from the variable "life" of whatever it hits.
  • DO: Change Variable ammo (global): subtract 1.
  • DO: Play Sound sounds/shot.wav (little arrow of the field > Quick Load... > shot).
  • DO: Show or Hide: show the Flash; Wait 0.05 s; hide the Flash.
The Shoot rule.
The Shoot rule.

Try it: every tap on Shoot sounds, the flash shows and the ammo counter goes down. With 0 ammo, it doesn't shoot any more. The shot goes where the crosshair points, the center of the screen: aim by turning the view with your finger.

Chapter 12The demon

1
Tap Main, + > Enemy (3D). Position: -3, 0, -12 (in the second room). It's already in the group enemies.
2
Unfold it in the Hierarchy (the little arrow on its left), tap its Drawing and put sprites/demon.png in its Texture.
The demon: a drawing that always faces the camera, like in the classics.
The demon: a drawing that always faces the camera, like in the classics.
3
Call the enemy Demon, add BreynFlow to it and make these rules:
  • Start. WHEN: Scene Starts. DO: Change Variable life (of the object: each demon has its own): set to 50. Two shots and it's down.
  • Chase. WHEN: Every Frame. IF: Distance from this object to the Player less than 12. DO: Move Towards (Follow) the Player, speed 2.5, stop distance 1.2. In 3D it walks on the floor and doesn't go through walls.
  • Bite. WHEN: Time Passes: every 1 s. IF: Distance to the Player less than 1.8. DO: health (global): subtract 10; Play Sound hurt.wav; show the Damage panel, wait 0.15 s and hide it.
Tip: to choose the Player or the Damage panel, tap the object of the piece and choose An object of the scene...

Chapter 13Hurt and defeated

When a shot hits the demon, it takes 25 from its "life" and sends it the message hit. Two more rules for the Demon:

  • Hurt. WHEN: Message Received: hit. DO: Play Sound pain.wav; Change Property modulate of the Drawing to #ff5050 (red); wait 0.12 s; modulate to white.
  • Defeated. WHEN: Variable Changes: life (of the object). IF: life (of the object) less or equal to 0. DO: Play Sound death.wav; Destroy this object.
The Chase rule: only when the player is less than 12 meters away.
The Chase rule: only when the player is less than 12 meters away.

Now, a horde: hold your finger on the Demon and choose Duplicate, twice. Put one copy at 3, 0, -15 and another in the final room, at 2.5, 0, -20.5. Copies share the rules, but each one has its own life.

Fire!
Fire!

Chapter 14Medkits and ammo

1
Tap Main and + > Pickup (3D): Medkit, at -4, 0, -15. In its Drawing, the texture sprites/medkit.png.
2
Add BreynFlow to it with the rule Pick up: WHEN: Collision (it already says "touches the group player"). IF: health (global) less than 100. DO: health (global): add 25; Play Sound pickup.wav; Destroy this object.
3
Another pickup: Ammo Box, at -4, 0, 1, with sprites/ammo.png. Its rule: WHEN: Collision with player. DO: ammo (global): add 10; sound pickup.wav; Destroy.
The medkit and the ammo box: they float and always face you.
The medkit and the ammo box: they float and always face you.
Tip: the medkit isn't picked up if you already have 100 health: that way you don't waste it.

Chapter 15The red key and the door

The key: another pickup, Key, on the platform: 4.25, 1.5, -13, with sprites/key.png. Its rule: WHEN: Collision with player. DO: key (global): set to 1; Show Message "You have the red key!" for 2 s; sound pickup.wav; Destroy.

The door: tap Main and Shapes > Cube, called Door, with Size 2.4, 2.8, 0.3 and Position 0, 1.3, -18: it covers the opening of the Door Wall. In Look, the Metal Door texture (it goes once per face). Add BreynFlow to it:

  • Start. WHEN: Scene Starts. DO: open (of the object): set to 0.
  • Open. WHEN: Every Frame. IF: Distance from this object to the Player less than 3; key (global) equal to 1; open (of the object) equal to 0. DO: open: set to 1; sound door.wav; Move To: this object, by an offset of (0, 2.8, 0) in 1 s. It goes up and lets you through.
  • Locked. WHEN: Time Passes: every 2 s. IF: Distance to the Player less than 3; key (global) equal to 0. DO: Show Message "You need the red key" for 1.5 s.
Tip: for the second and third conditions of Open, tap + Condition again: conditions are joined with "and" (all of them must be true).

Chapter 16The exit and defeat

The exit: Shapes > Cylinder, called Exit, in the final room: Radius 1, Height 0.1 and Position 0, 0.05, -22.5, with a green color in Look. Add BreynFlow to it:

  • Win. WHEN: Every Frame. IF: Distance from this object to the Player less than 1.2; won (of the object) not equal to 1. DO: won: set to 1; Show Message "LEVEL COMPLETE!" for 3 s; Wait 3 s; Restart Scene.

Defeat: on the Health text, one last rule:

  • Die. WHEN: Variable Changes: health (global). IF: health (global) less or equal to 0. DO: Activate or Deactivate: deactivate the Player; Show Message "YOU DIED!" for 2 s; Wait 2 s; Restart Scene.
The exit, in the final room.
The exit, in the final room.

Chapter 17Play!

Show the Ceiling (its eye in the Hierarchy), save (💾) and tap ▶.

1
Take the ammo in the first room.
2
Go through the doorway: the demons chase you. Turn the view with your finger until they're in the crosshair and tap Shoot.
3
If they bite you, look for the medkit.
4
Go up the stairs to the platform and take the red key.
5
Open the door, finish off the last demon and step on the exit.

When you stop the game, look at the BreynFlow view: each rule counts how many times it ran. If something doesn't work, you'll see there which condition isn't met.

Tip: to play it outside the editor, install it on your phone as an app: ☰ > Project > Tools > Generate APK (Android)..., as in the chapter Play it and share it of My first game.

Chapter 18What now?

You have your own shooter! Some ideas to keep going:

  • More levels: make another scene with other shapes and, when winning, use Change Scene instead of restarting.
  • Lava: a floor with the Lava texture and a rule "Every frame, if the distance to the Player is less than 2: health subtract 1".
  • More weapons: another touch button, Strong = mouse_right, and a rule with "Key or Button" mouse_right for a stronger shot that uses more ammo.
  • Music: a "Scene Starts" rule with Play Music.
  • Your drawings: open the sprites in the Sprites view and make them yours, or draw other enemies.
  • Convert to Mesh: when the level is finished, Shapes > Convert to Mesh makes it lighter for phones.
Tip: with View as Code (above the rules), BreynFlow shows you how they would look in C#. That way you can see how a first-person game is made inside.

← All the tutorials