Pixi.js, Haxe and browser’s fullpage cross-platform experiences

ADN 250 is a serious game around relationship marketing, like a Tupperware meeting. You must learn about different product by using them, then you can start selling theses products to different people and convince them to do the same extending your sellers network and making loads of money.

The principal requirement for the project was to make an accessible game, without installation, accessible both on computer and device : a web game.

 

What kind of technologies would you use if you were asked to build a full-page 2D game, available on the web by PCs and smartphones ?

Here at Da Viking Code we chooses the famous Pixi.js !
This HTML5 javascript library using WebGL enable us to easily build 2D game on canvas.

Unfortunately the JavaScript language isn’t the most comfortable one to use, mistake can be made because of the lack of type and compilation. If you feel comfortable with JavaScript that’s okay, but at Da Viking Code we prefer the strictly-typed and compiled Haxe language for our Web projects :). Using Pixi.s with Haxe isn’t hard, we use the well maintained Adireddy’s Haxe extern for Pixi.js !
Continue reading Pixi.js, Haxe and browser’s fullpage cross-platform experiences

Run pngquant via a NativeProcess: C#, Unity & AS3/AIR

After our Unity runtime SpriteSheets generator, it is a good idea to optimize the generated pngs files.

pngquant is a command-line utility and a library for lossy compression of PNG images. The conversion reduces file sizes significantly (often as much as 70%) and preserves full alpha transparency. In other words this is a must have tool if you’re working with many pngs!

I used many times pngquant directly from the command line, but depending your project, you might need to run it directly inside your application! I didn’t find example for doing this, and it was way harder than I thought due to my lack of knowledge with batch and shell scripts! So here we go:

We use custom batch file (for Windows) and shell script (for Mac OS X) for launching pngquant. It will take the path to pngs to compress and overwrite them.

OS X:

#!/bin/sh
#!/usr/bin/env bash
#$ -N $2

DIR="$( cd "$( dirname "$0" )" && pwd )"

(cd "$DIR" && ./pngquant -f --ext .png "$1"/*.png)

Windows:

cd %~dp0
pngquant -f --ext .png "%~1"/*.png

Now a C# example for calling thoses scripts, note it works fine with Unity too:

System.Diagnostics.Process process = new  System.Diagnostics.Process();

string exec = "";
if (Application.platform == RuntimePlatform.WindowsEditor || Application.platform == RuntimePlatform.WindowsPlayer)
	exec = "pngquant-windows.cmd";
else if (Application.platform == RuntimePlatform.OSXEditor || Application.platform == RuntimePlatform.OSXPlayer)
	exec = "pngquant-osx";
else
	throw new Exception("Platform not supported");

process.StartInfo.FileName = Application.dataPath + "/../../" + exec;
process.StartInfo.Arguments = Application.dataPath + "/../../png-to-compress";

// if your path have blank spaces use:
//process.StartInfo.Arguments = "\"" + Application.dataPath + "/../../png compress\"";

process.StartInfo.CreateNoWindow = true;
process.StartInfo.UseShellExecute = false;

process.Start();

And finally an example with AS3 for AIR:

var process:NativeProcess = new NativeProcess();

var startupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
var file:File = File.applicationDirectory;

var exec:String = "";
if (Capabilities.os.indexOf("Windows") >= 0)
	exec = "pngquant-windows.cmd";
else if (Capabilities.os.indexOf("Mac") >= 0)
	exec = "pngquant-osx";
else
	throw new Error("doesn't work on " + Capabilities.os + " operating system");

file.nativePath = file.nativePath + "/../" + exec;
startupInfo.executable = file;

var processArgs:Vector.<String> = new Vector.<String>();
processArgs[0] = File.applicationDirectory.nativePath + "/../png-to-compress";
startupInfo.arguments = processArgs;

process.start(startupInfo);

Be sure to have a look to PngQuantNativeProcess’s git repository to be up to date!

Unity – generate SpriteSheets at runtime!

Unity and plugins provide many great ways to build Sprite Sheets. However they’re used directly into Unity Editor or with an external software which is perfect in many case, but none provide the ability to generate SpriteSheets at runtime. So we made our own library.

The goal of a sprite sheet is to pack as many sub-textures as possible in one big texture. So the first thing to do was a packing algorithm. Fortunately we remembered the one made and open-sourced by Ville Koskela in AS3, so we started with a Unity C# port.
Click here to view the Unity rectangle packing example running in your browser in WebGL!

Once the packing algorithm done, we worked on a cache system so the generated sprite sheets are written and saved on disk for a future loading. The generator process won’t be needed anymore unless you increase your cache version!

Give a try to UnityRuntimeSpriteSheetsGenerator!

Unity – sprite packing

Best practices with Unity have always been an hidden gem. Most precisely concerning the Resources folder. Hopefully things are changing with Unity’s best practices guide! And things are simple concerning the Resources folder: just don’t use it!

Managing 2D Sprites in Unity is simple if you have a static scene: just put every sprite needed on your screen and you’re almost done. Obviously you should package them in Spritesheets. The easy way to do it is via Unity’ Sprite Packer tool. But what to do if you need to load Sprites at runtime? How to access a Sprite if it’s not linked directly on a GameObject or a Prefab and without using the Resources folder?

Create a ScriptableObject! They are the best way to store informations within Unity. Here is an Editor Script for generating ScriptableObjects with a list of Sprites for each Packing Tag mentioned:

using UnityEngine;
#if UNITY_EDITOR
using UnityEditor;
#endif
using System;
using System.Collections;
using System.Collections.Generic;
using System.IO;

[Serializable]
public class SpritesData:ScriptableObject {

	[SerializeField]
	public Sprite[] sprites;

	static public string assetDirPath = "RuntimeSprites/SpritesData/";
	static public string assetPath = "Assets/RuntimeSprites/SpritesData/{0}.asset";

	#if UNITY_EDITOR
	[MenuItem("Data/Create Sprites Data")]
	static void CreateSpritesData() {
		string dirPath = Application.dataPath + "/" +  assetDirPath;

		if (!System.IO.Directory.Exists(dirPath))
			System.IO.Directory.CreateDirectory(@dirPath);

		SpritesData data = ScriptableObject.CreateInstance<SpritesData>();

		List<Sprite> spritesList = new List<Sprite>();

		string[] anims = AssetDatabase.FindAssets("t:Sprite", new string[] {"Assets/Sprites"});

		string currentTag = "";

		foreach (string anim in anims) {

			string path = AssetDatabase.GUIDToAssetPath(anim);

			TextureImporter ti = TextureImporter.GetAtPath(path) as TextureImporter;

			if (ti.spritePackingTag != currentTag) {

				if (data && currentTag != "") {

					data.sprites = spritesList.ToArray();
					AssetDatabase.CreateAsset(data, string.Format(assetPath, currentTag));
				}

				data = ScriptableObject.CreateInstance<SpritesData>();
				spritesList = new List<Sprite>();

				currentTag = ti.spritePackingTag;
			}

			Sprite sprite = AssetDatabase.LoadAssetAtPath<Sprite>(path);

			spritesList.Add(sprite);
		}

		data.sprites = spritesList.ToArray();
		AssetDatabase.CreateAsset(data, string.Format(assetPath, currentTag));
	}
	#endif
}

Now that you have all your SpritesData you just have to create a MonoBehaviour with a public SpritesData[] spritesDatas; property, then you will have access to all your sprites! The good things is while a sprite isn’t displayed on Screen it’s not in memory.

Cheers!

Unity – manage mailbox

For a project, unfortunately canceled, we needed to be able to manage a mailbox with Unity. Including IMAP protocol.

Unity uses C#, so we were pretty confident it wouldn’t be an issue since there are so many .NET libraries around there. But none of them worked fine with Unity: some of them worked in Unity Editor, some were also able to work on Android, but none could pass Unity’s IL2CPP compilation for Xcode & iOS. We searched for solution on Unity’s forums but we find nothing, there was no other choice than testing all the libraries around the web!

EAGetMail was the only one to fail on Xcode due to IL2CPP compilation, all the other libraries failed way before (due to Unity Mono version). So we raised an issue to Unity’s IL2CPP team.

During that time, we needed to be sure the project would be feasible. So we looked for alternative: a PHP solution for IMAP called Fetch combined with an AMF library for Unity. Not really a good replacement, but it worked.

Luckily Unity fixed the issue some weeks later! If you have to manage mailboxes with Unity, be sure to give a try to EAGetMail before banging your head against the wall! 😉

Memovox, AIR still on top

Two years ago, we coded a beautiful app named Geophysic for the famous luxary watches brand Jaeger-LeCoultre. Made with the cross-platform technology Adobe AIR, and Starling & Feathers, we finished the dev diary asking which other technologies could have done the app, but didn’t get a strong answer.
Today, with Pixelfordinner agency, we’re proud to share this new app named Wake-Up Memovox, for the same client, available for iOS and Android.
It was developed with the same technology, and if it’s obvious the game development market moves in favour of Unity, AIR is still rocking for making apps! Let’s see the development part!

Continue reading Memovox, AIR still on top

Making a Unity game for the HTC Vive and the Oculus Gear

We currently faced the challenge of making a VR game (under NDA, so we can’t mention the game or even provide screenshots or code) for the HTC Vive (Steam VR) and the Gear VR (OculusSamsung Galaxy). In this post, we will present both headsets, the challenge they represent from a game design point of view, and also some developer feedbacks!
Continue reading Making a Unity game for the HTC Vive and the Oculus Gear

Go Mark’s Run

Hi folks, we’re proud to share with you our latest game that we worked on as developers: Go Mark’s Run, for iOS and Android. Change Agency was in charge of producing a game for the French hypermarket chain E.Leclerc to promote their own brand Marque Repère. James Bang was the studio behind the game & art design.

The game mixes platformer and runner game genres. Through short levels, you have to collect as many coins as possible and stay alive. After A Blind Legend, a big Unity game made without graphics, it was cool to have fancy things on screen!

Continue reading Go Mark’s Run

Heineken, The Sub® in WebGL

After our tech presentation app for Heineken’s The Sub® used as part of interactive elements in a popup store in Paris, running on ipad Air 2s, we were asked to build a browser version which would now be accessible to the public, as part of The Sub®’s web site.

The color scheme would change, yet all functionality would be kept.

Now, Unity does export for webgl yet the bulky webgl build and unexpected results we had when first trying the webgl export out, led us to decide on using Three.js and building it back from scratch. It would be lighter and we’d have a bit more finer control over the result.

We would be writing this in Haxe. No specific reason to this, except for a cleaner code… and to code faster… even though we would not be targeting another language.
Continue reading Heineken, The Sub® in WebGL

Attending Reasons to in Brighton!

sdr

What an exciting time to be in Brighton those days! With Thomas, it’s the first time we’re attending Reasons to previously known as Flash on the Beach!

On the menu: Carlos Ulloa, Mario Klingemann, Rob Bateman, Joshua Davis, Jared Tarbell, Stacey Mulcahy… yeah we mostly got there for code and we’re not disappointed at all! Continue reading Attending Reasons to in Brighton!