Hey there!
My very first tutorial, this one, far from technical, not a game and aimed to help beginners to complete a very simple project.
I follow a rule: KISS (Keep It Simple, Silly)
It's an incredibly simple calculator, the makes the four basic operations (add, subtract, divide, multiply).
From this simple calculator, after completing my advice, you'll be able to be on your own and expand it with more calculations (square root, for instance, adding and subtracting percentages).
I kept it minimal and small, because it's envisioned as a phone app and to make you want to improve upon it's looks. Control will be made by mouse. Yet another challenge: Add touch control! :)
Here's the finished work:
First things first, the buttons:
Fire up your image editor of choice and create simple squares for all 10 numbers (1,2,3,4,5,6,7,8,9,0), operands (+,-,/,*), clear (c), and equal (=).
I used Paint.NET, creating all buttons with 35 pixels on all sides, creating layers with the text, saving them to .png one by one.
Place them in your layout as you wish or makes sense to you.
Put also a text box on the top.
Add a mouse and touch object to interact with the objects.
Now, let's Construct!
Better yet, let's stop and think first and let's be logical about it. Wee will work with 2 values and an operation between them:
1+1=2
1-1=0
1*1=1
1/1=1
What do we have here? An initial value, an operator, another value and the end result.
So, we need two variables for each initial value, we need a variable to decide the operation to make, and a variable to post the end result.
4 variables:
calc_1 <- first value
calc_2 <- second value
operation <- operation to execute (1 will be add, 2 subtract, 3 divide,4 multiply)
result <- end result
Lets be cool and add a variable to write things on the text box.
1 variable:
textbox <-text to display when text box is clear or upon initialization
Now, when you turn your calculator on, you see a 0 on the screen. Let's try that.
We need to initialize "textbox" to 0. Add it as a global variable of 0, type number.
Add an event-> On start of layout -> Action -> TextBox -> Set Text -> textbox
If you run your project, you'll the textbox with a 0 there. It's working. :)
Close the webpage and let's get back to work!
Ok, to add a number to a variable without adding to it you need to use &, so the number you press on is written after the ones you have already typed.
So, for button 1 (and all others, change accordingly):
Add event: Mouse-> On object clicked-> sprite for number 1
Add action: Set textbox to textbox&"1"
Add action: Set text box text to textbox
Get it? the &"1" appends 1 to the end of the text in textbox, and you type the text in the text box.
Try it, if you want, and then do the same for all remaining numbers.
After all 10 numbers are down, time to do maths.
Fortunately, we have it easy. We dealt with the typing part, lets think about the operations we will make:
Get a value, add, subtract, divide, multiply the second one
So, on the operand buttons (change accordingly):
Add event: Mouse-> On object clicked-> sprite for add
Add action: Set calc_1 to textbox (save first value)
Add action: Set operation to 1 (select operation)
Add action: Set Text Box text to "" (empty text box)
Add action: Set textbox to 0 (reinitialize our variable)
Now we can save the first value, clear our text box and prepare for the second value.
Try it out, though the operation will not happen just yet.
Time to do real maths
You now need to invoke the operation after typing the second number by pressing =:
Add event: Mouse-> On object clicked-> sprite for equal
Add another condition: System - Compare two values operation equals to 1
Add action: Set calc_2 to textbox
Add action: Set result to calc_1+calc_2
Add action: Set text box text to result
Do the same to the other operations, and test your first calculation! Press a few numbers, press add and press a few numbers again. Then press = and the result appears.
To clear all values and reset our calculator:
Add event: Mouse-> On object clicked-> sprite for clear
Add action: set text box text to "0"
Add action: Set calc_1 to 0
Add action: Set calc_2 to 0
Add action: Set operation to 0
Add action: Set result to 0
Add action: Set textbox to 0
Hope it's useful!
Here's the capx: dl.dropbox.com/u/60029808/calculator.capx
EDITED: Link to Capx changed.