Red5 Authentication

May 7th, 2012 by Paul Gregoire

How to implement CRAM authentication in Red5

In this post we will setup a challenge-response authentication mechanism (CRAM) in a Red5 application using two different methods; the first one being very simple and the other utilizing the powerful Spring security libraries. A basic challenge-response process works like so:

  • Client requests a session
  • Server generates a unique, random ChallengeString (e.g. salt, guid) as well as a SessionID and sends both to client
  • Client gets UserID and Password from UI. Hashes the password once and call it PasswordHash. Then combines PasswordHash with the random string received from server in step 2, and hashes them together again, call this ResponseString
  • Client sends the server UserID, ResponseString and SessionID
  • Server looks up users stored PasswordHash based on UserID, and the original ChallengeString based on SessionID. Then computes the ResponseHash by hashing the PasswordHash and ChallengeString. If its equal to the ResponseString sent by user, then authentication succeeds.

Before we proceed further, it is assumed that you are somewhat familiar with Red5 applications and the Flex SDK. For those who would like a quick set of screencasts to get up-to-speed, we offer the following:

Implementation

Implementing a security mechanism is as simple as adding an application lifecycle listener to your application. Red5 supports a couple types of CRAM authentication via an available auth plugin. The first one implements the FMS authentication routine and the other one is a custom routine developed by the Red5 team. In this post we will use the Red5 routine. An ApplicationLifecycle class implementing the Red5 routine, may be found in the Red5 source repository; this code only validates against the password “test”. While this class would not be useful in production, it may certainly be used as a starting point for a real implementation. Red5AuthenticationHandler Source

To enable the usage of your Red5AuthenticationHandler class or any other ApplicationLifecycle type class for that matter, you must add it to the listeners in your Application’s appStart method.


@Override
public boolean appStart(IScope scope) {
    addListener((IApplication) applicationContext.getBean("authHandler"));
    return super.appStart(scope);
}

The reason for putting it in the appStart method is to ensure that the handler is added when your application starts and before it starts accepting connections. There is no other code to add to your application adapter at this point since the lifecycle methods will fire in your handler. Putting the authentication code within a lifecycle handler serves to keep the adapter code cleaner and less confusing. The authentication handler is defined in the red5-web.xml like so:


<bean id="authHandler" class="org.red5.demo.auth.Red5AuthenticationHandler" />

At this point, your application would require authentication before a connection would be allowed to proceed beyond “connect”. Entering any user name and the password of “test” or “password” (depends on class used in demo) would allow a client to be connected. As stated previously, this first “simple” implementation is not meant for production but is offered as a means to understand the mechanism at work.

Adding Spring Security

Once we add security layers such as Spring security, the application and authentication features become much more robust. The first thing we must do is to add the Spring Security namespace to our applications red5-web.xml.

Replace this node:


<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:lang="http://www.springframework.org/schema/lang"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
    http://www.springframework.org/schema/lang http://www.springframework.org/schema/lang/spring-lang-3.0.xsd">

With this node:


<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:security="http://www.springframework.org/schema/security"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
    http://www.springframework.org/schema/security http://www.springframework.org/schema/security/spring-security-3.0.3.xsd>

Add the authentication manager bean and configure it to use a plain text file. The users file contains our users, passwords, and their credentials.


<security:authentication-manager alias="authManager">
    <security:authentication-provider>
        <security:user-service properties="WEB-INF/classes/users.properties" />
    </security:authentication-provider>
</security:authentication-manager>

To demonstrate how users are handled, we will create three users: 1 admin, 1 regular user, and 1 user without a role. The plain text users file follows this pattern: username=password,grantedAuthority[,grantedAuthority][,enabled|disabled] A user can have more than one role specified; granted authority and role are synonymous. Below are the contents of our users file for this demo.


admin=password,ROLE_USER,ROLE_ADMIN,enabled
user1=pass1,ROLE_USER,enabled
user2=pass2,ROLE_NONE,enabled

In addition to the authentication handler, a authentication manager must be added when using Spring security. The manager should be added to the appStart method prior to adding the handler, as shown below.


@Override
public boolean appStart(IScope scope) {
    ProviderManager authManager = (ProviderManager) applicationContext.getBean("authManager");
    if (authManager.isEraseCredentialsAfterAuthentication()) {
        authManager.setEraseCredentialsAfterAuthentication(false);
    }
    addListener((IApplication) applicationContext.getBean("authHandler"));
    return super.appStart(scope);
}

The Spring security version of the authentication handler will replace the simple version in your red5-web.xml like so:


<bean id="authHandler" class="org.red5.demo.auth.Red5SpringAuthenticationHandler" />

Lastly, an aggregated user details service is used for storage and look ups of user details; this is essentially an interface to the internal in-memory datastore holding the user details or credentials. The user details may be configured to retrieve details from our local properties file, databases, ldap, or active directory. Our aggregated service is fairly simple as you can see below.


public UserDetails loadUserByUsername(String userName) throws UsernameNotFoundException {
    UserDetails userDetails = null;
    Map<String, UserDetailsService> userDetailsServiceMap = applicationContext.getBeansOfType(UserDetailsService.class);
    for (Entry<String, UserDetailsService> entry : userDetailsServiceMap.entrySet()) {
        UserDetailsService val = entry.getValue();
        if (val instanceof AggregatedUserDetailsService) {
            continue;
        }
        UserDetails tmp = val.loadUserByUsername(userName);
        if (tmp != null) {
            userDetails = tmp;
            break;
        }
    }
    if (userDetails == null) {
        throw new UsernameNotFoundException("User " + userName + " not found");
    }
    return userDetails;
}

It should be noted that Spring security makes use of an additional Spring framework library that is not included in Red5; the transaction library provides DAO and transaction implementations which do not require an external database or related dependencies. All the libraries required for the demo are included in the project zip file.

Client code

Creation of an authentication enabled client will require a single library not included in Flex / Flash builder called as3crypto. The AS3 cryptography library will provide the hashing functions nessasary for authentication in our demo. Download the as3crypto.swc from: http://code.google.com/p/as3crypto/ and place it in the “libs” folder of our client project.

The following functions will be needed in your client support authentication:

sendCredentials(evt:Event):void
sendCreds():void
computeSimpleSHA256(text:String):String
computeHMACSHA256(key:String, input:String):String
onStatus(evt:NetStatusEvent):void

The sendCreds method is called “later” from the sendCredentials method to prevent issues in the event thread.

These are the imports that need to be added before beginning.


    import com.hurlant.crypto.Crypto;
    import com.hurlant.crypto.hash.HMAC;
    import com.hurlant.crypto.hash.IHash;
    import com.hurlant.util.Base64;
    import com.hurlant.util.Hex;
    import flash.events.*;
    import flash.media.*;
    import flash.net.*;
    import flash.utils.ByteArray;
    import mx.utils.SHA256;

In your connect function you will need to determine which authentication mode to employ. The following block will show how to set up the connect call based on the type selected.


if (authMode === "none") {
    nc.connect(serverUrl.text, null);
} else if (authMode === "red5") {
    nc.connect(serverUrl.text + "?authmod=red5&user=" + user.text);
} else if (authMode === "adobe") {
    nc.connect(serverUrl.text + "?authmod=adobe&user=" + user.text);
}

You may notice that the type is simply a string in the url denoting which mode to use.

In your net status event handler, you will need to add handling for authentication routines. The following block demonstrates how to do so when an NetConnection.Connect.Rejected is received.


public function onStatus(evt:NetStatusEvent):void {
    if (evt.info !== '' || evt.info !== null) {
        var desc:String = evt.info.description;
        switch (evt.info.code) {
            case "NetConnection.Connect.Rejected":
                if (desc !== '') {
                    if (desc.indexOf("reason=badauth") > 0) {
                        // auth failed due to user/pass
                    } else if (desc.indexOf("code=403") > 0) {
                        // authentication is required
                        var tmp:String = String(evt.info.description);
                        tmp = tmp.slice(tmp.indexOf("authmod") + 8, tmp.indexOf("]") - 1);
                    } else {
                        try {
                            var parameters:Object = {};
                            var params:Array = desc.split('?')[1].split('&');
                            var length:int = params.length;
                            for (var i:int = 0, index:int = -1;i  0) {
                                    var key : String = kvPair.substring(0, index);
                                    var value : String = kvPair.substring(index + 1);
                                    parameters[key] = value;
                                }
                            }
                            if (parameters["reason"] == "needauth") {
                                challenge = parameters["challenge"];
                                sessionId = parameters["sessionid"];
                                // send the credentials
                                sendCredentials(null);
                            }
                        } catch(e:Error) {
                        }
                    }
                }
                break;
        }
    }
}

Once you are successfully connected, there are two methods in the demo code for testing access. The helloAdmin method will return a positive result if the authenticated user has the admin permission. In the helloUser method the routine is similar, but only the user permission is required. The included users file contains an admin user and two regular users, the second user is set up to have no permissions. The user without permissions may only connect application and call unprotected methods.

Protected methods in the application contain an isAuthorized check against preselected permissions.


public static boolean isAuthorized(String... roles) {
    Authentication auth = SecurityContextHolder.getContext().getAuthentication();
    if (auth != null && auth.isAuthenticated()) {
        UserDetails deets = (UserDetails) auth.getPrincipal();
        Collection granted = deets.getAuthorities();
        for (GrantedAuthority authority : granted) {
            if (Arrays.asList(roles).contains(authority.getAuthority())) {
                return true;
            }
        }
    }
    return false;
}

public String helloAdmin() {
    if (isAuthorized("ROLE_ADMIN")) {
        return "Hello Admin!";
    }
    return "You are not authorized";
}

If the user does not qualify, the call fails.

In a future post, I will explain how to add Java Authentication and Authorization Service (JAAS) to Red5.

Download
Project Source Client and server

, , , , , , , , , ,

Is It All Fun and Games?

May 2nd, 2012 by Elliott Mitchell

Tommy Refenes of Team Meat in Indie Game: The Movie

Think making games is all fun? Watch Indie Game: The Movie and you’ll think twice about those leisurely indie game developers sometimes thought of as slackers. Although game design and development can be quite enjoyable, it also can be high-stress and difficult work. Many indies crunch long hours to design and build new and innovative video games. Making independent games is a labor of love.

Indie Game: The Movie Directors Lisanne Pajot & James Swirsky Photo Credit: Ian MacCausland

Recently, I had the opportunity to watch Indie Game: The Movie at the historic Brattle Theater in Cambridge, MA. Adobe generously sponsored the film’s tour and gave away seats of Adobe’s full Master Collection of content creation tools. Local showings of the film were sold out to enthusiast audiences filled with local indies, AAA developers and their significant others. The award winning Canadian filmmakers Lisanne Pajot and James Swirsky were on location to meet and greet the ecstatic crowds. Lisanee and James also treated the  game developer populated audience to time for Q & A at the end of the film.

Indie Game: The Movie paints a compelling montage of independent game developers as struggling artistic creators in a manner never before witnessed by the video game consuming public. Whether you make games, play games, are close to anyone who makes games or wants to make games, you must see Indie Game: The Movie. It’s truly a successful film about, by and for underdogs.

, ,

GDC12 – Game Developer Conference 2012: a Post-Mortem

March 30th, 2012 by Elliott Mitchell

GDC12- AaaaaAAaaaAAAaaAAAAaAAAAA!!! (Force = Mass x Acceleration) by Dejoban Games and Owlchemy Labs, played by Oleg Pridiuk (Unity Technologies) as Ichiro Lambe (Dejobaan Games) and Deniz Opal (Cerebral Fix) watch - Photo Elliott Mitchell (Infrared5)

This year’s Game Developer Conference (GDC) 2012 was networking, networking and more networking.

Within a one mile proximity of the San Francisco Moscone Center, hordes of game developers and artists could be seen in the streets, cafes, bars, mall food courts, and hotel lobbies and heard talking shop, showing off their games, catching up with friends, debating the ethics of cloning social games from indies, shopping to find publishers, contractors and jobs. It was an intense meeting of the minds of people who make games in the streets of San Francisco.

Google Huddle chats, Google Groups email, shared Google Calendars and Twitter were all utilized very effectively to make the most of GDC. Multitudes of varied networking opportunities streamed in real-time through my iPhone 24/7. The level of my success at GDC was determined by how much networking I could possibly handle. With the help of my friends and the social/mobile networks,  success was at my fingertips.

In addition to the obsessive networking, there were many other valuable aspects of GDC. I’ll briefly highlight a few:

Jeff Ward’s Pre-GDC Board Game Night

GDC12- Elliott Mitchell (Infrared5), John Romero (Loot Drop), Brenda Garno Brathwaite (Loot Drop) & Elizabeth Sampat (Loot Drop) playing games at Jeff Ward's (Fire Hose Games) 3rd Annual Pre-GDC Board Game Night - Photo Drew Sikora

Jeff Ward (Fire Hose Games) knows how to get an amazing collection of game designers and developers together for a night playing board games. This was one of my favorite events of GDC. When else would I ever be able to play board games with John Romero (Loot Drop) and Brenda Garno Brathwaite (Loot Drop) while enjoying hors d’oeuvre and spirits? The crowd was a rich blend of artists, game developers, game designers, indies, students and superstars. There were so many new and classic games to play. I personally played Family Business and a really fun indie game prototype about operating a successful co-operative restaurant. Walking around after playing my games, I observed a host of other cool games being played and pitched. I’ll definitely be back for this event next year.

Independent Games Summit and Main Conference Sessions

GDC12 Ryan Creighton (Untold Entertainment) presenting Ponycorns: Catching Lightning in a Jar- Photo Elliott Mitchell (Infrared5)

Many session topics were super interesting but it wasn’t possible to attend all of them. Luckily, those with a GDC All-Access pass have access to the GDC Vault filled with recorded sessions. Here are a few sessions I saw which I found useful and interesting:

*Perhaps a Time of Miracles Was at Hand: The Business & Development of #Sworcery (Nathan Vella – Capy Games)

*The Pursuit of Indie Happiness: Making Great Games without Going Crazy (Aaron Isaksen – Indie Fund LLC)

*Ponycorns: Catching Lightning in a Jar (Ryan Creighton – Untold Entertainment)

*Light Probe Interpolation Using Tetrahedral Tessellations (Robert Cupisz – Unity Technologies)

Independent Game Festival Contestants on the Expo Floor

I played a bunch of the Independent Games Festival contestants’ games on the Expo floor

GDC12 - Alex Schwartz (Owlchemy Labs) playing Johann Sebastian Joust (Die Gute Fabrik) - Photo Elliott Mitchell (Infrared5)

before the festival winners are announced. There was a whole lot of innovation on display from this group. I particularly loved Johann Sebastian Joust (Die Gute Fabrik), a game without graphics, and Dear Esther (thechineseroom) which is stunning eye candy. Check out all the games here.

12th Annual Game Developer Choice Awards

I was super stoked to see two indies win big!

Superbrothers: Sword & Sorcery EP (Capy Games/Superbrothers) took the Best Handheld/Mobile Game award.

Johann Sebastian Joust (Die Gute Fabrik) won the Innovation Award.  Johann Sebastian Joust is worthy of it’s own blog post in the future.

EXPO FLOOR

* Unity booth – Cool tech from Unity and development venders partners showing off their wares
* Google Booth – Go Home Dinosaurs (Fire Hose Games) on Google Chrome
* Autodesk Booth (Maya and Mudbox)
* Indie Game Festival area ( All of it)

GDC12 - Chris Allen (Brass Monkey) and Andrew Kostuik (Brass Monkey) at the Unity Booth - Photo by Elliott Mitchell (Infrared5)

GDC PLAY

Lots of cool tech at the 1st Annual GDC Play. Our sister company, Brass Monkey, impressed onlookers with their Brass Monkey Controller for mobile devices and Play Brass Monkey web portal for both 2d and 3d games.

UNITY FTW!

Last but not least, the most useful and pleasurable highlight of GDC was face time with the Unity Technology engineers and management. Sure, I’m on email, Skype, Twitter and Facebook with these guys but nothing is like face to face time with this crew. Time and access to Unity’s founders, engineers, evangelists and management is worth the price of GDC admission. Can’t wait until Unite 2012 in Amsterdam and GDC13 next March!

, , , , , , , , , , ,

Android – Live Wallpaper part 2

March 22nd, 2012 by Paul Gregoire

Let’s make the star that we created in part 1 rotate in just a few simple steps. Although before we start, I’d like to note that we are technically rotating the entire canvas and not just the star itself; adding more than one star to the display will clearly expose this minor detail. I’ve done some research on the rotation of multiple individual items at-once, but I have not yet found a solution that fits; feel free to comment if you are aware of how to accomplish it.

The code modifications below are being in the LiveWallpaper.java source file, we are not using the only other source file GoldstarActivity.java at this time.

1. Add a variable where we keep track of the first frame drawn. This will prevent some calculations from being executed more than once per instance.



private boolean firstFrame = true;

2. To rotate the star, we will use degrees. In steps 2 and 3, two methods of generation are shown. In this section we use a float counter for degrees of rotation.



private float degree;

3. In this section we use a fixed array for degrees of rotation. To do so, we also must create an index counter and an array of 360 floats; again, its up-to-you as to which option to use.



private int index;
private float[] degree; //0-359

4. If using the array method, the onCreate method is modified to pre-fill our array when the application is first initialized.



public void onCreate(SurfaceHolder surfaceHolder) {
	super.onCreate(surfaceHolder);
	// initialize our array
	degree = new float[360];
	for (int i = 0; i < 360; i++) {
		degree[i] = i * 1f;
	}
	// load the image
	try {
		goldstar = SVGParser.getSVGFromResource(getResources(), R.raw.golden_star);
	} catch (Exception e) {
		e.printStackTrace();
	}
}

Note: I’ve tried both methods for degree cycling and they seem equally fast on my device.

4. Modify our drawing code from part 1. The code block is here for reference.

Before



private void drawFrame() {
	final SurfaceHolder holder = getSurfaceHolder();
	final Rect frame = holder.getSurfaceFrame();
	Canvas canvas = null;
	try {
		canvas = holder.lockCanvas();
		if (canvas != null) {
			canvas.drawColor(Color.BLACK);
			canvas.save();
			canvas.save(Canvas.MATRIX_SAVE_FLAG);
			goldstar.getPicture().draw(canvas);
			canvas.restore();
		}
	} finally {
		if (canvas != null) {
			holder.unlockCanvasAndPost(canvas);
		}
	}
	postDraw();
}

After (using float counter)



private void drawFrame() {
	final SurfaceHolder holder = getSurfaceHolder();
	Canvas canvas = null;
	try {
		canvas = holder.lockCanvas();
		if (canvas != null) {
			canvas.drawColor(Color.BLACK);
			canvas.save();
			Picture pic = goldstar.getPicture();
			if (firstFrame) {
				// get the dimensions
				int starWidth = pic.getWidth();
				int starHeight = pic.getHeight();
				// get the limits of the svg
				RectF limits = goldstar.getLimits();
				// calculate a rectangle to hold our svg
				float left = ((starWidth / 2) - limits.centerX());
				float top = ((starHeight / 2) - limits.centerY());
				float right = starWidth + left;
				float bottom = starHeight + top;
				// create the rect
				box = new RectF(left, top, right, bottom);
				// next frame will not be the first frame
				firstFrame = false;
			} else {
				// create a matrix
				Matrix matrix = new Matrix();
				// get the degrees to rotate
				degree++;
				if (degree > 359f) {
					degree = degree - 358f;
				}
				// rotate from the center of the star
				matrix.preRotate(degree, box.width() / 1.2f, box.height() / 1.2f);
				// replace the current matrix
				canvas.setMatrix(matrix);
			}
			canvas.drawPicture(pic, box);
			canvas.restore();
		}
	} finally {
		if (canvas != null) {
			holder.unlockCanvasAndPost(canvas);
		}
	}
	postDraw();
}

After (using float array)



private void drawFrame() {
	final SurfaceHolder holder = getSurfaceHolder();
	Canvas canvas = null;
	try {
		canvas = holder.lockCanvas();
		if (canvas != null) {
			canvas.drawColor(Color.BLACK);
			canvas.save();
			Picture pic = goldstar.getPicture();
			if (firstFrame) {
				// get the dimensions
				int starWidth = pic.getWidth();
				int starHeight = pic.getHeight();
				// get the limits of the svg
				RectF limits = goldstar.getLimits();
				// calculate a rectangle to hold our svg
				float left = ((starWidth / 2) - limits.centerX());
				float top = ((starHeight / 2) - limits.centerY());
				float right = starWidth + left;
				float bottom = starHeight + top;
				// create the rect
				box = new RectF(left, top, right, bottom);
				// next frame will not be the first frame
				firstFrame = false;
			} else {
				// create a matrix
				Matrix matrix = new Matrix();
				// rotate from the center of the star
				matrix.preRotate(degree[index], box.width() / 1.2f, box.height() / 1.2f);
				// dont let index exceed array length
				index = (index + 1) % 360;
				// replace the current matrix
				canvas.setMatrix(matrix);
			}
			canvas.drawPicture(pic, box);
			canvas.restore();
		}
	} finally {
		if (canvas != null) {
			holder.unlockCanvasAndPost(canvas);
		}
	}
	postDraw();
}

6. As an aside to what we done thus far, you can easily add another star with a couple extra lines like so:



// ref: RectF(float left, float top, float right, float bottom)
RectF box2 = new RectF(box.right, box.bottom, box.right + pic.getWidth(), box.bottom + pic.getHeight());
canvas.drawPicture(pic, box2);

The additional star will be down and to the right of the primary star. This star will not rotate per-se but instead will “orbit” the primary star.

7. Last step, build and run in the emulator. Right click on the goldstar project in Package Explorer and select Run As -> Android Application. If you haven’t created any AVD (virtual devices), you’ll be prompted to create one. Creation of an AVD is covered here.

When everything works, you’ll see this in the Eclipse console:

[2012-02-24 07:24:52 - goldstar] Uploading goldstar.apk onto device 'emulator-5554'
[2012-02-24 07:25:06 - goldstar] Installing goldstar.apk...
[2012-02-24 07:25:43 - goldstar] Success!
[2012-02-24 07:25:43 - goldstar] \goldstar\bin\goldstar.apk installed on device
[2012-02-24 07:25:43 - goldstar] Done!

I recorded the emulator running the apk in this screencast

Running on my Galaxy Nexus

In the sample code, I’ve refactored the original class alittle to make things more clear.
Project Source

End of part two.

, , , ,

Android – Live Wallpaper

March 17th, 2012 by Paul Gregoire

Herein I shall walk you through the steps for creating a live wallpaper in Android. Before we begin any Android development, the SDK and ADT plugin for Eclipse will need to be installed. The best installation guide is here; Disregard this if you already have the SDK and plugin installed. For this first part, we will simply display a graphic and in the followups we will do some animation. Without further ado, let’s get started.

1. The first step, is to create the new project
File -> New -> Android Project

We will call it “goldstar” and target Android 2.1 (API 7); this version of Android was the first to support Live Wallpapers.

2. Open up the AndroidManifest.xml file and add the nodes that we will need to support our application. Here is the manifest before our additions were
made:


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.infrared5.android.wallpaper"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk android:minSdkVersion="7" />
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".GoldstarActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

This is the “after” version, where we added our feature, permission, and service nodes:


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.infrared5.android.wallpaper"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk android:minSdkVersion="7" />
    <uses-feature
        android:name="android.software.live_wallpaper"
        android:required="true" >
    </uses-feature>
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <service
            android:enabled="true"
            android:label="@string/app_name"
            android:name="LiveWallpaper"
            android:permission="android.permission.BIND_WALLPAPER" >
            <intent-filter>
                <action android:name="android.service.wallpaper.WallpaperService" >
                </action>
            </intent-filter>
            <meta-data
                android:name="android.service.wallpaper"
                android:resource="@xml/metadata" >
            </meta-data>
        </service>
    </application>
</manifest>

3. Create a metadata file for our service. This is accomplished by making an xml directory within the res folder of the project. Create a new file named “metadata.xml” in this folder with these contents:



<wallpaper
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:thumbnail="@drawable/ic_launcher"
       android:description="@string/wallpaper_description"/>

4. Add a description for our application. Open the strings.xml file and add a string with a name of “wallpaper_description” and a value of “Goldstar Live”. You may actually use whatever value suits you, this one is just for the example.

5. Get the svg library and place it in the “libs” folder; this folder must be created manually, if it does not already exist in the project.
We are using svg-android library from http://code.google.com/p/svg-android/ for this example. This library was also used in the popular “Androidify” application.

6. Locate an SVG image file to use in our application, preferrably one that is not copyrighted. Remember that google is your friend

https://www.google.com/search?q=star%20svg&orq=star+filetype:+svg

Here’s a gold star on wikimedia that you can use: https://upload.wikimedia.org/wikipedia/commons/9/9c/Golden_star.svg

Once you have a suitable file, save it into the “raw” directory within the “res” directory of the project. Note that your resource may only contain this range of characters in its name: a-z0-9_.

7. Now for some code; create a new class in the wallpaper package and name it LiveWallpaper. Set the super class to android.service.wallpaper.WallpaperService and click Finish. Your new class should appear like this:



package com.infrared5.android.wallpaper;

import android.service.wallpaper.WallpaperService;

public class LiveWallpaper extends WallpaperService {

    @Override
    public Engine onCreateEngine() {
        return null;
    }

}

8. Create an internal class named StarEngine which extends Engine. The result of this should appear like so:



package com.infrared5.android.wallpaper;

import android.service.wallpaper.WallpaperService;

public class LiveWallpaper extends WallpaperService {

    @Override
    public Engine onCreateEngine() {
        return null;
    }

    private class StarEngine extends Engine {
    }

}

9. Right-click on StarEngine and select “Source -> Override/Implement Methods”. Now select the following methods:

onCreate
onDestroy
onVisibilityChanged
onSurfaceChanged

then click ok. This will create the method stubs that we are interested in.

10. Modify the onCreateEngine method to create a new instance of our engine.



/**
 * The frame rate we will attempt to achieve with the wallpaper
 */
public static final int FRAME_RATE = 12;

/**
 * The width of the wallpaper, as a percent of the height of the phone.
 */
public static final int SCENE_WIDTH = 150;

@Override
public Engine onCreateEngine() {
	return new StarEngine();
}

We have also added to static variables for the frame rate and scene width.

11. Load our svg asset. Create a local engine variable and modify the onCreate method like so:



private SVG goldstar;

public void onCreate(SurfaceHolder surfaceHolder) {
	super.onCreate(surfaceHolder);
	try {
		goldstar = SVGParser.getSVGFromResource(getResources(), R.raw.golden_star);
	} catch (Exception e) {
		e.printStackTrace();
	}
}

This will read the file resource and parse it to create an SVG image object.

12. Thread and handler must now be setup to take care of drawing on the canvas. We modify the engine like so:



private class StarEngine extends Engine {

    private final Handler handler = new Handler();
    private SVG goldstar;
    private boolean visible;
    private int width, height, maxWidth;

	private final Runnable drawer = new Runnable() {
		public void run() {
			drawFrame();
		}
	};

	public void onCreate(SurfaceHolder surfaceHolder) {
		super.onCreate(surfaceHolder);
		try {
			goldstar = SVGParser.getSVGFromResource(getResources(), R.raw.golden_star);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	@Override
	public void onDestroy() {
		super.onDestroy();
		handler.removeCallbacks(drawer);
	}

	@Override
	public void onVisibilityChanged(boolean visible) {
		this.visible = visible;
		if (visible) {
			postDraw();
		} else {
			handler.removeCallbacks(drawer);
		}
	}

	@Override
	public void onSurfaceChanged(SurfaceHolder holder, int format, int width, int height) {
		super.onSurfaceChanged(holder, format, width, height);
		maxWidth = Math.max(width, height) * SCENE_WIDTH / 100;
		this.width = width;
		this.height = height;
		postDraw();
	}

	/**
	 * Posts a draw event to the handler.
	 */
	private void postDraw() {
		handler.removeCallbacks(drawer);
		if (visible) {
			handler.postDelayed(drawer, 1000 / FRAME_RATE);
		}
	} 

	/*
	 * Draw one frame of the animation. This method gets called repeatedly
	 * by posting a delayed Runnable. You can do any drawing you want in
	 * here.
	 */
	private void drawFrame() {
	}

}

13. Drawing on the canvas. In our drawFrame method we will use our svg asset and draw it into view.



private void drawFrame() {
	final SurfaceHolder holder = getSurfaceHolder();
	final Rect frame = holder.getSurfaceFrame();
	Canvas canvas = null;
	try {
		canvas = holder.lockCanvas();
		if (canvas != null) {
			canvas.drawColor(Color.BLACK);
			canvas.save();
			canvas.save(Canvas.MATRIX_SAVE_FLAG);
			goldstar.getPicture().draw(canvas);
			canvas.restore();
		}
	} finally {
		if (canvas != null) {
			holder.unlockCanvasAndPost(canvas);
		}
	}
	postDraw();
}

14. Build and run in the emulator; you should see something like this:

15. Lastly, if you want to have nicer launcher images for your application there are free services to utilize such as this one:

http://android-ui-utils.googlecode.com/hg/asset-studio/dist/icons-launcher.html

Just upload your image and do a little configuration and you get a zip containing all the launcher images you need.

Project Source

End of part one; for part two we will cover animation.

, , ,

Our First International Intern – Frederick Jansen Speaks Up

March 16th, 2012 by admin

We are pleased to have Frederick Jansen start this month as our first international intern. To start off his internship with us, we had him sit down and answer a couple of questions. As a student at the Interactive Multimedia Design at Lessius Mechelen situated in the quaint country of Belgium, Frederick focuses on anything and everything related to multimedia. In his own words, “Imagine a mix of design, development and the odd course focusing on business side of things, and you will have a pretty accurate view of what I do on a day to day basis”. He will be spending the next three months with us and we look forward to working with him.

1. Why did you choose Infrared5 as the place to do your internship?
Infrared5 was really my first and only choice. I met Chris Allen at FITC in Amsterdam when he was showing off their highly impressive Star Wars game along with Brass Monkey. Though my internship would not take place in at least another year, I figured it would not hurt to inquire about the option of training there. We kept in touch and things just followed (with some minor detours) from there on out.

2. What are the key things you hope to take away from this experience?
According to the US Bureau of Educational & Cultural Affairs, my visa is meant for: “[...] promoting mutual understanding between the people of the United States and the people of other countries by educational and cultural exchanges.” That along with networking and hopefully having some of the ingenuity of people working here brush off on me.

3. What is your favorite programming language?
The first language that comes to mind is ActionScript 3.0 with the addition of Flex, for a couple of reasons. A major point is definitely that it is one of the few languages which give me a sense of mastery. I feel comfortable to work with these techs and I know what will be outputted to my screen before hitting the compile button. There is a great community with tons of reading material and code examples, which makes the language both accessible and more rich.
Even though it sometimes feels a bit dumbed down with regard to lower level programming and could definitely benefit from a faster JIT compiler, it is one of the few languages with which you can easily reach a massive audience in the way you envisioned.

4. What would be an ideal position for you post college?
Though my work experience is quite limited at the moment, I think consultancy would be where I want to end up. Working for various companies on challenging problems, which they cannot wrap their head around, keeps things fresh and you on your toes. Ideally, that would be combined with some traveling as an alternative to the 9-5 schedule.

5. What drove you to do a internship in the USA?
Most of my fellow students picked a local company for their internship, which to me seems convenient, safe and overall not very exciting. Belgium does have some creative agencies which stand out, but they all center around the Belgian (or even Flemish) market. When it comes to (web) development, the focus in general is even more on small projects for local businesses, working with a standard array of technologies.
I knew I wanted to go abroad for my internship and experience more, though it was not the USA in itself which grabbed my attention. The fact of the matter is just that this country happens to offer the most exciting opportunities when it comes to working with cutting edge technology. After all, where else do you see more start-ups than here?

6. How do you keep on top of new technology?
With technology, especially web related, evolving so fast, to me this is one of the hardest things to do. There are a couple of ways I try to keep track of it though.
The benefit of being a student and not having to worry about providing for a family gives me the opportunity to experiment to my heart’s content. For college projects, I try to explore the boundaries of what we are allowed to work with and what I can personally achieve. Much to the dismay of a lot of professors, there is probably a 50/50 chance that I fail miserably or end up with something I can proudly showcase. Either way, to me that is the best way to learn so I will keep it up for as long as I can.
Then there are perhaps some more “conventional” ways. Whenever I get the opportunity, I go to Adobe Usergroup Meetings and conferences to get a feel for what others are working on. This not only inspires me to experiment more myself, but also gives me an insight in new and upcoming technology. I work with a lot of unreleased software and technology and try to incorporate that in my daily workflow. Though not always ideal, it does provide me with the opportunity to always keep one step ahead of what is coming and influence the direction of technology I work with on a day to day basis.
Finally, I browse the programming section of reddit, read technology related news sites, subscribe to various blogs, follow people on twitter, receive a weekly newsletter with interesting projects people are working on and various other things.

Top 10 GDC Lists

March 1st, 2012 by Elliott Mitchell

GDC is approaching next week and I’ll be traveling to San Fransisco to participate in the epic game developer event. I’m psyched and here’s why:

TOP 10 GDC RELATED THINGS I’M EXCITED ABOUT

10  The Expo Floor
9    The History Of 3D Games exhibit
8    Experimental Gameplay Sessions
7    The Unity Party
6    Indie Game: The Movie screening & Panel
5    GDC Play
4    14th Annual Independent Games Festival Awards
3    Networking, Networking & Networking
2    Independent Game Summit
1    Unity Technology Engineers

TOP 10 GDC SESSIONS I’M LOOKING FORWARD TO

10  The Pursuit of Indie Happiness: Making Great Games without Going Crazy
9    Rapid, Iterative Prototyping Best Practices
8    Experimental Gameplay Sessions
7    Create New Genres (and Stop Wasting Your Life in the Clone Factories) [SOGS Design]
6    BURN THIS MOTHERFATHER! Game Dev Parents Rant
5    Bringing Large Scale Console Games to iOS Devices: A Technical Overview of The Bard’s Tale Adaptation
4    Light Probe Interpolation Using Tetrahedral Tessellations
3    Big Games in Small Packages: Lessons Learned In Bringing a Long-running PC MMO to Mobile
2    Art History for Game Devs: In Praise of Abstraction
1    Android Gaming on Tegra: The Future of Gaming is Now, and it’s on the Move! (Presented by NVIDIA)

If you’re going to be at GDC and want to talk shop with Infrared5 then please ping us! info (at) Infrared5 (dot) com

, ,

Simplify and Expedite Front-end Web Development

February 24th, 2012 by kyle Kellogg

Front-end web development projects can be difficult at times, but they don’t have to be. Every project is unique and each brings new and interesting challenges. These challenges are frequently presented by the very technologies we choose or must use on the aforementioned projects. Although using them is a great way to become more skilled, sometimes they can stand in the way of the project at hand. Mitigating these challenges through a process which can be repeated serves to not only improve the project and it’s schedule, but also your work.

Many, if not all, of the examples that follow are technologies or methodologies that members of Infrared5 have used before, but they’re in no way a comprehensive list of what is available or a recommendation as to what to use. Figuring out what works for you, your team, and the project is an important piece of this repeatable process.

The most important thing you can do is to plan ahead. That may seem obvious, but it can be easy to overlook doing it properly. Planning doesn’t have to be absolute and it doesn’t have to be too granular, but the more you plan for the more you can prepare for. Have you had things go wrong in the past? Make sure you account for similar situations in any new plans you create! You’ll never be able to perfectly account for everything, but you can account for most things.

Decide which technologies you’ll use. Remember, use the right (or best available) tool for the job. Think about what your browser, device, and screen size support will be like for the project. What javascript framework or toolkit, like jQuery or Dojo, will you use, if any? Will you be supporting HTML5 and CSS3? Will you be using any external libraries at all? All of these considerations will be important throughout the project and it is best to decide upon them early and stick with them in order to maximize your efficiency.

Start with something and build up from there. You can utilize HTML5 BoilerplateBootstrap, or whatever other starting point you feel comfortable with. You can use Initializr help set up an entire project, if that’s what makes you feel comfortable. Personally, I like to start with just the 1140 CSS Grid and jQuery.

Have your content and designs ready before you need them. Also make sure your designs are done based on whatever grid you’ll be using for your layout so that you don’t have to retrofit the design to the layout. Getting a running start on a project is all well and good, but breaking the up the development with blockades can make everything take longer than it has to.

You’ve got lots of technology at your disposal, so make it work for you. Your layout grid should serve as a flexible base upon which you can build without constraint. Lean on it’s support for your layout needs when you can, including responsive resizing. Use LESS or Scss/Sass to style faster and in a more organized way with less repetition. Break your javascript up into self-contained, self-cleaning, interconnected modules to help reduce the chances of memory leaks and unexpected errors. Document your javascript as you go so that everyone on the project can easily keep informed of what’s going on. Finally, use an IDE that helps you be more efficient. For me that’s Espresso, but for other developers at Infrared5 it’s Sublime Text 2.

I want to expand upon the modules I mentioned in the previous paragraph. These modules allow you to break functionality into smaller pieces, focus on them, and then combine as a whole to get the job done. Think of it as a loose implementation of feature-driven development. This allows your code to be more organized, more readable, kept in context, and focused on in a feature-by-feature way which, for me, helps development get done quicker.

Another piece of the development process I cannot stress enough is to use version control software and use it often. I prefer git, because Keith Peters turned us all on to this process which has helped reduce conflicts while working with a team. Use whatever you like though, because at the end of the day it’s all so that you don’t lose any work you’ve done.

Separate your development cycles so that your brain isn’t trying to do too many things at once. Do your development, then any and all enhancements, and then whatever bugs there are. This process may need to go through several iterations, becoming something like the spiral model.

Lastly, wrap it up by condensing and publishing a final product. Minify and concatenate your javascript and css, obfuscate if you must, in order to wring every last drop of speed you’re able to get out of the browser. Publish whatever documentation you’ve built up for client use, if applicable. Hand it off. See? Not so difficult after all.

Win for Boston Video Game Industry: PAX East Commits 10 years in Boston and $325K to Fund Mass DiGI

February 16th, 2012 by Elliott Mitchell

Video game industry leaders, higher education institutions and the press were all in for a big surprise when summoned to the Boston Convention and Exhibition Center (BCEC) for a big announcement Wednesday, February 15, 2012. Penny Arcade’s PAX East conference has committed to hold their annual video game conference for 10 more years in Boston at the BCEC. Last year, PAX East boasted 68,000 attendees over three days of digital gaming bliss. Numbers of future attendees may reach 100,000 translating into lots of revenue for local businesses and further establishing Boston as a central hub of game development.

PAX East also pledged $325K to the Massachusetts Digital Game Institute (Mass DiGI) over the next ten years to support and nurture a sustainable cycle of industry growth with the coordination between game studios, educational institutions and the government.

Among the speakers at the press conference were Massachusetts Lieutenant Governor Timothy Murray along with Tom Hopcroft (President and CEO at Mass Technology Leadership Council), Tim Lowe and Monty Sharma (Mass DiGI), Ken Surdan (VP Turbine) and a few other tech industry leaders.

See the WGBH news broadcast here.

Read about the announcement here.

, ,

HTML5 vs. Flash Games Infographic via onemorelevel

February 9th, 2012 by Mike Oldham

HTML5 vs Flash Games
Created by: One More Level

, , ,

« Previous Entries