BreynGINE

My task list (app, 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 1What you'll make

In this tutorial you'll create a phone app, from scratch, without writing code and on the phone itself: a real task list. You'll be able to write down tasks, check them as done, open each one to add notes, delete them (with a confirmation question), switch to dark mode and, at the end, give it its own icon and install it on your phone like any other app.

"My tasks": the list, an open task and dark mode. (The pictures show the editor in Spanish; the buttons are in the same places in English.)
"My tasks": the list, an open task and dark mode. (The pictures show the editor in Spanish; the buttons are in the same places in English.)

You'll use three things of BreynGINE:

  • App mode: phone-shaped screens and the Components panel to build them with a few taps.
  • BreynFlow: the rules that bring the app to life ("when this button is pressed, add a task").
  • The Sprites editor, to draw the icon.

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.

Tip: tasks are saved on the phone by themselves. Even if you close the app, they're there the next time. You don't have to program anything for that.

Chapter 2Create the project

In the Project Manager (what you see when BreynGINE starts), tap New Project.

1
In Project Name write My tasks.
2
In Template choose Empty App.
3
Tap Create and the editor opens with your project.
The "Empty App" template: an app project with its first screen.
The "Empty App" template: an app project with its first screen.
Tip: the App: To-Do List template, in the Store tab of the Project Manager, has this same app already made. It's perfect to look around when you finish, but you'll learn much more building it yourself now.

Chapter 3App mode

An app project has its own way of working. Tap the Project tab, open the res:// folder with its arrow and tap home.tscn twice. Then tap View (and 2D in the workspace bar, if you don't see it already).

The app's screen, inside a phone frame.
The app's screen, inside a phone frame.
  • In the view you see the screen inside a phone. Under the tools you have the size: Phone, Large Phone, Tablet or Computer, and a button to rotate it. The app adapts to all of them.
  • The Scene tab (the Hierarchy) shows what the screen is made of: Home (the screen), AppBar (the top bar, with the title) and Content > Box, the column where your components go.
  • The Components panel has texts, buttons, fields, lists... One tap and they're added to the screen.

Switching panels

The Scene tab has more panels than the Hierarchy: Inspector, Project, Components, Help... To go to one, tap the three dots ⋮ at the top right and choose it in the list.

The three dots ⋮ take you to any panel; here, to Components.The three dots ⋮ take you to any panel; here, to Components.
The three dots ⋮ take you to any panel; here, to Components.
Tip: components are added inside the selected one (if it's a row or a column) or right under it (if it's something else). If nothing is selected, they go at the end of the main column. So the trick on a phone is: tap the object in the Hierarchy, switch to Components with ⋮ and tap the component.

Chapter 4The task screen

First, clear the screen. The template has a greeting you don't need:

1
In the Hierarchy, hold your finger on Title and choose Delete. Do the same with Text.
2
Tap Home and, in the Inspector, change Title to My tasks. It's the title in the top bar.

The row to write in

At the top there'll be a field to write the task and, next to it, a + button. To put them side by side you use a Row:

1
Tap Box in the Hierarchy, go to Components (⋮) and tap Row.
2
The row stays selected: tap Text Field. It goes inside the row.
3
Go back to the Hierarchy, tap the row (Row) and, in Components, tap Button.

Now give them names and looks. To rename something, hold your finger on it in the Hierarchy and choose Rename:

  • The text field: call it NewTask. In the Inspector, clear its Label and write Add a task... in Placeholder (the gray text shown while it's empty).
  • The button: call it Add. Clear its Text and in Icon Name choose add (the + sign).
Tip: names matter: in the rules you'll read "Add is pressed" or "NewTask is empty". With good names, rules read by themselves.

The list

1
Tap Box again and, in Components, List. Call it List.
2
In the Inspector, fill in:
  • Collection: tasks. It's the name of the "drawer" where tasks are kept on the phone (BreynFlow pieces use tasks unless you tell them otherwise).
  • Subtitle Field: notes, to see each task's notes under its title.
  • Check Field: done. So each task has its "done" box.
  • Turn on Show Delete: each task gets its trash can.
  • Empty Text: Nothing to do. Add your first task! It's shown while the list is empty.
  • Turn on Newest First so new ones appear at the top.
The Hierarchy of the screen, and the List's properties in the Inspector.The Hierarchy of the screen, and the List's properties in the Inspector.
The Hierarchy of the screen, and the List's properties in the Inspector.

The "Sample items" only show in the editor, so you can see the design. In the app you'll see your tasks. Save with 💾.

Chapter 5The rules: adding tasks

The screen looks nice, but it doesn't do anything yet. Time to bring it to life with BreynFlow.

1
Tap Home in the Hierarchy and, in Components, Rules (BreynFlow) (it's at the end of the list).
2
Go to View and tap BreynFlow in the workspace bar: the screen's rules are there. Tap New Rule and the piece finder opens.
The piece finder. In an app project you see the pieces for apps and the common ones.
The piece finder. In an app project you see the pieces for apps and the common ones.

Rule 1: add with the button

3
As the event, choose Interface > Button Pressed (or write button in the search box) and tap Add to the Rule.
4
The rule says "this object is pressed". Tap that highlighted box to choose the button: the piece's settings open.
5
Tap this object in the settings and choose An object of the scene.... In the window, tap Add and OK.
The piece's settings, and the window to choose the Add button.The piece's settings, and the window to choose the Add button.
The piece's settings, and the window to choose the Add button.
6
Tap + Condition and choose Apps > Text Field Is Empty. Choose NewTask as the field and, in its ⋮ menu, tap Invert (NOT): so the rule only works if it's not empty. No blank tasks!
7
Tap + Action and choose Apps > Add Item. In title of choose NewTask: the task gets the name you wrote. The field empties itself afterwards.
8
Another action: Apps > Short Message, with the text Task added.
9
Tap "Rule 1" (at the top of the rule) and call it Add with the button.
The first rule, finished. Below, the explanation in words.
The first rule, finished. Below, the explanation in words.

Rules 2 and 3: Enter and the trash can

On a phone you type with the on-screen keyboard, and many people press its Enter (✓) key instead of the +. Make a second rule like the first, but with the event Apps > Text Entered (field NewTask, "is confirmed (Enter)"). Call it Add with Enter.

Tip: with a rule's ⋮ menu you can duplicate it and change just the event. Much faster.

And a third one, to say so when a task is deleted: event Apps > List Item (list List, "is deleted"), action Short Message with Task deleted. Call it Deleted from the list.

The "Deleted from the list" rule.
The "Deleted from the list" rule.

Save (💾).

Chapter 6Try it

Tap ▶, at the top. The app opens in its own window, over the editor.

1
Write Buy bread and press Enter on the keyboard.
2
Write Call the dentist and tap the + button.
3
Add a few more and check a task's box: it turns gray, as done.
The app working: tasks added, one checked and the "Task added" message.
The app working: tasks added, one checked and the "Task added" message.

Close it (■) and tap ▶ again: the tasks are still there! The list saves them on the device by itself.

Tip: if something doesn't work, look at the BreynFlow view while the app is open: each rule lights up when it runs. You'll quickly see which one fails.

Chapter 7A screen for each task

Now you'll make a screen open when you tap a task, to change its name, write notes or delete it.

1
In Components tap New Screen..., write task.tscn in File and tap Save. A new screen is created and opened, with its bar and its column.
New Screen: you only have to give it a name.
New Screen: you only have to give it a name.
2
Tap Task (the screen) in the Hierarchy and write Task in its Title.
3
Tap AppBar and, in Components, Button: buttons in the bar go to the right. Call it Delete, clear its Text, choose delete in Icon Name and Text in Style (no background).
4
Tap Box and add a Text Field called TaskTitle, with the Label Task and an empty Placeholder.
5
Without changing the selection, add another Text Field: it goes under it. Call it Notes, with the Label Notes and the Placeholder Optional.
6
And a Button under it, called Save, with the text Save.
The screen of a task.
The screen of a task.
Tip: in apps, the top bar adds the back arrow by itself when you arrive at a screen from another one, and the phone's Back button goes back too. You don't have to do anything.

Chapter 8The rules of the Task screen

Add Rules (BreynFlow) to the Task screen (tap Task in the Hierarchy and the component). You'll make four rules, in the BreynFlow view.

Show the task

When this screen opens, it gets the tapped task in a variable called item. Its values are written between braces: {item.title} is the title and {item.notes} the notes.

  • Event: Apps > Screen Is Shown.
  • Action: Interface > Change Text of TaskTitle to {item.title}.
  • Action: Change Text of Notes to {item.notes}.
The "Show the task" rule.
The "Show the task" rule.

Save

  • Event: Button Pressed (Save).
  • Condition: NOT TaskTitle is empty.
  • Actions: Apps > Read a Text Field (TaskTitle into title), another one (Notes into notes), Apps > Change Item with title = {title} and notes = {notes}, a Short Message Saved and Apps > Go Back.
The "Save" rule.
The "Save" rule.

No title, no saving

If someone clears the title and taps Save, better tell them:

  • Event: Button Pressed (Save). Condition: TaskTitle is empty (this time without NOT).
  • Action: Objects > Change Property of TaskTitle: property error, value Write the task first. The field turns red with that message.

Delete, asking first

  • Event: Button Pressed (Delete, the one in the bar).
  • Action: Apps > Ask the User, with the title Delete this task?, the text It can't be undone. and the buttons Delete and Cancel. The answer is kept in answer (true if they tap Delete).
  • Action: Logic > If / Otherwise. Inside, tap + Condition and choose Compare Variable: answer equal to true. And in "then", with its + Action: Apps > Delete Item, Short Message Task deleted and Go Back.
The "Delete" rule: it asks, and only deletes if the answer is yes.
The "Delete" rule: it asks, and only deletes if the answer is yes.

Save (💾).

Chapter 9Opening a task from the list

Go back to the home screen (its tab, above the view) and add one more rule to its rules:

  • Event: Apps > List Item (List, "is tapped").
  • Action: Apps > Go to Screen: choose task.tscn and, in sending, write item = {item}. So the Task screen gets the tapped task.
"Open a task": tapping an item goes to the Task screen and sends it the task.
"Open a task": tapping an item goes to the Task screen and sends it the task.

Save and tap ▶. Tap a task, write a note and tap Save:

The screen of a task, with its note, and the list when you come back.
The screen of a task, with its note, and the list when you come back.

Chapter 10Settings and dark mode

Today's apps have dark mode. Yours will too, in a settings screen.

The settings button

1
In the home screen, tap AppBar and add a Button. Call it Settings, with no text, settings in Icon Name and Text in Style.
2
Add a rule to home: Button Pressed (Settings) → Go to Screen settings.tscn. (It doesn't exist yet: you'll make it right now.)

The settings screen

1
New Screen... with the name settings.tscn. Write Settings in its Title.
2
Tap Box and add, in this order: a Switch called DarkMode with the text Dark mode, a Separator, an Outlined Button called DeleteAll with the text Delete all tasks and a Small Text with Made with BreynGINE (centered with Horizontal Alignment).
The settings screen.
The settings screen.
3
Give it Rules (BreynFlow) with these three:
  • Show the current mode: Screen Is Shown, condition Apps > Dark Mode Is On, action Change Property of DarkMode: button_pressed = true. So the switch is on if dark mode already was.
  • Dark mode: Button Pressed (DarkMode) → Apps > Dark Mode (switch). The app remembers the choice.
  • Delete everything: Button Pressed (DeleteAll) → Ask the User Delete all the tasks? → If / Otherwise with answer equal to true, and inside Delete Item with the all option on and a Short Message All tasks deleted.
The "Delete everything" rule: the same idea as deleting one task, but with "all".
The "Delete everything" rule: the same idea as deleting one task, but with "all".

Save everything and try it: tap the settings button, turn dark mode on and go back.

The settings, the list in dark mode and the question before deleting.
The settings, the list in dark mode and the question before deleting.

Chapter 11Your color

Blue is fine, but the app is yours. The main color (buttons, check boxes, icons) is changed in one place:

1
Tap ☰ > Project > Project Settings...
2
Write accent color in the search box and tap Theme, under BreynApp.
3
Tap the Accent Color bar and choose the one you like (or write its code in Hex). Here, a green: 1f9d6b.
The accent color, and the same screen, now in green.The accent color, and the same screen, now in green.
The accent color, and the same screen, now in green.
Tip: in that same section, Mode decides whether the app follows the phone's mode (light or dark), or is always light or always dark.

Chapter 12The icon, and onto your phone

The last step: give your app its icon and put it on your phone like any other app.

Draw the icon

1
In View, go to Sprites and tap New Sprite...: a 24 x 24 one called icon.
2
Draw it with your finger. Here, a sheet with three boxes: two checked (green) and one unchecked.
3
Slide the top row and tap App Icon.... Choose the Background color (the same green) and the Margin, and look at the preview.
The icon in Sprites, and the "App Icon" window.The icon in Sprites, and the "App Icon" window.
The icon in Sprites, and the "App Icon" window.
4
Tap Make Icon. It's saved in res://app_icon in every size Android needs (also the adaptive icon of new phones) and becomes the project's icon.

Install it on your phone

1
In Components, tap Generate APK... (or ☰ > Project > Tools > Generate APK (Android)...).
2
Check the App Name (the one under the icon) and the Package (a unique name: com.yourcompany.mytasks), leave Install it on this phone when it's ready checked and tap Generate.
3
The first time, BreynGINE downloads the export templates 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 tasks is now among your apps, with your icon! The APK stays in the project's build folder, in case you want to send it to someone.

Chapter 13What now?

You've made a complete app, on a phone! With three screens, data that saves itself, confirmation questions, dark mode, your color and your icon. Ideas to keep going:

  • Add a date to each task: another field in the Task screen, and date = {date} in Change Item.
  • Show how many tasks are left: the Number of Items condition and a text with Change Text.
  • Use a Floating Button (the round one at the bottom right) instead of the row at the top.
  • Explore the App: Multimedia template of the Store: video, web, music and the camera, also without code.
  • Look at View as Code in the rules, in case you feel like programming one day.

And if you want to make a computer program, with a database, invoices and PDFs, go on with the invoicing tutorial.

Get organized!

← All the tutorials