Gideros Mobile Tutorial 3: Shapes

It’s nice to have something else on the screen than just text. Let’s try to draw some shapes. I will leave out step-by-step explanation on how to add files to projects, how to start Gideros Player etc because this was covered in previous tutorials.

Drawing Shapes

You can draw primitive shapes with Gideros on the screen.  Create new project, name it “Shapes”, add new main.lua file and open it in editor.

Remember that in Gideros we create every new object (sprites,textfield,shape,bitmap…) with the keyword new. Add this code (comments — are in the code) to main.lua, run the player and you will see black line on your screen.

local myShape = Shape.new() -- create the shape object assigned to variable myShape
myShape:beginPath()         -- We have to tell shape to begin a path
myShape:setLineStyle(1)     -- set the line width = 1
myShape:moveTo(100,100)     -- move pen to start of line
myShape:lineTo(200,100)     -- draw line to new coordinates
myShape:endPath()           -- end the path
stage:addChild(myShape )    -- add the shape to the stage - display it

I think it is not hard to see what is going on here. We can use pen & paper analogy to explain it even simpler: The “moveTo” function is like lifting a pen off the paper and moving it to a different location without drawing anything. The “lineTo” function draws a straight line from current pen location to the destination location. As you can see once we create new Shape object named myShape we always use “myShape:” to change it’s properties, do something with it etc.

I am sure developers understand the screen coordinate system (line from 100,100 to 200,100) but here is the coordinate system just in case:
coordinates

Fun with Shapes

Now let’s draw a rectangle, fill it will color and apply some transformations learned in previous lessons. Shapes are “anchored” at the graph origin (0,0). The anchor point affects how the shape behaves when manipulated (e.g., rotated, scaled). If we want to prevent out rectangle from previous example to move off the screen we first create the shape at 0,0 coordinates (left top corner) and then move it to 100,100.

Modify the code so it will look like this:

local myShape = Shape.new() -- create the shape object assigned to variable myShape
myShape:beginPath()         -- We have to tell shape to begin a path
myShape:setLineStyle(2)     -- set the line width = 2
myShape:setFillStyle(Shape.SOLID, 0xFF0000) -- solid red fill color
myShape:moveTo(0,0)     -- move pen to start of line
myShape:lineTo(100,0)     -- draw top of rectangle
myShape:lineTo(100,100)     -- draw right side of rectangle
myShape:lineTo(0,100)     -- draw bottom of rectangle
myShape:lineTo(0,0)     -- draw left side of rectangle
myShape:endPath()           -- end the path
-- now we apply some transformations to the shape we created
myShape:setPosition(100,100) -- move the entire shape to 100,100
myShape:setScale(1.2,1.5) -- scale x by 1.2 and y by 1.5. The shape wont be rectangle anymore
myShape:setRotation(40) -- rotate shape by 40 degrees
stage:addChild(myShape )     -- add the shape to the stage - display it

Play with it a little, create different shapes.

Gideros Mobile Tutorial 2: “Hello World”

Hello World

Every tutorial starts with “Hello World” and who am I to break this tradition? 🙂 Please keep in mind that I will not be teaching Lua language, concepts of Objects, functions etc.  I am assuming that you are a developer who knows at least one language and have a basic understanding of how programing works. Again, I am just learning Lua too so you don’t need to be master Lua to follow this tutorial.

We will create 2 versions of “Hello World”  – one that prints to console and one that prints to your mobile device phone screen (or Gideros Player).

Hello World on console

Start Gideros(Gideros Mobile Studio) and select File->New Project from menu.  Name the project HelloWorld and browse to directory where you want to store your projects and click OK.  Right click on the HelloWorld project icon and select Add New File as seen below:

gideros_add_new_file

name it main.lua and click ok. This is how you will add new code files to your project. Double click it so it opens in the editor.

Now add just one line:

 print "Hello World!"
 

That is all you need.

Start the the local player (Player->Start Local Player) and press play button on Gideros menu. Program will execute and… nothing will happen on Player. But check the Output window and you will see something like this:

main.lua is uploading.
Uploading finished.
Hello World!

There is our hello world! Of course this is handy when we need to debut or test something but what we want is this text to appear on Player or our smartphone.

“Hello World” on Gideros Player / Smartphone

This takes few more lines but it is still easy. Delete the code in our editor and add this :

-- HelloWorld.lua script
local myTextField = TextField.new(nil, "Hello World!")
myTextField:setPosition(40,100)
stage:addChild(myTextField)

Save it, run Player and you will see text “Hello World” displayed there or on your smartphone (you have to run the Gideros app on your smartphone first of course). Great, your first mobile app is finished!

Let me explain this line by line

-- HelloWorld.lua script 

This is a comment so we can ignore it. In Lua you start one line comments with --. Please check some Lua tutorials on net for more.

local myTextField = TextField.new(nil, "Hello World!")

What we do here is create new text field object with the text Hello World!. Word nil just means that Gideros will use the default font. We assign this to local variable myTextField.

myTextField:setPosition(40,100)

Our myTextField is now TextField object so we can access and use/set all kinds of methods, events and properties. In this case we simply set the position of our textfield to appear on screen (X=40, Y=100).

stage:addChild(myTextField)

In all our previous lines we just created textfield, set its parameters but we have to display it on our screen. Think of stage as screen for now so everything that we want to display will have to be added to stage as its “child”.

Fun with text

Now let’s have some fun with text. Download this font from 1001freefonts.com and extract it to your HelloWorld project folder. Right click on the HelloWorld project icon and select Add Existing Files.. and select the “orange juice 2.0” font.

Now replace/modify your code so it will look like this(comments in the code):

-- HelloWorld.lua script
-- We define the font we will use and set the size to 48
local myfont = TTFont.new("orange juice 2.0.ttf", 48)

-- create 2 text fields with text "Hello World!" and "How are you?" which use myfont
local myTextField = TextField.new(myfont, "Hello World!")
local oneMoreTextField = TextField.new(myfont, "How are you?")

--for myTextField we only set the position of the text on screen
myTextField:setPosition(10,50)

-- for oneMoreTextField we set all kinds of properties - position, color (in HEX), rotation.. 
oneMoreTextField:setPosition(40,100)
oneMoreTextField:setRotation(31)
oneMoreTextField:setTextColor(0xFF0000)

-- add both to stage(screen) so we can see them
stage:addChild(myTextField)
stage:addChild(oneMoreTextField)

This is what you should see if you did everything right. Cool! hello_world_fun

Gideros Mobile Tutorial 1: Installation and interface

Install Gideros Mobile

This is fairly simple: go to Gideros Mobile website and download SDK then run setup. It’s just few “Next” clicks. After you are done it is best to go to their registration form and register for free. This way you will be able to export and build your Android (you can’t export IOS apps on Windows due to Apple not allowing to install their SDK if I am not mistaken) apps with File->Export Project in Gideros Mobile Studio (GMS).

Pin the GMS to your taskbar and run it. Here is the explanation of most important parts of GMS (click on the photo to see it in full size):

gideros

Library: This is the list of your Project files  – .lua files, graphics, sounds and so on
Preview:  When you click on image in your Library you will see it displayed here
Editor: This is where you edit code (.lua) files. Double click on file in Library to open it.
Gideros Player: Your program will run in this window. This is how your app will look on smartphone.
Output: Console window. You will see all text sent to console here,also upload progress, errors..

Everything is self evident, I will only explain how to start the player. When we save the project we wan’t to see how it will look on our mobile. What we need to do is click Player->Start Local Player in menu and the Player will start. You will see the date and IP displayed.  After “Gideros Player” opens, the start and stop icons will become enabled:

gideros_player_start_stop

You can now press play and stop totest your game or app in this player. You can also zoom the player, rotate it, set framerate etc. All these options are found on Gideros Player window.

How to test you app instantly on your smartphone

One of the best things about GMS is that you can instantly run your project  on your smartphone via wi-fi. To run project on Android device you need to install the GiderosAndroidPlayer.apk (comes with the installation) on your device. Start the installed app and it will display IP of your device. Open Player->Player Settings and uncheck the localhost option (use localhost to use player on your computer). Now add the IP  that you see on your smartphone and click OK. In my case it was 192.168.1.12 but it will be most probably different on your smartphone.

player-settings

If everything is ok then when you press play you will be able to see your game running on your smartphone! You can edit and save the code then press play again and your game will instantly be updated on your smartphone. How cool is that? 🙂

In the next lesson we will create first “Hello World” program.

Gideros Mobile Tutorial : Mobile Game Development

Why am I learning Mobile Game Development?

I always enjoyed making games on C64 and Amiga (AMOS Professional was great!) when I was a kid. Platformers and turn-based RPG games. It is now different time and smartphone games are all the rage. I always wanted to try making some simple mobile game but the first problem was that I am a busy web developer (Codeigniter then Laravel ..) so I don’t have much time for this. The biggest turn off for me was that you have to learn Java or Objective-C to develop for Android or IOS. Yes, it is not hard but somehow I don’t like to learn these languages (and I don0t have MAC). I tried hybrid app development (phonegap,intel xdk..) for a while but using HTM5/CSS somehow just didn’t feel right, especially for gaming. Maybe one day we will get there for now it just can’t compete with native games.  So I always ended up giving up on mobile development….. until I discovered there is a “3rd” way! (Yes, I am new to this 😛 )

Mobile Game Development with Gideros / Lua

Somehow I found Corona SDK (I decided to not use it after reading some forums), Moai, Monkey but finally I decided to use Gideros. I couldn’t believe that you can make fast, almost native speed apps with a language that is not Java or Obj-C! I never used Lua so I am still learning it but somehow it just feels right. So far I am loving Gideros! It is simple, it is free, it has in-built editor and a lot of plugins to get you started. Sure, it is not for the most complicated 3D games but for simple games it is great! One of the best things for me is that you simply install their app on your smartphone and you can test you apps literally instantly over wi-fi! Modify some code, save,  click play and you app will play on your smartphone/tablet!

What do I need to start with Gideros Mobile Game Development?

First, download Gideros for your OS. I will use Windows version.  Second, you should try to get familiar with Lua scripting language.

What kind of tutorial will this be?

I am just a beginner in mobile development, Lua and Gideros so this is not for well versed mobile dev coders. I am making these tutorials so I can come back if I forget things and to write down my progress so in a way you can learn with me. I gave myself a 30 day challenge to see how it goes.  I will start with installation and then with basics.

First part is coming tomorrow, stay tuned.

PS: My main focus is of course still web development with Laravel so I will continue posting Laravel articles.  The blog is not turning itno mobile dev blog. This is just a side “project”,  a learning experience I want to share 🙂

Google Sync Turned Off on my Android! How do I turn on Google Sync?

Yesterday I noticed that all my Google services were not being synced on my Nexus 7 (Android 4.2.2) anymore. Emails were not automatically downloaded, Calendar,Chrome, contacts etc were not updating. On top of that I was getting weird “Sync was unsuccessful” (or something like that) messages on my PC’s browser. Sure enough – sync was turned off on my Android tablet. For some reason option “turn on sync” is not easily accessible or at least not where you would expect it. If you go to Settings -> accounts then you will only be able to manually sync those accounts but not turn it on.

To turn on auto sync you have to go to

Settings -> Data usage -> Menu (top right corner, 3 small squares) -> check Auto-sync data

Here is the screenshot of the Menu:
turn on google sync auto-sync

Fix the “no connection” in your Google Play / Market with date change

There are several reasons why you can get “No connection / Retry” error message in your Google Play or Market. Some are really a connection, wifi or 3G related and some aren’t. There is another reason that might give you this message and it is not really related to connection. This happened to me when I had Samsung Spica.  Wifi was on but I still got the “No connection / Retry” message. After trying nearly every “hack” solution, reinstalling Spicagenmod, downgrading Google Play to Market  etc I still got the same error. I only realized that the solution is much simpler after I opened Opera Mini that gave me this error :

Connection Failed : Verification of server certificate failed. Please check the date setting in your device

I went straight to Settings -> Date & Time  and it was set to year 2005! The reason why this happened is because Spica battery was really old and every time I turned the phone off the date reset itself to 2005. I changed date back to correct date and everything started working instantly – Google Play / Market and Opera. I wish I knew this before I spent few hours with every other fix possible.

As I mentioned there are many reasons why you can get “No connection / Retry”. If this doesn’t solve your problem then unfortunately it’s something different.