How to use Corona SDK

how to use corona sdk on windows and how to install corona sdk and how to learn corona sdk and how to update corona sdk how to install corona sdk on windows
Dr.KiranArora Profile Pic
Dr.KiranArora,Canada,Teacher
Published Date:27-10-2017
Your Website URL(Optional)
Comment
Corona SDK If you have embarked on the journey to develop cross-platform apps for mobile devices, you will have heard of Corona SDK, from Corona Labs (previously called Ansca Mobile). It is available for both Windows and Mac OS X (though running it on Wine is not reported as stable). A trial version of Corona SDK allows for unlimited testing and building for the device (although it includes a trial message). Once you purchase a license, you can deploy the apps on the app stores. Setting Up Corona SDK To start using Corona SDK, you will need to download the trial edition, either as a .dmg file (for the Mac) or an .msi file (for Windows), from https://developer.coronalabs.com/downloads/coronasdk. To be able to download the file, you will have to register with Corona Labs. You can convert the trial version into a full version at any time by simply purchasing an appropriate license. There are several licensing options that you can choose from. The Indie license (199) allows you to run one platform, either iOS or Android, the Pro license (399) allows you to run both iOS and Android, and the Enterprise license (in the range of 3,000—pricing is on demand from Corona Labs). Details on the Enterprise Edition can be found towards the end of the chapter. If you have no previous experience with Corona SDK, the first impressions can be quite intimidating, as there is no IDE or editor whatsoever. How Corona SDK Works Corona SDK is offered as Corona terminal and Corona simulator. It is advisable to launch Corona SDK using Corona terminal. This will start up a terminal (where you can see all the debugging output), and this will in turn start Corona simulator. The welcome screen for the SDK is shown in Figure 8-1. From here you can navigate to the directory where your project files are and the simulator will run your code. 128 CHAPTER 8: Corona SDK The welcome screen when you start Corona SDK main.lua file. This, along with the other project files, Hello World for Corona SDK The architecture of Corona SDK, shown in Figure 8-2, is as follows: the Corona SDK engine runs in the simulator or on the device and runs with all the resources that make up the project, including the code, artwork, sound, and so on. These resources all reside in a directory from which the simulator looks for the entry point. The entry point is in the form of the main.lua file that is opened and executed. Figure 8-2. The Corona SDK architecture CHAPTER 8: Corona SDK 129 First, create a new directory, Proj_01, and with the text editor of your choice, type the following code and save it as main.lua in the Proj_01 directory. Hello world for Corona SDK print("Hello World") Now start Corona SDK and click Simulator. Then navigate to the directory you just created and click Open. This will start the simulator with a blank screen, but if you look at the terminal window, you’ll see the text Hello World displayed. Graphic Version The Corona Engine is made up of the basic Lua libraries and other libraries that are responsible for display, audio, video, etc. Table 8-1 provides a list of the libraries that are available with Corona SDK that make up the Corona Engine. Table 8-1. The Namespaces Available in Corona SDK Library Description ads All ad-displaying libraries analytics All functions relating to using analytics audio All audio-related functions credits All functions related to virtual currency crypto All crypto-related functions display All functions related to display elements easing All easing-related options used in transitions facebook All Facebook-related functions gameNetwork All functions relating to Apple Game Center and OpenFeint/Gree graphics All graphics-related functions that help with the display elements json All functions related to reading and writing JSON data lfs The Lua file system library for dealing with files and folders media The media functions to display video and audio native The functions to deal with native functionality of the devices network The functions related to the network and data communications physics The Box2D-related physics libraries socket The LuaSocket library to allow for all TCP and UDP socket communication sprite The functions to work with sprite libraries sqlite3 The functions that allow for SQLite3 database access store All functions related to in-app purchases storyboard All functions related to storyboards timer All functions related to timers transition All functions for performing transitions widget 130 CHAPTER 8: Corona SDK For more details on the libraries and functions, the online API reference found on the Corona Labs web site is quite useful (see http://docs.coronalabs.com/api/). It lists the API and if there are any additions, this online reference provides all of the latest updates to the API. Hello World on the Screen In this exercise, let’s display “Hello World” on the device for the world to see (Figure 8-3). We shall use an alert box to display “Hello World” on the device, instead of the terminal. native.showAlert("Hello World", "via the showAlert", "OK") Figure 8-3. “Hello World” displayed in an alert dialog on the iOS device This is the easiest and the quickest way to display information to the user without the hassle of creating display objects. The best part is that this adapts natively to the platform you are running the app on.CHAPTER 8: Corona SDK 131 Hello World on the Device The display namespace has functions to create basic display objects, including images, text, rectangles, rounded rectangles, circles, lines, groups, and so forth. To begin, we’ll create a text object and display it on the screen. local lblText = display.newText("Hello World",10,50) This one line will place a new text object with the textHello World on the screen at locations 10 and 50 in the default system font as can be seen in Figure 8-4. The syntax of the functionnewText is as follows: display.newText( parentGroup, string, left, top, font, size ) display.newText( parentGroup, string, left, top, width, height, font, size ) Figure 8-4. “Hello World” displayed as a label on the device At any point, you can build the application for the device and run it on the device rather than running it in the simulator. To be able to upload a built app onto an iOS device, you will need to be enrolled in Apple’s iOS Developer Program and have the necessary certificate to sign the app to be able to upload to the device. On Android, this should not be an issue, and you can build an APK that can be uploaded to the Android device. 132 CHAPTER 8: Corona SDK Beyond Hello World: Creating a Rectangle on the Screen In the same manner, we can create a rectangle on the screen, as shown in Figure 8-5. local rect_01 = display.newRect( 50, 50, 200, 200 ) Figure 8-5. A rectangle on the device with the default fill colors This shall create a rectangle on the screen that is placed at position 50, 50 and has the dimensions 200×200. The display elements, when created, are assigned the default settings; therefore, we see a white rectangle on the screen even if we do not specify a fill. We can change some of the attributes, such as the fill color, outline color, and alpha (transparency), as well as the scale and the rotation of the rectangle. Let’s modify the rectangle to manipulate all of these. rect_01:setFillColor(255,0,0) setFillColor takes the color as four values: red (R), green (G), blue (B), and the optional alpha (A). The values for the colors are in the range of 0 to 255, and the alpha is opaque (255) by default. CHAPTER 8: Corona SDK 133 We can add an outline to the rectangle by specifying the stroke color and the stroke line width, as follows: rect_01.strokeWidth = 2 rect_01:setStrokeColor(0,255,0) strokeWidth sets the width of the stroke line (outline); setting it to 0 is equivalent to specifying no border or outline for the object. setStrokeColor is similar to setFillColor in terms of the arguments it takes. These are colors specified in the RGBA format. We can scale the rectangle using the scale function. Note You can adjust an object’s scale using either thescale() function or thexScale andyScale properties, although they work somewhat differently. The function scales the object relative to the current scaling, and the properties assign absolute scale values to the object. In this exercise, we’ll simply use the xScale or yScale method to scale the rectangle. The advantage is that we can scale an object on one axis when required with the scale property, whereas with the scale() function, we need to specify the scales for both the x- and y-axis. rect_01.xScale = 0.5 Rotating the object is equally simple—we can simply use the rotation property or the rotate() function. Similar to the scaling function and method, rotate and rotation also work with relative or absolute rotation. If we were to call the rotate() function on the object three times with a value of 30, that would rotate the object to 90 degrees (i.e., 30 degrees × 3), whereas calling the rotation property with 30 any number of times would rotate it to an absolute value of 30 degrees. rect_01.rotation = 30 Here’s the code all together: local rect_01 = display.newRect( 50, 50, 200, 200 ) rect_01:setFillColor(255,0,0) rect_01.strokeWidth = 2 rect_01:setStrokeColor(0,255,0, 128) rect_01.xScale = 0.5 rect_01.rotation = 30 Figure 8-6 shows what it would look like after applying all of the transformations just described. w nfo134 CHAPTER 8: Corona SDK Figure 8-6. Transformations applied to the rectangle Groups All display elements can be placed in a group. Think of a group as a container that can hold display elements. The advantage of a group is that by manipulating the position and display attributes of the group, you can affect all of the display elements held in the group together. You can move, rotate, and scale them, and you can change their alpha property and the visibility. local grp = display.newGroup() local text1 = display.newText("One", 10, 10) local text2 = display.newText("Two", 10, 30) local text3 = display.newText("Cha-Cha Cha", 10, 50) When we run this, three lines of text are displayed on the screen. We can relocate any one of them by modifying the x or y position of the elements. Add the following code to the end of the preceding code. To rerun or refresh, simply press⌘+R on the Mac or Ctrl+R on Windows. Corona SDK also monitors the directory for changes and will offer the option to relaunch the project if it is changed. text2.y = 90 w nfo CHAPTER 8: Corona SDK 135 After running this, “Two” is now displayed below the “Cha-Cha Cha” text, and the place where “Two” was displayed is now blank, or empty. Let’s add the text “One” to the group: grp:insert(text1) When we refresh, everything should look the same as before. Let’s try to position the group that contains the text “One.” grp.x = 100 grp.y = 20 On refreshing the simulator, the text “One” moves, as shown in Figure 8-7. It is now in the position where the text “Two” used to be, but a bit more to the right. Although we modified the position of the group, the text moved because it is contained in the group. Figure 8-7. Displaying text in a group By default, everything has a parent, or a group in which it is contained. The root, or parent, group of all elements created is referred to as the stage. We can access that via the display.getCurrentStage() function. w 136 CHAPTER 8: Corona SDK Images One of the advantages of choosing Lua over languages such as C, C++, or Objective-C is that the need for allocating and deallocating memory is made redundant. The wrappers that the frameworks provide allow for easier coding compared to native code. When using Corona SDK, we can load and display images on the screen with ease. To load an image, we use the newImage function in the display namespace: local img = display.newImage("image1.png") Alternatively, we can also provide the coordinates where we might want the image to be located: image1.png and place it at the position 50, 50 on the screen. longer necessarily synchronous in their flow. Events can occur and need to be handled at various times in an app’s life cycle. To enable us to use GUI-based applications, the concept of event-based programming was introduced. As shown in the diagram in Figure 8-8, in this type of processing, an event occurs and is passed to the application to be processed, and based on the event type, the application does what’s necessary. In our case, the most commonly used event that we shall be working with is the touch event. That is the primary source of all input to the application. To allow the code to listen to the events that occur, the program has to register itself as a listener for a particular event and also pass a handler to the program that is called when the event occurs. wCHAPTER 8: Corona SDK 137 Figure 8-8. Architecture of an event process in Corona SDK We can register the program to listen to specific events using the addEventListener function on the object on which we want to listen to the events, and we can pass it a function that will handle the event when passed to it. OBJECT:addEventListener(EVENT, HANDLER) In this code, EVENT is one of the many events that we can register to listen for, and HANDLER is the function that is invoked when the event is received. Input: Touches We can place images and text on the screen using the methods mentioned. However, we also need to handle the various forms of input, such as touches on the touch screen. These are equivalent to mouse clicks on the desktop. Generally, touch events are associated with a display element; you can touch the display element and trigger a touch phase. However, Corona SDK also allows you to have a generic touch handler that is associated with theRuntime object, which triggers the touch event for all objects. When the user places a finger on the device, a touch event is triggered. As shown in Figure 8-9, this touch event has a couple of attributes, or members. A touch event starts with the finger touching the w 138 CHAPTER 8: Corona SDK screen, and the event sets the value ofphase tobegan. It also sets thetarget to the object that has been touched and thex andy to the coordinates of point where the user placed the finger on the screen. The touch “began” event and its members phase is set to move. The target, x, and y still contain the values of the object 8-10, a series of touch events are triggered, with phase set to move, and the x and y Figure 8-10. The touch “move” event and its members When the user lifts the finger off the screen, a touch event is triggered with phase set to ended, as shown in Figure 8-11. The other three attributes reflect the target and the x and y position where the touch ended. Figure 8-11. The touch “ended” event and its members w CHAPTER 8: Corona SDK 139 The cancelled phase is triggered when a touch event is interrupted after it triggers the began phase but does not complete with the ended phase. This interruption can be due to an incoming phone call, a system-triggered message, a notification, and so on. Let’s write some code to display the touch events (what we have just read about): function handler( event ) print( "touch phase=" .. event.phase .. " at x=" .. event.x .. ", y=" .. event.y) end Runtime:addEventListener( "touch", handler ) On running this code, we can look at the terminal window for the output. Similar to the touch event, there is a tap event can be handled. The difference between a touch and tap is that a touch starts with the began phase and ends with the ended phase. A tap event, on the other hand, is triggered when the user begins the touch and ends it without moving the touch. The tap event has a property numTaps that indicates the number of taps associated with that touch event. function onTap( event ) print( "Taps :".. event.numTaps ) end Runtime:addEventListener( "tap", onTap ) Physics The feature that brought Corona SDK into the limelight and made it popular with developers was its ability to integrate physics into its code in about eight lines or so. You can make any display object into a physics object simply by assigning it as a physics body using the function physics.addBody(). local ground = display.newRect( 0, 40, 320, 20) On running this code, rectangle is displayed on the screen. In order to make this a physics object, we need to include the physics library. I described in earlier chapters that the you can include libraries by using the require keyword, like so: local physics = require "physics" physics.start() These two lines are of utmost importance: the first one gets a handle on the physics library, which allows us to call the physics-related functions from the physics namespace, and the second line actually starts the physics engine. Making the objects physics objects does not make a difference until physics.start is called. This is mostly used in games that allow the user to position the objects on the screen and then invoke the physics.start function to start the physics simulation interacting with the placed objects. Some examples that use this are Bubble Ball and Angry Orange (not made with Corona SDK). 140 CHAPTER 8: Corona SDK However, even after adding these two lines, the rectangle we created doesn’t yet act as a physics body, because we have not as yet marked it as a physics body. To do so, add the following line of code: physics.addBody( ground ) Upon refreshing the project in the simulator, the rectangle starts to obey gravity and falls down, off the screen. Let’s create another object that falls; for simplicity’s sake, we’ll create another rectangle. To do this, we’ll alter the first line of the preceding code and place the ground object close to the bottom of the screen rather than toward the top of the screen. rect1 object ground object. Before we proceed, we need to know a few things. Creating a physics body is easy, but there are a few different types of physics bodies that we can create, and their differences are important. A physics body does not interact with other display objects; it can only interact with other physics bodies. There are three main types of physics bodies: static, dynamic, and kinematic. The default type of physics object is dynamic, which means that the moment we start the physics engine, this object will start to obey the rules of gravity. The second type is static; objects of this type stay in place and do not obey gravity, but they still interact with physics objects. The last type is kinematic, in which the velocity affects the objects but gravity has no effect on it. A kinematic object moves under the influence of its own velocity. With this knowledge, we can write the following code: local physics = require "physics" physics.start() local ground = display.newRect( 0, 460, 320, 20 ) local rect1 = display.newRect( 140, 0, 40, 40 ) physics.addBody( ground, "static") physics.addBody( rect1 ) Now, as shown in Figure 8-12, the rectangle for the ground does not fall off the screen, and the rect1 rectangle bounces when it hits the ground.CHAPTER 8: Corona SDK 141 Figure 8-12. A dynamic physics object interacting with a static physics object The rectangle can be replaced with a skin—that is, a graphic—and this is a very easy: local physics = require "physics" physics.start() local ground = display.newRect( 0, 460, 320, 20 ) local rect = display.newImage( "DominoTile.png" ) physics.addBody( ground, "static") physics.addBody( rect1 ) Timing Is Everything Many games offer special powers to their players. For example, games like Arkanoid (Breakout) offer get lasers, multiple balls, and so on. In other games, you might get super-speed or strength for a limited time, depicted on the screen in the form of a timer, whereby the powers disappear when the time is up. What if for our game we wanted something similar? For example, say we want to track or provide some special abilities for a short period of time. 142 CHAPTER 8: Corona SDK The timer comes to our rescue. Though the word timer might bring to mind something like an alarm that goes off at the end of a specified time, in Lua, the timer is more like a heartbeat—one that we can control the beat of. And we can decide what we want the program to do when that timer beats. Setting up a timer is easy—we simple use the following: local heartbeat = timer.performWithDelay(1000, function() print("tick") end, 0) When you run this, you’ll see the words tick outputted to the terminal once per second. The function Timer namespace and has four functions: timer.performWithDelay() to create a new timer.cancel() to cancel a timer, timer.pause() to pause the timer from firing further, and to continue from the point where the execution was paused. performWithDelay takes a single parameter, which is the handle to performWithDelay, when called, returns a handle to delay, listenerFunction, iterations. The first parameter, delay, specifies the frequency that the timer event is fired in listenerFunction; this points to a Lua function and is the Here’s how to print a list of numbers from 1 to 10 using the timer: local counter = 1 function printNumber(event) print("Counter is :".. counter) counter = counter + 1 end timer.performWithDelay(1000,printNumber, 10) Frames While the workings of televisions and movies may seem complex, the way they work is actually quite simple. The movie or TV screen displays a series of static images in rapid succession, fast enough that our eyes perceive these images as continuous movement. This is also how animators create animation. They draw a series of frames with the images, and when the images are then played back to us in rapid succession, it provides us the illusion of movement. If the images are played back too slowly, we can catch the changing of images between frames; if they’re played too fast, everything appears abnormal and sped up. Now, what does that have to do with development? Everything Most animation software works with a timeline. The timeline is generally the blueprint of the animation, which determines the position and transformations of the objects over time or frames. The app starts at frame 1 and iterates through a set number of frames to provide the illusion of movement, till it reaches the end of the frames, when it stops. However, in some cases, the timeline may wrap—that is, start again from the beginning as if in a loop. The numbers of frames that are displayed in a second is referred to as the frame rate. The more frames you can display in a second, CHAPTER 8: Corona SDK 143 the smoother the movement. Most software uses the terminology frames per second (fps), which is used to describe the frame rate of animated objects on the screen. Think of this as the heartbeat of the app. For example, you can set the heartbeat to either 30 fps or 60 fps, the latter providing a smoother animation. However, a higher frame rate will be harder on the CPU, especially in an app that triggers some processing, so in certain cases a lower frame rate is a better choice. When you create animations in Lua, Corona SDK allows you to set your app to either 30 or 60 fps. For simplicity’s sake, we’ll write a handler to catch an event and simply print a message. function ticker( event ) print ( "tick" ) end Runtime:addEventListener ( "enterFrame", ticker ) When run, this will output a lot of lines that display “tick” in the terminal window. Note TheenterFrame event is dispatched prior to the screen render taking place. Making a Health Bar If you have played any real-time strategy or tower-defense games, you know that each character has some amount of health, and every time the character is hit, the health bar reduces or changes color. In this example, we’ll create a bar using a rectangle, as shown in Figure 8-13. Then we can modify the size of the rectangle by manipulating the height of the rectangle at the enterFrame event. local bar = display.newRect ( 100, 300, 20, 70 ) bar:setFillColor (100,100,200,200) local theText = display.newText( "value", 140, 300, nil, 20) theText:setTextColor( 255, 255 ,255 ) local time = 20 local counter = 0 local direction = 1 local isStopped = false function toggleMove ( event ) isStopped = not isStopped end function move ( event ) if isStopped == true then return end counter = counter + direction if counter=time or counter=0 then direction = -direction end 144 CHAPTER 8: Corona SDK bar.height = 8 counter bar:setReferencePoint(display.BottomLeftReferencePoint) bar.y=300 theText.text = counter end Runtime:addEventListener ( "enterFrame", move ) Runtime:addEventListener ( "tap", toggleMove ) Figure 8-13. The health bar on the device (or simulator), with the value displayed Notice that the bar starts to bob, increasing at first and then decreasing. The health bar bobs to demonstrate how an object can be modified each time the enterFrame function is called. This can be used for animation, such as changing the location of the object on the screen or changing the dimensions of the object. Animating Using enterFrame As shown in Figure 8-14, we can useenterFrame to move an object on the screen. In Chapter 4, you learned about constraining an object to a particular dimension on the screen. We are definitely not in CHAPTER 8: Corona SDK 145 the matrix where we have be able to understand things by looking at numbers, so we’ll create a GUI version of the same code. Figure 8-14. Using the enterFrame handler to make a red circle bounce around the screen local point = x=0,y=0 local speed = x=1,y=1 local dimensions = 0,0,320,480 local ball = display.newCircle(0,0,20) ball:setFillColor(255,0,0) function positionBall(thePoint) print("ball is at" .. thePoint.x .. " , ".. thePoint.y) ball.x = point.x ball.y = point.y end146 CHAPTER 8: Corona SDK function moveBall() local newX, newY = point.x + speed.x, point.y + speed.y if newX dimensions3 or newX dimensions1 then speed.x = - speed.x end if newY dimensions4 or newY dimensions2 then speed.y = - speed.y end point.x = point.x + speed.x point.y = point.y + speed.y end function loop_it_all(event) positionBall(point) moveBall() end Runtime:addEventListener ( "enterFrame", loop_it_all ) will correspondingly get shorter. The bar will also change color from green to orange to red, indicating the severity of the situation. local barSize = 200 local barHeight = 30 local healthBar = display.newRect ( 10, 100, barSize, barHeight) healthBar:setFillColor ( 0, 255, 0 ) make this green healthBar.health = 10 a dynamic var for the healthBar function updateHealth() local theHealth = healthBar.health - 1 if theHealth 0 then return end healthBar.health = theHealth if theHealth 6 then GREEN healthBar:setFillColor ( 0, 255, 0 ) elseif theHealth 4 then ORANGE healthBar:setFillColor ( 180, 180, 0 ) elseif theHealth 0 then RED healthBar:setFillColor ( 255, 0, 0 ) elseif theHealth == 0 then BLACK healthBar:setFillColor ( 0, 0, 0 ) end