BreynGINE

My task list (phone app)

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 1What you'll make

In this tutorial you'll create a phone app, from scratch and without writing code: 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 make the Android installer.

"My tasks": the list, an open task and dark mode.
"My tasks": the list, an open task and dark mode.

You'll use three things of BreynGINE:

  • App mode: screens shaped like a phone, and the Components panel to build them with clicks.
  • BreynFlow: the rules that bring the app to life ("when this button is pressed, add a task").
  • The Sprites editor, to draw the icon.
Tip: tasks are saved on the phone by themselves. Even if you close the app, they're still there next time. You don't have to program anything for that.

If you already did the welcome tutorial, many things will sound familiar (the Hierarchy, the Inspector, the rules). If not, no problem: everything is explained step by step here.

(The pictures show the editor in Spanish; the buttons are in the same places in English.)

Chapter 2Create the project

Open the Project Manager (what you see when BreynGINE starts) and press + Create.

1
In Project Name write My tasks.
2
Choose the folder to save it in with Browse.
3
In Template choose Empty App.
The "Empty App" template: an app project with its first screen.
The "Empty App" template: an app project with its first screen.
4
Press Create and the editor opens with your project.
Tip: the App: To-Do List template, in the Asset 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. Double-click home.tscn in the Project panel (bottom left) and press 2D at the top if you don't see it already.

The app's first screen, inside a phone frame.
The app's first screen, inside a phone frame.
  • In the middle you see the screen inside a phone. At the top you have the size: Phone, Large Phone, Tablet or Computer, and a button to rotate it. The app adapts to all of them.
  • 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.
  • At the bottom right there's the Components panel: texts, buttons, fields, lists... One click and they're added to the screen.
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.

Chapter 4The task screen

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

1
In the Hierarchy, click Title and then, holding Ctrl, Text.
2
Press Delete and confirm.
The two sample texts, about to be deleted.
The two sample texts, about to be deleted.
3
Click 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
Select Box in the Hierarchy and press Row in the Components panel.
2
With the row selected, press Text Field. It goes inside the row.
3
Select the row (Row) again and press Button.

Now give them names and looks. To rename something, double-click it in the Hierarchy (or select it and press F2):

  • 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).
The row: the text field and the button with the + icon.
The row: the text field and the button with the + icon.
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
Select Box again and press 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 list, with three sample items so you can see how it'll look.
The list, with three sample items so you can see how it'll look.

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

Save with Ctrl+S.

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
Select Home and press Rules (BreynFlow) in the Components panel (it's at the end of the list).
2
The rules editor appears in the Inspector. Press 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 and press Add to the Rule.
4
The rule says "this object is pressed". Click that highlighted box to choose the button.
Clicking a highlighted value opens the piece's settings.
Clicking a highlighted value opens the piece's settings.
5
Press this object in the settings and choose An object of the scene.... In the window, choose Add.
Choosing the Add button.
Choosing the Add button.
6
Press + Condition and choose Apps > Text Field Is Empty. Choose NewTask as the field and, in its ⋮ menu, press Invert (NOT): so the rule only works if it's not empty. No blank tasks!
7
Press + 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
Click "Rule 1" (at the top of the rule) and call it Add with the button.
The first rule, finished, in the BreynFlow screen. Below, the explanation in words.
The first rule, finished, in the BreynFlow screen. Below, the explanation in words.
Tip: the BreynFlow screen (at the top, next to 2D and 3D) shows all the rules of the open screen, with more room than the Inspector. You can edit them there.

Rules 2 and 3: Enter and the trash can

Many people type and press Enter instead of the button. 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 three rules of the task screen.
The three rules of the task screen.

Save (Ctrl+S).

Chapter 6Try it

Press ▶ (top right, or F5). The app opens in a window the size of a phone.

1
Write Buy bread and press Enter.
2
Write Call the dentist and press 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 the window and press ▶ 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 screen 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 the Components panel press New Screen..., write task.tscn and press 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
Select Task (the screen) and write Task in its Title.
3
Select AppBar and press 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
Select 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. You don't have to do anything.

Chapter 8The rules of the Task screen

Add Rules (BreynFlow) to the Task screen (select Task and press the component). You'll make four rules.

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}.

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.
"Show the task" and "Save".
"Show the task" and "Save".

No title, no saving

If someone clears the title and presses 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 press Delete).
  • Action: Logic > If / Otherwise. Inside, press + 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 (Ctrl+S).

Chapter 9Opening a task from the list

Go back to the home screen (its tab, at the top) 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 press ▶. Tap a task, write a note and press 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, select 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
Select 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: press 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
Open Project > Project Settings.
2
Write accent in the search box and choose the BreynApp > Theme section.
3
Click Accent Color and choose the one you like. Here, a green.
The accent color, in Project Settings.
The accent color, in Project Settings.

When you close it, the screen in the editor already shows the new color, and so does the app.

The same screen, now in green.
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 the APK

The last step: give your app its icon on the phone and make the file to install it.

Draw the icon

1
Go to the Sprites screen (at the top) and press New...: a 24 x 24 sprite called icon.
2
Draw your icon. Here, a sheet with three boxes: two checked (green) and one unchecked.
The icon, drawn in the Sprites editor.
The icon, drawn in the Sprites editor.
3
Press App Icon.... Choose the Background color (the same green) and the Margin, and look at the preview.
The "App Icon" window, with the preview.
The "App Icon" window, with the preview.
4
Press 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.

Generate the APK

Press Generate APK... in the Components panel.

The "Generate APK (Android)" window, with the icon already chosen.
The "Generate APK (Android)" window, with the icon already chosen.
  • App Name: the one shown under the icon.
  • Package: a unique name for the stores (com.yourcompany.mytasks).
  • Test version (debug): leave it checked while you test. To publish, uncheck it.
  • Install and open it on the phone (USB): with the phone connected, it installs and opens it by itself.

Press Generate and you'll have the APK in the project's build folder.

Tip: the first time, BreynGINE tells you if something is missing for Android (the templates or the SDK) and how to get it.

Chapter 13What now?

You've made a complete app! 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 Asset 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