Home >

Deploying a LibGDX RoboVM project to an actual iOS device

23. February 2014

 

First fire up Xcode.  If you haven’t got Xcode, I suppose first get Xcode then fire it up! :)  You also need to have an active iOS developer subscription. You can read more about that process here.

With Xcode loaded, plug in your iOS device to USB on your Mac.  On the iPad select Trust this computer if you haven’t already.

The Organizer window should be up.  If not done already click “Use for Development” button.  Now you hook up your Apple developer account, click Add to Member Center.

NewImage

 

You will be prompted for your Apple Developer ID.

NewImage

 

Next you will be prompted to request a developer certificate.

NewImage

 

In theory this will automatically download a developer profile for you.  In reality it failed for me, and according to google, this isn’t uncommon.  If this happens to you, log in to developer.apple.com Member Center and manually download the provisioning profile.

NewImage

 

Now back in Organizer, select Provisioning Profile and click Add

NewImage

 

Navigate to the file you just downloaded and select it.  Your device should now be ready for development.

 

Go to your project in Eclipse, right click the RoboVM project and select Debug->iOS Device App.

NewImage

 

Finally, you may be prompted to approve keychain access.  Do so.

NewImage

 

And you should be done.

I actually got a few errors when trying the first time.  LOCKDOWN_E_PASSWORD_PROTECTED and LOCKDOWN_E_UNKNOWN_ERROR.  I simply unplugged and replugged the iPad and tried again and third times a charm.

,







blog comments powered by Disqus
Moai Tutorial Part 2: Loading and displaying a sprite

Moai Tutorial Part 2: Loading and displaying a sprite

24. August 2012

 

When we last visited Moai land things were getting started, hot and pink; but just a bit boring.  Let’s spice it up a bit with a sprite that totally isn’t the logo from Watchmen!

 

screenWidth = MOAIEnvironment.screenWidth
screenHeight = MOAIEnvironment.screenHeight
print("Starting up on:" .. MOAIEnvironment.osBrand  .. " version:" .. MOAIEnvironment.osVersion)

if screenWidth == nil then screenWidth =640 end
if screenHeight == nil then screenHeight = 480 end

MOAISim.openWindow("Window",screenWidth,screenHeight)

viewport = MOAIViewport.new()
viewport:setSize(screenWidth,screenHeight)
viewport:setScale(screenWidth,screenHeight)

layer = MOAILayer2D.new()
layer:setViewport(viewport)

MOAIRenderMgr.pushRenderPass(layer)

sprite = MOAIGfxQuad2D.new()
sprite:setTexture("smile.png")
sprite:setRect(-200,-200,200,200)

prop = MOAIProp2D.new()
prop:setDeck(sprite)
prop:setLoc(0,0)
layer:insertProp(prop)

MOAIGfxDevice.setClearColor(1,1,1,1)

 

And when you run it:

 

image

 

At least half of this code we covered in the prior tutorial, so we will skip right past that and jump in to what’s new:

 

sprite = MOAIGfxQuad2D.new()
sprite:setTexture("smile.png")
sprite:setRect(-200,-200,200,200)

 

Our “sprite” is in fact a MOAIGfxQuad2D, which may at first sound like a remarkably more confusing name than sprite.  You see, behind the scenes Moai ( and pretty much every other modern engine ) is actually working in 3D, not 2D.  It’s just the way GPUs work these days.  So when you see a 2D library, it is actually faking 2D by creating a 3D scene and ignoring one of the D’s.  As part of the process, you don’t really have sprites anymore, instead you have textured quad’s ( 4 vertices rectangles ) that are parallel to the camera.  So, we create a rectangle that is aligned to the camera and draw our texture on top of it, giving the illusion of being a simple sprite or image, but making the GPU happy at the same time.  So… that’s why it’s called a MOAIGfxQuad2D instead of say… a sprite.

 

Anyways, we create a new MOAIGFXQuad2D, and set it’s texture to the file name we want to load onto it.  Oh yeah, you need an image to display, and you need to copy it to the same folder as main.lua.  While we are on the topic of “oh yeahs!'”, save the above code to a file named main.lua!  Once we load our texture, we are going to size and position our quad in a single call, setRect().  Coordinates are relative to the center of the screen, so position 0,0 is exactly in the middle of your screen.  So when we say –200,-200, we are saying the top left corner of the rectangle is 200 pixels to the left of center and 200 pixels above center.  While the other 200,200 is saying the bottom right corner of the quad is 200 pixels to the right and 200 pixels down from the center point.  End result, we create a textured quad centered to our screen that is 400x400 pixels, so I suppose that is technically a square.  By changing the values in setRect, you can reposition the sprite ( for example (-400,-200,0,-200) would move the quad 200 pixels to the left ) as well as scale it ( (-100,-100,100,100) would scale it to half it’s current size ).

 

prop = MOAIProp2D.new()
prop:setDeck(sprite)
prop:setLoc(0,0)
layer:insertProp(prop)

Now we create a MOAIProp2D.  Remember in the last tutorial when I said layers are made up of stuff that are composed together to create the frame?  Well a MOAIProp2D is one such example of “stuff”.  What then does setDeck do?  In the simplest term, think of a “Deck” as a data source.  An image or a sprite sheet ( or texture atlas in Moai parlance ) are both examples of decks.  Think of a Prop is an *instance* of a deck, or perhaps most accurately instanced from a deck.  To make life easier on yourself, just think of a deck as the data source for a prop.  I’ll be honest, I'm not a huge fan of the metaphor they choose, but then if you read their explanation, neither are they.  Next you position the prop within the layer, keeping in mind 0,0 is dead center.  Finally, the prop is inserted into the layer via insertProp(). To finish things off:

 

MOAIGfxDevice.setClearColor(1,1,1,1)

 

I like pink as much as the next man, but sometimes I like white a whole lot more.

 

That, is how you display a sprite ( erm, Prop ) on screen.

 

But wait!  There’s more…

 

You do however have a couple options.  You see, loading from file can be a bit expensive, especially if you are using the same image over and over.  So, instead of loading the sprite from disk in the setTexture call, lets instead load it from an Image already loaded and resident in memory.

 

texture = MOAIImage.new()
texture:load("smile.png")

sprite = MOAIGfxQuad2D.new()
sprite:setTexture(texture)
sprite:setRect(-200,-200,200,200)

 

Here we create a MAOIImage in advance, load the image file into it, then use that in our setTexture() call.  Now instead of loading from disk, it loads from memory, which is substantially quicker.  One thing should be pointed out here, that image is in system memory and needs to be copied to the GPU each time it is drawn.  Don’t worry, this makes sense and is completely normal, but on occasion can be a bit hard on performance.  If you have an image that is drawn a lot, like say, the player sprite or a static part of the HUD, you may want to cut the whole copy to video memory out of the equation and store your sprite in video memory.  MOAI has a way to do this as well.

 

texture = MOAIImageTexture.new()
texture:load("smile.png")

 

Basically you just use MOAIImageTexture instead of MOAIImage.  Keep in mind, video memory is a constrained resource, so don’t do this lightly.  Also keep in mind, changing the item in video memory effectively ruins any point of it being there in the first place, so only use MOAIImageTexture if your image isn’t changing often.  I would generally recommend you go with normal MOAIImage until you have a good reason not to.  Be careful, your optimization can easily cause performance to get worse!

 

 

And done…  you now know how to draw an image on screen, one step closer in our master plan to take over the wor… er, create a game.  Stay tuned for the next exciting episode where we demonstrate how to successfully raise a peasant army… or handle touch events.  One of those two topics, I’m not sure which yet.

 

Programming , ,







blog comments powered by Disqus