Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

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 ,

28. August 2012

 

Cocos2D-html is an HTML5 port of the popular Cocos2d-x library, enabling you to make games that run in a browser, using a syntax that works virtually unchanged on a number of platforms.Cocos2dHTML5

 

You can download the source as a zip right here.

 

The project is also available on GitHub.

 

 

In anticipation of this release, the Cocos2D tutorials on this site where all updated to the new API, so should work unchanged.  There were some pretty major changes in the API as detailed here.

 

 

Finally, there have been a series of Cocos2D related books published that could prove helpful in puzzling things out. ( Of course, start with the tutorials! Winking smile ).

News

28. August 2012

 

This guide will run through the process of creating and building an Android host for use with Moai.

 

There are a number of installs and configurations you need to perform before you can build Moai for Android.  If you need details on any of the individual steps, click the link to jump to more details on that part of the process.  If you think it seems like quite a list… you are right, it is!  Fortunately you only have to do it once!

 

In order to build the Android host you need to:

 

Install and configure all of those items before continuing these instructions.  Seriously, you need everything above, so install and perform every configuration step or the following is guaranteed to fail!

 

 

Creating an Android Host

 

Open a cygwin terminal

Change directory to where you want to install the Moai source code.  I am going to install to C:\, which under cygwin is /cygdrive/c, so:

cd /cygdrive/c

Now run git to download the newest Moai source code, enter:

git clone git://github.com/moai/moai-dev.git

Let git run, it will download and clone the most recent source code to the folder c:\moai-dev.  Make a cup of coffee, it might take a few minutes.

 

 

Now we want to build our Android host, to do so, change into the folder c:\moai-dev\ant\ and run the script make-host.sh.  You pass in the name of the  package you want created in Java form ( reverse url, com.yourdomain.yourappname ) like so:

cd /cygdrive/c/moai-dev/ant

./make-host.sh –p com.gamefromscratch.moai

It should run and complete without issue.  Should being the operative word, in my case I was actually getting a permission denied error on one the library files.  A quick chmod 644 permission setting on the file fixed that issue.  Once the script completes, it will have created a directory in the /ant folder called untitled-host.

 

 

In untitled-host, locate and edit the file settings-local.sh, locate the the line android_sdk_root and edit it to match the path to your android sdk ( note, SDK not NDK! ), mine looks like:

android_sdk_root=”/cygdrive/c/android-sdk”

Then scroll down to the section src_dirs and set it to the directory containing your Lua project, such as:

src_dirs=( "cygdrive/c/luasource" )

Save your changes and exit.

 

Now optionally edit settings-global.sh.  Most importantly, locate the line:

requires=( "miscellaneous" "adcolony" "google-billing" "chartboost" "crittercism" "facebook" "google-push" "tapjoy" )

and change it to just:

requires=( "miscellaneous"  )

 

Unless you specifically need to include those libraries.  Tapjoy and Facebook are currently broken though, so if you include them, you will have trouble later!  You can optionally set your app name, version number, icon names, etc at this point. (Actually, this part seems to be ignored anyways…)

Save settings-global.sh and exit.

 

Not type ( in the untitled-host folder ) :

./run-host.sh

 

So long as you didn’t get any errors, your project should now have been created. 

 

Loading and running the generated project in Eclipse

 

Fire up Eclipse.

Select the menu File->Import…

Select General->Existing Project into Workspace, like so:

image

 

Click Next.

 

Check Select root directory and navigate to c:\moai-dev\ant\untitled-host\build\project like so:

image

 

Click Finish.

 

As you can see, even though you said you didn’t want them, Facebook and Tapjoy are still included, and are still broken.

 

image

 

Right click and choose Delete for each one.

 

Once those are removed ( or you can optionally find and fix the external libraries they depend on instead of removing them. ), your application should build just fine.  Make sure your Android device is plugged in and has debugging enabled ( in the settings on the device ).  Right click your project, select Run As… Android Application

image

 

A few seconds later, your application should appear on your device.

 

The actual lua code for your application will be located in the lua folder within the assets folder.

 

image

 

Happy Androiding!

 

 

If these instructions don’t work for you, do not be surprised.

 

1- Moai is under active development

2- The whole Java build system is horrifically complex and exceedingly fragile

3- Eclipse is the devil

 

 

 

Installing Cygwin

 

Cygwin is a unix like environment for windows and is critical to successfully building the Android hosts with Moai.  First thing download setup.exe from here (direct link to exe).  Your browser may fight you a bit about downloading an executable directly.

 

Once downloaded, run setup.exe, saying yes to any security prompts.

 

Select Download from Internet.

image

Click Next.

 

Pick whatever directory you want to install to, I kept the default of c:\Cygwin. 

image

Click Next.

 

Next you need to pick the directory to download to, again I just went with the defaults:

image

Click Next.

 

Defaults again unless there is something odd about your internet connection:

image

Click Next.

 

Select the download location that is closest to you, then click Next:

image

 

 

The downloader will run for a few seconds.  You may get a prompt saying this is the first time you have installed Cygwin and be sure to check the documentation.  Simply click OK.  At this point, you will get a window asking you to select the packages to install, like so:

image

 

 

Install the devel selection of tools, simply click the icon beside the Devel tree and it will switch from Default to Install, like this:

 

NOTE: *** You don’t actually need the entire Devel tree and this process will take a really long time to complete ( two hours on my laptop ) if you select the full Devel tree.  However, selecting all developer tools guarantees that you get everything required as part of the build process.  You can experiment with selecting individual packages if you wish.

image

Click Next.

 

You will most likely get a prompt about resolving dependencies, like so:

 

image

This is normal, click Next.

 

 

Setup will now download all of the packages you have selected:

 

image

 

 

This process is not… short.  Have patience, lots of patience.  Have you considered picking up a new hobby?  Knitting perhaps?  Go for it!  You have plenty of time.

 

Cygwin installation is now complete.

 

image

 

 

You can always run setup.exe again if you want to enable or remove features in the future.

 

Cygwin is now configured.

 

Installing the Android NDK

 

Head over to the Android NDK page and download the appropriate file. I went with android-ndk-r8b-windows.zip, but this will obviously change in version name over time.

 

Once downloaded, open the archive and extract the folder inside to somewhere on your drive.  In my case the folder was called android-ndk-r8b and I extracted it to c:\.  After it is extracted, rename it to android-ndk.  There are 17,000+ files in that archive, so expect it to take a while to extract.

 

Later in the process, Moai will need to know the location of the NDK, specifically ndk-build.  The easiest way to make this file discoverable is to add it to your path environment variable, this can be configured via the command line:

 

setx PATH ‘%PATH;c:\android-ndk’.

 

The NDK is now installed.

 

 

Installing the Java JDK and set the JAVA_HOME environment variable

 

You need to have a Java JDK installed and configured.

 

Download the JDK from this website.  Chose whichever version you want, it shouldn’t matter.  There are some annoyances with using Android tools with Java 7 ( 1.7 ), so Java 6 may be the best choice for now.

 

Once downloaded and installed, be sure that JAVA_HOME is set to your install directory.  Mine for example is c:\Program Files\Java\jdk1.7.0_03

 

Once again, you can set this environment variable from the command line using the setx command.

 

 

 

Installing Apache Ant

 

Go here to the Apache Ant download page and download the zip file.  I selected http://apache.mirror.nexicom.net//ant/binaries/apache-ant-1.8.4-bin.zip.

Open the archive and extract the folder (apache-ant-1.8.4 in this case ) to a location on your drive.  I went with c:\ again.

 

Set the environment variable ANT_HOME and point it to this directory ( c:\apache-ant-1.8.4 in my case), you can do this from the command prompt with the command:

setx ANT_HOME c:\apache-ant-1.8.4

Like so:

image

 

Ant is now configured.

 

 

Installing the Android SDK, Eclipse and the Android Plugins

 

You can download the Android SDK here, which full instructions here.  Be sure to install at least the Android 2.2 ( Platform 10 ) platform as described here.

 

The first half of this guide covers the installation process for installing Eclipse.  You need to install Eclipse as well as the Google ADT to complete this process. Eclipse 3.7 or 3.8 will work, although might require a minor change during the install process.

Programming , ,

27. August 2012

 

A game isn’t much of a game if you can’t interact with it.  In this tutorial we are going to look at how to handle touch and click events with Moai.  This is however going to present a bit of a problem, you are going to need to have an Android or iOS device in order to test the touch events.  The code will still run in the Windows host, but you won’t be able to test touch events.

 

Speaking of the code:

 

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)

function handleClickOrTouch(x,y)
    prop:setLoc(layer:wndToWorld(x,y))
end


if MOAIInputMgr.device.pointer then
    MOAIInputMgr.device.mouseLeft:setCallback(
        function(isMouseDown)
            if(isMouseDown) then
                handleClickOrTouch(MOAIInputMgr.device.pointer:getLoc())
            end
            -- Do nothing on mouseUp
        end
    )
    MOAIInputMgr.device.mouseRight:setCallback(
        function(isMouseDown)
            if(isMouseDown) then
                MOAIGfxDevice.setClearColor(math.random(0,1),math.random(0,1),math.random(0,1),1)
            end
        end
    )
else
-- If it isn't a mouse, its a touch screen... or some really weird device.
    MOAIInputMgr.device.touch:setCallback (

        function ( eventType, idx, x, y, tapCount )
            if (tapCount > 1) then
                MOAIGfxDevice.setClearColor(math.random(0,1),math.random(0,1),math.random(0,1),1)
            elseif eventType == MOAITouchSensor.TOUCH_DOWN then
                handleClickOrTouch(x,y)
            end
        end
    )
end

 

Once again, we are building on our earlier example; and once again, we will not be covering those parts we already covered.  We are changing the functionality slightly.  Now in the event of a touch or left click, we are repositioning the happy sprite to the location the user clicked.  If the user double taps or right clicks, we change the background color… what can I say, not everyone loves white or hot pink. 

 

Here is the program in action:

image

 

 

Let’s take a look at the new code, starting from the top:

 

function handleClickOrTouch(x,y)
    prop:setLoc(layer:wndToWorld(x,y))
end

 

Touch and click events are two different events, but we want to share the same code when they happen, in this case a method called handleClickOrTouch.  It takes the x and y locations of the mouse cursor or finger that the touch/click happened at.  In the event of a touch, we simply want to move the happy face prop to the location of the touch.  First though, we need to translate the touch coordinates from window space to world space, which is accomplished with layer:wndToWorld().

 

if MOAIInputMgr.device.pointer then

MOAITInputMgr is a global object containing the various input devices that host platform supports.  Keep in mind, if your host does not support a given device, it will not exist in MOAIInputManager.  That is exactly what we are checking here, to see if device.pointer has been defined, which will only be defined if the host supports a mouse. 

 

The following types of input are *potentially* supported:

  • MOAIButtonSensor
  • MOAICompassSensor
  • MOAIJoystickSensor
  • MOAIKeyboardSensor
  • MOAILocationSensor
  • MOAIMotionSensor
  • MOAIPointerSensor
  • MOAITouchSensor
  • MOAIWheelSensor

 

The official documentation for MOAIInputMgr is completely empty, so if you are looking for more details, the course file MOAIInputMgr.cpp is perhaps your best source for more information.

 

Once we have determined that the host device does in fact support a mouse pointer, we run the following code:

    MOAIInputMgr.device.mouseLeft:setCallback(
        function(isMouseDown)
            if(isMouseDown) then
                handleClickOrTouch(MOAIInputMgr.device.pointer:getLoc())
            end
            -- Do nothing on mouseUp
        end
    )
    MOAIInputMgr.device.mouseRight:setCallback(
        function(isMouseDown)
            if(isMouseDown) then
                MOAIGfxDevice.setClearColor(math.random(0,1),math.random(0,1),math.random(0,1),1)
            end
        end
    )

 

First we register a callback function for mouseLeft, which takes a single bool parameter, indicating if the mouse button was pressed or released.  In the event that the mouse button was indeed pressed, we call the handleClickOrTouch function, passing in the mouse coordinates be obtain by calling MOAIInputMgr.device.pointer:getLoc().  We simply do nothing in the event of a mouse up, um.. event.

 

Next we register another callback, this time for the right mouse button.  In this case if the right mouse button was indeed pressed, we change the background to a random color.

 

So, that is what happens if we detected a mouse; if we don’t detect a mouse, we instead register a touch event handlers:

 

else
-- If it isn't a mouse, its a touch screen... or some really weird device.
    MOAIInputMgr.device.touch:setCallback (

        function ( eventType, idx, x, y, tapCount )
            if (tapCount > 1) then
                MOAIGfxDevice.setClearColor(math.random(0,1),math.random(0,1),math.random(0,1),1)
            elseif eventType == MOAITouchSensor.TOUCH_DOWN then
                handleClickOrTouch(x,y)
            end
        end
    )
end

 

While the left/rightButton event callbacks were passed a simple bool, the touch callback get’s a fair bit more information.  The following values are passed to the touch callback function:

eventType: The type of event that occurred. The value will be either TOUCH_UP or TOUCH_DOWN

idx: It touch index in case multiple simultaneous touches occurred

x: The x coordinates of where the touch happened on screen

y: The y coordinates of where the touch happened on screen

tapCount: the number of taps that occurred 

 

In the event that multiple taps occurred, we change the window background color to a random RGB value.  Otherwise, it was a single touch, in which case we call handleClicksOrTouch passing in the x,y value passed in the touch callback.

 

The parameters for the touch callback function were also not documented, so it took a little bit of digging to divine exactly what they are.  If you are interested, the actual code for setting the parameters is in the method MOAITouchSensor::HandleEvent, in the file MOAITouchSensor.cpp

 

Now we have the ability to be all touchy feely, we are yet another step further along in our adventures in Moai-land.  Stay tuned for the next exciting episode where we journey even deeper!  There may even be a prize at the end(*)!!!

 

 

(*) – the prize is a lie.

 

 

 

 

 

Programming , ,

Month List

Popular Comments

Itch.io Launch Refinery
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


14. May 2016

 

Itch.io have just launched Refinery, a set of tools for early access games.  In their own words:image

itch.io refinery is a customizable toolset made for developers to distribute their unfinished games, build a real community and gain useful feedback. We think early access is broken, and this is our solution.

 

From the itch.io blog, some details of the tools included in refinery.

Limited keys

Developers can now limit the total number of keys available for purchase. This makes for a great way to slowly roll our a game for testing or to target those who are most interested in your game (i.e. from a mailing list.) 

Exclusive content (rewards)

Exclusive content is a way of providing a limited quantity reward to a buyer if they purchase your project at a specific price point. Adding a reward to a project is a great way to give exclusive perks to early buyers.

Command-line tools and delta patches

With our command-line tools, developers can push a new build directly to itch.io right from your build script. Additionally, only the changed files will be uploaded by you and downloaded by players to create delta patches, so no more complete re-downloads just for patching. This is great for players of in-development games that are being patched constantly.

Selling physical goods

Another use case for rewards is selling physical goods along with digital content. In this example you might create a reward above the minimum price that comes with t-shirt. As more shirts become available you can boost the quantity. Developers can specify on the reward that you’d like to collect a shipping address. Developers can also add a custom field to get the size of the shirt.

Restricted community access

Developers can now create a message board only available to the people who have bought your game. This is a private hub where creators can be open about your game’s development and gain useful feedback from your players.

GameDev News

blog comments powered by Disqus

Month List

Popular Comments