Wednesday, January 16, 2013

Learn to program games for iOS: Xcode knowing (II)

logo encabezado curso 2 Aprende a programar juegos para iOS: conociendo Xcode (II)

After the last installment, entitled Learning to program games for iOS: Knowing Xcode , and before we get into Cocos2d, let's dig a little deeper into Xcode. This time, we will interact with the elements created, rather than just a simple "Hello World".

This will gain skills in managing Xcode, and you can make your first applications "helpful" quickly, to learn the basics of using buttons and text labels. Since this class somewhat more complex than the last, will have available for download the working example at the end of the entry, so you can run it and check it out properly! First, open up Xcode and create a new project by choosing the template "single view application", as in the previous class, this will create a workspace based on a single window, with his "chart wizard". Once open, select the file viewcontroller.xib (remember that is the "face chart" of our sight or scene, called viewcontroller, and which part of "code" is viewcontroller.m and viewcontroller.h files), and we went to the box of objects located at the bottom right to start dragging our scene components: labels, buttons ... will have it all!

xcode insertando objetos Aprende a programar juegos para iOS: conociendo Xcode (II)

As seen in the picture, this time we dragged the following:

  • An object "label" as a title. It will not interact with anything.
  • Another object "label", which will house numerical values.
  • A "stepper" commissioned to increase or decrease the numeric value of "label" above.
  • A button to check that the "label" matches a numeric value that we will have previously chosen.

You know already that it is this exercise? Quite simply, we have to choose our age (year to year with the "stepper"), and then, using the check button, find out if we are adults. As absurd as education, with this year are going to learn a stroke several things.

xcode parametros label Aprende a programar juegos para iOS: conociendo Xcode (II)

As you see in the picture above, the size and color of the "label" can be customized. Each object has many parameters that you can go if you investigate a little figuring. Once you have left each object with the features that you like, it is time to take stock: for now we have "drawn" our application, nothing interacts with anything ... we need to give unit.

To do this, let's get to some code (very basic and rudimentary explained); specifically viewcontroller.h file that houses the basic definitions viewcontroller class (our main window!). No code or run actions, only raises the bases and the necessary functions for viewcontroller.m can use them and do the hard work ... we'll see reflected in viewcontroller.xib! The three sides of the same coin.

Explained this, we can begin to define the "code" all objects that have defined visually. We headed viewcontroller.h file and add the following:

xcode variables definidas Aprende a programar juegos para iOS: conociendo Xcode (II)

There are several ways to define variables or elements, but in this case, as an element we need to access them (our window, the graphics), assign them this way (starting with @ property). It is an issue that we will address in future classes, now worth to you to know or intuit referred identify each: a "label" (only one, as the title that we will not interact with anything, and we need not define in the code), a variable integers called "mayoriaDeEdad" (this is new, we did not put in the graphics .. just majority stored for comparison), a "stepper" (called stepper1).

Besides the above, there are two functions (both starting with a hyphen, are functions), one of them will do something when tighten our stepper (For example, make the "label" change our age? Exact ), and the other for comparing the current age of the "label" with which we have set.

So far we have defined the graphics and also the code. But how do we teach our application corresponds to what each variable or item code with its equivalent in the graphic? Really easy. We click on viewcontroller.xib, and give the button gray round shaped "play" and text "show document outline", found at the lower left of the grid sheet. This will display a panel with the elements of our window.

We set up in "Placeholders" containing two buckets: one yellow (File's owner), where associate objects with code (labels, buttons, etc.) and other reddish (First Responder), which associate the functions we have defined a number of actions (such as pressing a button to perform a function).

xcode outline Aprende a programar juegos para iOS: conociendo Xcode (II)

We started with objects. Right click on the cube "Files Owner", and a menu black. We deployed the "Outlets", and see all the elements that we have defined in the code (there are only two, and stepper1 label), we have to drag them to their corresponding graphic element: label with numeric label we created, and stepper1 with stepper.

Dragging will see how to create a "blue tentacle" following our mouse to the object you want to associate. (Note: to start the process of dragging, you have to click on the empty circles next to the name of each object, as in the photo)

xcode objetos Aprende a programar juegos para iOS: conociendo Xcode (II)

Now we must do the same functions, right click on "First Responder", and do the following:

  1. We click on "checkEdad" and hold, drag to the button of our graphics window to check the age. Opens a new drop down menu and choose "Touch down".
  2. Do the same with "stepperValueChanged", but this time we dragged up our "stepper" chart, and in the drop down menu choose "Value Changed".

xcode acciones Aprende a programar juegos para iOS: conociendo Xcode (II)

Now it only remains to add the "real code" to viewcontroller.m, we have to tell you what to do for each action to occur. We begin by telling you are aware of the variables defined in viewcontroller.h (the legal age variable, the variable stepper, and the variable label, both associated with his counterpart chart) with "@ synthesize nombre_de_la_variable_u_elemento", just as we see in the image:

xcode synthesize Aprende a programar juegos para iOS: conociendo Xcode (II)

Without leaving viewcontroller.m, we headed to the viewDidLoad function (end of file), and just below what is already written, but before the "}", define what should be the age of majority in our country. In this case, 18:

xcode didload Aprende a programar juegos para iOS: conociendo Xcode (II)

Finally, we will create and schedule functions viewcontroller.h we defined in (are only two). One will run every time we press the stepper, and show the age to be changing, in our "label".

The other will be executed when the button apretemos age check and check (pun intended) if the age that we have introduced is less than most age: If the answer is yes, the bottom of the app will turn green and if not, will turn red. Both must be put into the file viewcontroller.m for example, immediately before the function - (void) viewDidLoad.

xcode funciones Aprende a programar juegos para iOS: conociendo Xcode (II)

Now comes the best. A must try! DirigĂ­os the play button above, you are chosen by checking the "iPhone Simulator", and give. It will open your window, and you can interact with it!

foto clase 2 Aprende a programar juegos para iOS: conociendo Xcode (II)

The exercise could be made more complex, but with this you have the foundations to investigate on your own, and try new options. To make it easier to follow the tutorial, curiosity, or simply if conseguis not make it work, here's the project in an archive! I hope you have served ... until next time!

More - Learn to program: knowing Xcode (I)

Download - Second class programming for Xcode

Article Learn to program games for iOS: Xcode knowing (II) was originally published in News iPhone .

No comments:

Post a Comment