Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
5. September 2012

 

In this section we are going to do something we probably shouldn’t… work with the keyboard.  As you will soon see, when dealing with mobiles, this isn’t a particularly smooth journey! Mobile and keyboards go together like peanut butter and hand grenades.

 

As is always the way, let’s jump right in with code:

 

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

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)


chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

font = MOAIFont.new()
font:loadFromTTF('comic.ttf',chars,60,72)


text = MOAITextBox.new()
text:setString('Press a key')
text:setFont(font)
text:setTextSize(60,72)
text:setYFlip(true)
text:setRect(-320,-240,320,240)
text:setAlignment(MOAITextBox.CENTER_JUSTIFY,MOAITextBox.CENTER_JUSTIFY)


if(MOAIInputMgr.device.keyboard) then
    print("Keyboard")
    MOAIInputMgr.device.keyboard:setCallback(
        function(key,down)
            if down==true then
                text:setString(string.char(tostring(key)))

            end
        end
    )
else
    print("No Keyboard")

    if(MOAIEnvironment.osBrand == "iOS")   then
        MOAIKeyboardIOS.showKeyboard()
        MOAIKeyboardIOS.setListener(MOAIKeyboardIOS.EVENT_INPUT,function(start,length,textVal)
            text:setString(textVal);
        end
        )
    else
        print("The keyboard is a lie");
        -- Android, no keyboard support :(
    end
end

layer:insertProp(text)

 

Here is the program in action:

 

image

 

Exciting eh?  Again, we are going to skip over the familiar bits and jump right in to the new stuff.

 

One thing you might notice compared to prior tutorials, the line:

 

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

 

Has changed to

 

print("Starting up on:" .. MOAIEnvironment.osBrand);

 

Why is this?  Well remember when I said it was up to the host to implement the various values in MOAIEnvironment.  Well, I finally got around to testing on iOS and apparently MOAIEnvironment.osVersion isn’t implemented, at least, it isn’t on the Simulator.  As I recommended earlier, never trust these values to exist on all platforms! In production code, be sure to check for Nil.

 

Now the new code, let’s start with:

chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

font = MOAIFont.new()
font:loadFromTTF('comic.ttf',chars,60,72)

 

The first line is a string of characters representing the individual characters we are going to be using.  If you need additional characters ( such as punctuation ) be sure to add them to this string.  We then create a new MOAIFont object, then load the font from a ttf file, comic.ttf ( I copied from the Windows font directory, you cannot legally redistribute fonts you don’t license! ).  Regardless to where you got it from, be sure to place a ttf file in the same directory as main.lua.  I moai to create the font created at a font height of 60 pixels and at a resolution of 72dpi.

 

Next up:

text = MOAITextBox.new()
text:setString('Press a key')
text:setFont(font)
text:setTextSize(60,72)
text:setYFlip(true)
text:setRect(-320,-240,320,240)
text:setAlignment(MOAITextBox.CENTER_JUSTIFY,MOAITextBox.CENTER_JUSTIFY)

 

Now we are creating a MOAITextBox, which is a bit misleading in name, especially if you have done some prior WinForm or ASP.NET programming.  A MOAITextBox is simply a text area on screen, often referred to as a label or text area in other libraries.  We then set text’s string value to “Press a Key” using the setString() method, set the font to the font we created earlier with a call to setFont(), and set the text size and dpi to match the values we used to create the font.  Next we call setYFlip to invert the font.  For reasons I don’t completely understand, MOAI renders text upside down by default… so this inverts it to the proper position.  Next we position and size the MOAITextBox with a call to setRect, telling it to position centered and use our full 640x480 screen ( again, remembering that coordinates are relative to 0,0 being the middle of the screen ).  Finally we center the text horizontally and vertically within the text area with a call to setAlignment().

 

Now we actually deal with handling keyboard entry:

 

if(MOAIInputMgr.device.keyboard) then
    print("Keyboard")
    MOAIInputMgr.device.keyboard:setCallback(
        function(key,down)
            if down==true then
                text:setString(string.char(tostring(key)))

            end
        end
    )
else

 

Here we are testing to see if a MOAIInputMgr.device.keyboard has been defined.  If this value is assigned, it means we have a keyboard ( currently this means we are running on a PC or Mac host, but don’t expect that to stay true forever ).  If a keyboard is in fact available, we set a callback function to handle key input.  This callback takes the key code ( as a number ) and a boolean, indicating if it was pressed or released and will be called every time a key is pressed.  We check to see if the key was pressed ( as opposed to released ), and if so, we simply convert the key code to an actual character and display it in our text box.

 

However, if there isn’t a keyboard…

 

else
    print("No Keyboard")

    if(MOAIEnvironment.osBrand == "iOS")   then
        MOAIKeyboardIOS.showKeyboard()
        MOAIKeyboardIOS.setListener(MOAIKeyboardIOS.EVENT_INPUT,function(start,length,textVal)
            text:setString(textVal);
        end
        )
    else
        print("The keyboard is a lie");
        -- Android, no keyboard support :(
    end
end

 

First we check to see if we are running on an iOS device.  If we are, we display the on screen keyboard, then set an event listener using MOAIKeyboardIOS listening for EVENT_INPUT events.  We then set the typed value textVal to our text box, which will be the currently typed character.  Otherwise we assume we are running on Android in which case we are…

 

 

Screwed.  Basically.  As of exactly this moment, there is no MOAIKeyboardAndroid available, although one has been developed so it should be available soon.  Until then, you can’t really handle keyboard entry on Android, unless you extend the host yourself.  I will update this guide when Android support is officially added.  You may be thinking to yourself “what about my hardware keyboard, it surely works, right???”.  Actually no.  Alternatives do exist ( there is a GUI package with an onscreen keyboard included ) that we will cover later, but for now at least until Android keyboard support is made publically available, you are kinda screwed.

 

 

Finally, we add our MOAITextBox to the layer with a call to

layer:insertProp(text)

 

Now you are happily traveling along with full keyboard support in your application!  Well, unless of course you have an Android device, in which case you are probably sulking in a corner.

 

 

Programming


3. September 2012

 

 

Have I ever mentioned how much I hate

 

a) developing for Android

b) using Eclipse

c) developing for Android using Eclipse?

 

 

Well, I do.  So often you spend more time fighting the tools than you do fighting with code, and today was yet another example.

 

I have some Moai code that worked perfectly well, both in the Windows host and on my device.  I made some alterations to the Lua code testing it to work on iOS ( by the way, the process of getting Moai running on iOS is 10000000x times easier than getting it running on Android! ), so other than some scripting changes, I haven't changed a thing.

 

I load up Eclipse click Run and…

 

[2012-09-03 14:54:20 - DeviceMonitor] Failed to start monitoring 84ef7369

[2012-09-03 14:54:20 - DeviceMonitor] Failed to start monitoring 84ef7369

[2012-09-03 14:54:20 - DeviceMonitor] Failed to start monitoring 84ef7369

[2012-09-03 14:54:20 - DeviceMonitor] Failed to start monitoring 84ef7369

[2012-09-03 14:54:20 - DeviceMonitor] Failed to start monitoring 84ef7369

[2012-09-03 14:54:20 - DeviceMonitor] Failed to start monitoring 84ef7369

[2012-09-03 14:54:20 - DeviceMonitor] Failed to start monitoring 84ef7369

 

WTF?

 

So I kill off adb ( adb kill-server ) and restart it ( adb start-server ).  Still no luck.

 

I exit and restart Eclipse.  No luck

 

I reboot my computer and phone.  No luck

 

I switch devices and try a different Android device.  No luck

 

 

Want to know what it is?  USB3.

 

Seriously, ADB doesn’t play well with USB3, or at least Eclipse+ADB don’t play well with USB3.

 

I plug into a different port and everything is just fine.  Well, except a few more gray hairs that is. Sad smile

Totally Off Topic


31. August 2012

 

It’s 300+ pages of how-to, tips, tricks and what have you, about all things art.  Ryan Hawkins is an industry veteran with experience working with Blizzard, Pixologic, Vigil Games and more.  Plus, he brought along friends, Tor Frick, John Park as well as people from Blizzard and Naughtyimage Dog.  That’s some pretty heavy caliber talent sharing their art talents.  Topics include sculpting, texturing, concept art, color theory and more.

 

 

Oh yeah, for free.

 

 

It’s a 216MB e-book and, well….

image

 

So, I might recommend you try a torrent instead.

 

Of course, you can read more at this website.  I actually managed to download using the US mirror without issue.

 

Very cool work guys.

Art


30. August 2012

 

In celebration of their 40th anniversary, Atari has re-released a number of their classic games as HTML5 in their newly launched web arcade.  Each of the titles has received a facelift, and the list includes:

  • Asteroids
  • Centipede
  • Combat
  • Lunar Lander
  • Missile Command
  • Pong
  • Super Breakout
  • Yar’s Revenge

 

 

As you can see, the games have received a facelift:

 

Asteroids:

image

 

Yar’s Revenge:

image

 

 

 

The project is a team up between Atari, CreateJS and Microsoft.  The Microsoft connection is Internet Explorer 10, which allows you to view the arcade ad free.  Atari is releasing an SDK for publishing on their arcade, the download and documentation page is currently down, so details are a bit sparse right now.  Their quick start pdf is currently available and gives a glimpse into the process. Presumably the arcade would work on a revenue sharing scheme, but that is just guesswork at the moment.

 

The library used to create all the games is called CreateJS, and is a bundling of HTML5 libraries including:

EaselJS – a HTML5 Canvas library with a Flash like API

TweenJS – a chainable tweening library

SoundJS – a HTML5 audio library

PreLoadJS – an asset loading and caching library

 

Plus the newly added tool, Zoe.  Zoe is a tool that takes SWF Flash animations and generates sprite sheets.

 

 

I look forward to looking in to Atari’s new API once their documentation page is back online.  Atari has also created a GitHub repository to support the project, but it is currently a little sparse.  In their own words:

 

Welcome to the Atari Arcade SDK.

This is the initial release of the SDK, which we hope to evolve over the next few weeks, adding
* more documentation
* examples
* updates

This repository contains
* Atari Arcade SDK classes in scripts/libs
* scripts necessary to run the SDK locally, in scripts/min
* API documentation and a quick start guide in docs/
* A test harness page to bootstrap and launch games

 

 

All told, a pretty cool project.  At the very least, check out the arcade, it’s a great deal of fun.

 

General


29. August 2012

 

As the title says, I have inserted a new book into the Unity book list, 3D Games Monetization with Unity and Leadbolt. I do however use the word book in the loosest terms possible, as it is in electronic format only and it weighs in at a mere 37 pages.

 

That said, it also weights in at a mere 3$, so there is that…

 

I will admit, before discovering this book, I had never heard of Leadbolt. they are a mobile ad provider in the vein of adMob, but with a world more options than simple banners.

 

 

Ads can be added at the application entry point, while running and at the exit point.

 

I personally HATE ads in mobile games, and gladly pay a premium for an ad free version ( which sadly most developers do not embrace, at least not on Android ), but perhaps ads in a different format will make a difference.

 

Anyways, if you are a Unity developer and are interested in monetization, you have a new book to check out.

 

It is my intention to keep the list as comprehensive as possible, so if I have missed a title or you are the author of an upcoming title, please let me know.

General


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List