Constraint based design

By , February 24, 2012 10:54 am

Designers in Production I, please read. The first constraint should seem very familiar.
http://www.gamasutra.com/view/news/129770/Opinion_Constraintbased_design.php

Snake Game

By , October 17, 2011 1:28 am




Here’s the source code: SnakeGame.zip
It currently has 22 parts, wow. Just uncomment the sample you what to test. At some point I would like to add some new features to make this game unique.

Spawn and remove objects/enemies (AS3 for Flash, Lua for Corona, Javascript for Unity)

By , October 10, 2011 3:21 am

This is the first post in a series of new samples  that will show similar code translated into multiple engines, typically Flash(as3), Corona(Lua) and Unity(javascript), maybe even UDK too. This first example just spawns 10 squares(enemies) on the screen. If you click one, the square disappears. If you click the background, they all disappear. If you click the background when there are no squares, the squares will respawn.

Flash-AS3Flash source files

//create a table(array) to store the enemies
var enemyTable:Array = [];

//this function gets passed an enemy to remove
function removeEnemy(enemy){
	//loop through the table
	for( var i=0; i< enemyTable.length; i++ ){
		//find the item in the table that is the same as the enemy
		if(enemyTable[i] == enemy){
			//remove the enemy from the table
			enemyTable.splice(i,1);
			//remove the enemy
			removeChild(enemy);
			//break out of the loop
			break;
		}
	}
}

//listener that gets attached to each enemy
function touchListener(event:MouseEvent){
	//
	//
	//find out which enemy we are talking about
	var enemy = event.currentTarget;
	//need to remove event listener, it's  not automatically removed
	enemy.removeEventListener( MouseEvent.CLICK, touchListener);
	removeEnemy(enemy);
	//
	//
	//
}

//spawnEnemies function
function spawnEnemies(){
	//loop 10 times
	for(var count:int = 0; count<10; count++){
		//draw 10 rectangles at random locations
		var enemy = new Sprite();
		enemy.graphics.beginFill(0x8C8C8C);
		enemy.graphics.lineStyle(3, 0xB4B4B4);
		enemy.graphics.drawRect(0, 0, 50, 50);
		enemy.x = Math.random()*stage.stageWidth;
		enemy.y = Math.random()*stage.stageHeight;
		addChild(enemy);
		//add a touch event to each enemy
		enemy.addEventListener( MouseEvent.CLICK, touchListener )
		//add the enemy to the enemyTable
		enemyTable.push(enemy);
	}
}

//function called when you click the green bg
function removeAll( event:MouseEvent ){
	//
	//
	//if all the enemies are gone, respawn them
	if(enemyTable.length == 0){
		spawnEnemies();
	}else{
		//loop through the table
		for(var i:int=0;i<enemyTable.length; i++){
			//remove each enemy
			removeChild(enemyTable[i]);
		}
		//set the enemyTable to empty
		enemyTable = [];
	}
	//
}

//draw the bg
var bg:Sprite = new Sprite();
bg.graphics.beginFill(0x99ff00);
bg.graphics.drawRect(0,0,stage.stageWidth, stage.stageHeight);
addChild(bg);
bg.addEventListener( MouseEvent.CLICK, removeAll )
//spawn the enmies
spawnEnemies();

Corona-LuaCorona source files

--create a table(array) to store the enemies
local enemyTable = {};

--this function gets passed an enemy to remove
local function removeEnemy(enemy)
	--loop through the table
	for i=1,#enemyTable do
			--find the item in the table that is the same as the enemy
			if(enemyTable[i] == enemy) then
				--remove the enemy from the table
				table.remove (enemyTable,i )
				--remove the enemy
				enemy:removeSelf();
				--break out of the loop
				break;
			end
	end
end

--listener that gets attached to each enemy
local function touchListener( event  )
	--only do remove the enemy when the touch begins
	if(event.phase=="began") then
		--find out which enemy we are talking about
		local enemy = event.target;
			--don't need to remove event listener, it's automatically removed when you remove the object
			--enemy:removeEventListener( "touch", touchListener );
			removeEnemy(enemy);
			--by returning true it prevents the touch event from continuing to the bg
			 return true
	end
end

--spawnEnemies function
local function spawnEnemies()
	--loop 10 times
	for count = 1,10 do
		--draw 10 rectangles at random locations
		local enemy = display.newRect(math.random(display.contentWidth), math.random(display.contentHeight), 50, 50)
		enemy.strokeWidth = 3;
		enemy:setFillColor(140, 140, 140);
		enemy:setStrokeColor(180, 180, 180);
		--add a touch event to each enemy
		enemy:addEventListener( "touch", touchListener )
		--add the enemy to the enemyTable
		enemyTable[count] = enemy;
	end
end

--function called when you click the green bg
local function removeAll( event )
	--only remove all when the touch first starts
	if(event.phase=="began") then
		--if all the enemies are gone, respawn them
		if(#enemyTable == 0) then
			spawnEnemies();
		else
			--loop through the table
			for i=1,#enemyTable do
				--remove each enemy
				enemyTable[i]:removeSelf();
			end
			--set the enemyTable to empty
			enemyTable = {};
		end
	end
end

--draw the bg
local bg = display.newRect(0,0,display.contentWidth, display.contentHeight)
bg:setFillColor(153, 255, 0)
bg:addEventListener( "touch", removeAll )
--spawn the enmies
spawnEnemies();

Unity-JavascriptUnity source files

//create a table(array) to store the enemies
var enemyTable:Array = [];
var enemyPreFab:GameObject;

//this function gets passed an enemy to remove
function removeEnemy(enemy){
	print("removeEnemy()");
	print(enemy);
	//loop through the table
	for( var i=0; i< enemyTable.length; i++ ){
		//find the item in the table that is the same as the enemy
		if(enemyTable[i] == enemy){
			//remove the enemy from the table
			enemyTable.splice(i,1);
			//remove the enemy
			Destroy(enemy);
			//break out of the loop
			break;
		}
	}
}

//spawnEnemies function
function spawnEnemies(){
	//loop 10 times
	for(var count:int = 0; count<10; count++){
		//draw 10 rectangles at random locations
		var position:Vector3 = Vector3(Random.Range(0, 16), Random.Range(0, 10), 0);
		var enemy = Instantiate(enemyPreFab, position, Quaternion());
		//add the enemy to the enemyTable
		enemyTable.push(enemy);
	}

}

//function called when you click the green bg
function removeAll(){
	//
	//
	//if all the enemies are gone, respawn them
	if(enemyTable.length == 0){
		spawnEnemies();
	}else{
		//loop through the table
		for(var i:int=0;i<enemyTable.length; i++){
			//remove each enemy
			Destroy(enemyTable[i]);
		}
		//set the enemyTable to empty
		enemyTable = [];
	}
	//
}

function Start(){
	//spawn the enmies
	spawnEnemies();
}
function Update () {
	if(Input.GetMouseButtonUp(0)){
		var ray = Camera.main.ScreenPointToRay (Input.mousePosition);
		var hit:RaycastHit;
		if (Physics.Raycast (ray, hit,100)) {
		    removeEnemy(hit.transform.gameObject);
		}else{
			removeAll();

		}
	}
}

Unity and Flash : a sneak peek.

By , September 5, 2011 10:25 pm


http://blogs.unity3d.com/2011/09/01/unity-and-flash-a-sneak-peek/

Link to maze

By , June 29, 2011 11:12 am

http://blog.flashvt.com/wp-content/uploads/2011/06/givMaze.zip

Air 2.7 SDK download Available; Works with Flash CS5.5

By , June 14, 2011 9:16 pm

http://blogs.adobe.com/flashplayer/2011/06/adobe-air-2-7-now-available-ios-apps-4x-faster.html

Performance boost for iOS rendering with CPU is huge. I am still trying to figure out when it is best to use CPU rendering compared to GPU rendering. I just published an app that is predominantly a scrolling list with some images and with Air2.6, I had to use GPU rendering, CPU rendering would just crawl.

Republishing in Flash CS5.5 with Air2.7 and CPU rendering and the scrolling list flies on my iPhone 3gs.

So you basically have two options if you want to start packaging your apps with Air2.7. You can use ADT that comes with the Air2.7 SDK or if you have CS5.5, you can just replace the AIR2.6 folder contents with the Air2.7 SDK.

Regardless, you first need to download the Air2.7 SDK:
http://www.adobe.com/products/air/sdk/

If you have Flash CS5.5, you can replace the files in C:\Program Files (x86)\Adobe\Adobe Flash CS5.5\AIR2.6 with the Air2.7. Just to be safe, I renamed Air2.6 to Air2.6bu and renamed the Air2,7 to Air2.6. It worked!

If you are still CS5, you can follow the exact same directions that are in my tutorial below, just when you are Setting up ADT, make sure you point the path to the new Air2.7 sdk folder.

DocumentClass

By , June 1, 2011 8:04 pm

Document Class Example from Advanced Seminar.

http://blog.flashvt.com/wp-content/uploads/2011/06/DocumentClassSampleCS5.zip

Flash to Android/iPhone workshop

By , April 6, 2011 10:32 am

Thanks to everyone who cam to the workshop last night. I would say there were at least 25 people there. Here are the notes from the talk:

Setting up Air 2.6

-Download AIR 2.6 SDK (software development kit):
http://www.adobe.com/products/air/sdk/
-unzip the sdk
-I created a folder named SDKs and put the Air 2.6 SDK here: C:\SDKs\AdobeAIRSDK

Setting up ADT (Air Developer Tool)

AIR Developer Tool (ADT) has replaced Packager for iPhone (PFI), and the PFI utility is now integrated nto ADT. You can now use ADT to package AIR files, native desktop installers, Android applications, and iOS ap.
-Let’s get ADT working, 1st we need to set up some Environment Variables
-1. Click Start Menu> right click computer>properties.
-2. Click Advanced System Settings.
-3. Click Environmental Variables.
-4. Scroll through system variables until you find: Path, select it.
-5. Click edit.
-6. Add ;C:\SDKs\AdobeAIRSDK\bin to the end of the variable value. (please note the semicolon in front of the path)

-Click OK.
-Click OK.
-Click OK.

-Let’s try ADT(Air Developer Tool)
-open up the command prompt, start menu>type cmd in search field, press ENTER.
-type: adt -version in cmd, press ENTER

You will probably get an error like this unless the Environment Variable for Java has been set:
‘java’ is not recognized as an internal or external command, operable program or batch file.
-Close the CMD by typing exit and then press ENTER.

If you received the error, you will need to make sure you have java installed and then set the Path variable just like we did for the Air2.6 SDK.
Find java on your computer, mine was located here:
C:\Program Files (x86)\Java\jre6\bin
-add a semicolon in front of it: ;C:\Program Files (x86)\Java\jre6\bin
-Now repeat the steps we did for setting the path of the Air2.6 SDK.

Let’s try ADT again.
-open up the CMD prompt
-type adt -version
-press ENTER.
It should output: 2.6.0.19120
Yeah! ADT is working.

Create the app

Open up Flash and create a new Actionscript 3.0 flash file.
-save it to the root folder for this project, I saved as HelloWorld.fla
-add some content, I just typed HelloWorld, and then test.
-you should now have a HelloWorld.swf in your projects root folder.

Create the self-signing certificate-Android

-We are going to create a new flash file to create a signing certificate.
-Instead of creating a Actionscript 3.0 flash file, choose Adobe Air 2 as the type.
-1. once it’s open, in the document properties, Click edit next to Air 2.5 (or 2.0) settings
-2. Click the signature tab
-3. Click the Create tab.
-4. Enter your info, make up a password and remember it. You will you the pw in your adt command.
-5. Click Browse and select your projects root folder.

-Click OK.
-Click OK.
- wait a second…a dialogue box will pop up that says Self-signed certificate has been created.
-Click OK.
-Click OK.
-You will now have a file, mycert.p12 in your projects root folder.
-Close the Air 2 flash file. It does not need to be saved. We just needed it to create mycert.p12.

Create the signing certificate-iPhone

This is a much longer process, please review this post:
Air 2.6 and iOS using FlashDevelop and CS5 on Windows 7

Create the descriptor file.

You can use any editing program that supports xml files, I used FlashDevelop. You could use Notepad.
The files are basically the same between Android and iPhone.
-The file should be saved as an xml file.
-A typical naming convention for this file is yourappname-app.xml, ex: helloworld-app.xml
-save this file to your projects root folder.

Descriptor files

Android

<?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/2.6" minimumPatchLevel="0">
	<id>com.flashVT.HelloWorld</id>
	<name>Hello World</name>
	<filename>HelloWorld</filename>
	<versionNumber>1.0.0</versionNumber>
	<initialWindow>
		<content>HelloWorld.swf</content>
		<aspectRatio>portrait</aspectRatio>
		<autoOrients>false</autoOrients>
		<fullScreen>true</fullScreen>
		<renderMode>gpu</renderMode>
	</initialWindow>
	<supportedProfiles>mobileDevice</supportedProfiles>
	<android>
		<manifestAdditions>
			<![CDATA[
				<manifest android:installLocation="auto"/>
			]]>
		</manifestAdditions>
	</android>
	<icon>
		<image36x36>icons/36x36icon.png</image36x36>
		<image48x48>icons/48x48icon.png</image48x48>
		<image72x72>icons/72x72icon.png</image72x72>
	</icon>
</application>

iPhone

<?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/2.6" minimumPatchLevel="0">
	<id>com.flashvt.HelloWorld</id>
	<name>HelloWorld</name>
	<versionNumber>1.0.0</versionNumber>
	<filename>HelloWorld</filename>
	<initialWindow>
		<content>HelloWorld.swf</content>
		<title>HelloWorld</title>
		<fullScreen>false</fullScreen>
		<renderMode>gpu</renderMode>
	</initialWindow>
	<supportedProfiles>mobileDevice</supportedProfiles>
	<icon>
		<image29x29>icons/29x29icon.png</image29x29>
		<image57x57>icons/57x57icon.png</image57x57>
		<image512x512>icons/512x512icon.png</image512x512>
	</icon>
</application>

Create your icons

Use your favorite image creation tool to create some icons for the app. In my sample, I saved them all, except for the Default.png (iphone only) to an icons folder in my projects root folder. Please not the paths in the descriptor xml files as well as in the ADT command line below.

Android

Iphone

The Default.png is for the load screen and is only used for the iphone.

Building your app with ADT command line

-replace the items in bold with your names.
-All files should be in the same root folder, you can have sub folders ex:icons/72x72icon.png
-you will need the following files in your root folder:
-Android: HelloWorld.swf, helloworld-app.xml, mycert.p12, any icons that you created.
-iPhone: HelloWorld.swf, helloworld-app.xml, mycert.p12, helloworld.mobileprovision, any icons that you created, Default.png.
-We want to open command prompt from your projects root folder.
-Browse to your projects folder through windows.
-shift/Right click in the folder and select open command window here

Command for Android:
adt -package -target apk -storetype pkcs12 -keystore signingCert.p12 -storepass yourPassword NameOfApk.apk Descriptor-app.xml app.swf icons/36x36icon.png icons/48x48icon.png icons/72x72icon.png

This will create NameOfApk.apk in your projects root folder. It might take a few seconds to compile. You can now install this on any Android phone. Please note, you will also need to install Air2.6 on your phone which is available for free in the Android Market.
-Also, please note, there is a setting on your Android phone to allow Developer apps. I believe it is under general settings. Please check this.
That’s it for android!!!

Command for iPhone:
adt -package -target ipa-test -storetype pkcs12 -keystore iphone_dev.p12 -storepass 12345 -provisioning-profile flashVT.mobileprovision HelloWorld.ipa iPhone-app.xml HelloWorld.swf finalIcons/icon_512x512.png finalIcons/icon_29x29.png finalIcons/icon_57x57.png Default.png

This will create HelloWorld.ipa in your project’s root folder. This process may take 2-3 minutes to process and the command prompt will not give any feedback until it is complete. Be patient.
You can now install this in the iPhone/iPod/iPad that is associated with the IUID number.
-To install, connect your device to your computer, make sure all your apps are synced in iTunes.our
-Click file>add file to library and choose your mobileprovision file.
-Click file> add file to library and choose helloworld.ipa.
-sync your phone
That’s it for iPhone!!!

Tile-based Platformer Part I

By , April 5, 2011 2:24 am


I have been meaning to create a tile-based platformer engine in AS3 forever. Since we were covering tile-based platformers this week in Game Tech I, I thought I would start my engine. This engine is derived from the classic TonyPa tutorials: AS1 version circa 2003 and AS3 version. I have made some different choices in how I am coding the engine, put please read the TonyPa’s tutorials to understand the overall concept.

I will try to add more features in the near future, but this is a start. All source files are located here. Part I has 9 versions that build up to the version you are seeing above. (use the arrow keys to move your blue square).

AVID Chainless Challenge Launches in app store

By , March 29, 2011 10:11 am

AVID Chainless challenge is a game developed by Tag New Media and JDK for Avid. Avid, whose parent company is Sram, is one of the worlds leading bike component makers. We started this project in mid January and the app was accepted into the iTunes store on March 25th. The entire project took just over 2 months.

Here’s a link to the game in the app store. (the game is very hard, but you will get better if you practice) We are hoping to do some more versions of this game in the future.

The game was created using FlashDevelop, AS3 and Flash CS5.

Panorama Theme by Themocracy