Constraint based design
Designers in Production I, please read. The first constraint should seem very familiar.
http://www.gamasutra.com/view/news/129770/Opinion_Constraintbased_design.php
Designers in Production I, please read. The first constraint should seem very familiar.
http://www.gamasutra.com/view/news/129770/Opinion_Constraintbased_design.php
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.
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-AS3 – Flash 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-Lua – Corona 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-Javascript – Unity 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();
}
}
}
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.
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:
-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
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.
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.
-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.
This is a much longer process, please review this post:
Air 2.6 and iOS using FlashDevelop and CS5 on Windows 7
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.
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>
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.
-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!!!
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 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