Space RangerHD is on the App Store
I am extremely happy to announce my first game on the App Store for the iPad. I can’t wait to build some more. A big thank’s to cocos2d and it’s community.
Related Posts:
Strap me in
A twenty five year veteran of Snowboarding, BMX’n, Skating, Rollerblading etc. Strap me onto anything and i’m in heaven.
Unfortunately, this winter only saw four Snowboarding trips due to being kinda busy, so when a buddy from the gym suggested we make every Sunday morning a water ski morning, I was in. So far I have tried two skis, one ski and a wake board. As I suspected, like a duck to water. Next sunday is video time. I plan on trying a wake board back flip.
Water Skiing
Water Skiing
Related Posts:
Brooke Valentine’s Celebrity Girl Fight Game
If you made something that was used by over Ten Million people, would you/it be a success?
Over the last 10 years I have made countless Flash games for various agencies or independent artists. I do the job, get paid pittance and move on. Sometimes they barley rise to any notable or worthy existence and other’s get viral and do well for a while.
From time to time I perform various searches out of curiosity to see if anything still lives. Today I thought I would hunt down a game I made back in 2007 for Brooke Valentine called Celebrity Girlfight. It’s a boxing game where you battle against Paris Hilton, Jennifer Lopez, Lindsay Lohan, Lil Kim, Beyonce Knowles and Ciara. I was stunned to see “About 691,000 results” from Google. Clicking on the first result brings me to http://www.y8.com. It’s one of those Flash game sites that collects and offers them out for free but laden with advertisement. $$$
On this one site the game had been played 2,371,316 times with 110,043 positive votes (87.15%) vs. 16,224 negative. Over two million, wow!, I continue through one whole page of Google results, 10,000, 9,000, 20,000 plays, on and on and on. I bet if I was to go through more of the sites, the count would exceed ten million. “That’s awesome” I thought.
Now in most situations, the Flash programmer does not put his name on the game and remains anonymous, this is fine, I realize the selling point here is the artist, but I thought it would make an interesting blog post from the perspective of a developer. If I had 1¢ for every time it was played I could have made upwards of $100,000.
Food for thought.
Celebrity Girlfight
Related Posts:
Support all 4 or Both of each iPad orientations or no App Store for you!
It can be a little jarring getting rejected from the App Store after all your hard work and long hours of work. It turns out I misread the Human Interface guidelines, thanks to MattRix. You must support both variations of either orientation or all four.
Anyway, I burned another night coding and making new graphics and SpaceRanger HD is back up for review. I get the feeling this is going to be a long process, especially if they reject me one reason at a time. It takes like three weeks to get into review with each new submission of a binary.
Related Posts:
SpaceRangerHD for iPad
Space Ranger for iPad is a fun and simple space invaders type game designed for younger audiences. A request by my six year old son for something simple to use yet challenging to play.
Alien invaders to defeat, Comets to avoid, Huge explosions, Nukes, Crystals & Coins to collect, many levels, high score tracking etc.
All the things that get kids excited. Great graphics, sound effects and some music composed by me.
Enemies include:
- Blue Bad Guys, 1 hit, 1 point.
- Red Bad Guys, 5 hits “shield depletion”, 2 points.
- Green Bad Guys, 3 hits, 50 points.
- MotherShip, 4 Pulse cannons to beat then 20 hits to beat level, 140 points.
- Arrays of photon torpedoes.
- Power up pulse canons.
- Heat seeking missiles.
- Deadly comets passing by.
Space Ranger:
- 100 lives/health.
- Ten health points for every level completed.
- Shields that take ten hits or one pulse cannon hit. “endless supply of shields”
- Single lasers, Dual lasers after 1000 points and yes, triple lasers after 2000 points.
- 5 Nukes to get you out of a jam.
Objects include:
- Green crystals, 10 coins.
- Red crystals, 20 coins.
- Shield power ups.
Just move your finger around the screen and stay alive.
Have fun.
Screenshot
Screenshot
Screenshot
Related Posts:
Laser Touch Table.
Well, the lasers, projector, rear projection screen have all arrived. Just waiting on the 720n IR filter for the camera and it’s time to hook it all up. I can’t wait! During the dead air time I have been porting some of my Flash experiments to work with Touché
Stay tuned.
Related Posts:
iPhone Controlling Flash with TUIO and UDP help
I am in the middle of constructing a FTIR table, I am going with the laser approach after less than satisfactory results using Infra Red LED’s. It’s going well and I have had some success with Fiducial tracking using my infra red modded webcam cam, plexiglass and such. I had been building the apps in Quartz Composer but I am not too familiar with Quartz yet.
Until my lasers arrive I decided to try and get some output from my iPhone, after all it’s a great touch screen and switch to building apps in Flash, which I know better.
How do you get Camera or iPhone touch data out over the network to your MacBook and then have Flash read it??? Long story. If you are interested in going down this rabbit hole, check out these links.
http://reactivision.sourceforge.net/
http://www.tuio.org/?software
Georg Kaindl’s UDP Flash Bridge video
http://bubblebird.at/tuioflash/
http://pixelverse.org/iphone/oscemote/
And for lasers: http://aixiz.globat.com/
As I recently discovered, there are a few different methods of tracking and a bunch of lib’s on google code for such things.
After trying most of them and trying a couple of different table designs, I decided to go with http://gkaindl.com/software/udp-flashlc-bridge for UDP speed and http://bubblebird.at/tuioflash/tuio-as3-library/ for TUIO or Blob tracking in Flash and http://pixelverse.org/iphone/oscemote/ to track iPhone touches.
I find that sending the data over UDP using udp-flashlc-bridge is way faster and more efficient than XML- or TCP-based approaches. There is virtually no lag at all.
I modded my sea creature to work with a simple touch setup. Here is a crappy movie for now. I will do some nicer movies when I finish my table.
height="256" codebase='http://www.apple.com/qtactivex/qtplugin.cab'>
controller="true" loop="true" pluginspage='http://www.apple.com/quicktime/download/'>The next thing was to get some multi touch functionality. This one took some head scratching and it still needs refinement. I started thinking about moving photos around, rotating, scaling and such. I realized I needed special movieClip class I had created for my last commercial Flash project. A movieClip class that can be assigned a dynamic registration point and it’s globalToLocal coords work no matter how deeply nested it lives. This allows for the first finger touch to be set as the registration point for the photo and the next touch to be used as the operator for scaling and rotating. Here is another crappy movie.
height="256" codebase='http://www.apple.com/qtactivex/qtplugin.cab'>
controller="true" loop="true" pluginspage='http://www.apple.com/quicktime/download/'>Related Posts:
Audio Spectrum Analysis – Output to JSON File – Flash Tool
I have been unsuccessful so far in syncing animation drawn in Canvas using Processing js & audio played using the browser Audio tag with audio spectrum data I create from a ByteArray in Flash. It works in Flash due to the fact that the spectrum analysis and animation are executed together in an onEnterFrame event. The drawback to not having real time audio spectrum analysis from within the browser is the need to supply all the data to Processing js at initialization. It can be rather large and I have yet to perfect syncing the reading of the array with the current time of the audio. Some sort of progressive data stream and excellent timing system???
It may be I just have to wait until this feature is implemented into browsers. In the meantime, I thought I would post the source for the the Spectrum Analysis tool for greater minds than myself, wanting a quick way to get some data from their favorite tune and perhaps figure out a way to use it in a optimized fashion.
it’s very simple and outputs JSON with Left and Right channels to floating point numbers between 0 and 1. You can use it to make stuff move to the groove. It has a simple execution of this in the ui for you to see. Download the flash and php and throw it on your local server.
The process of accessing audio data from within the browser is quite beyond me, I really just want to see what I can create visually in Processing js and Canvas. Until it’s and easy to use API, I just have to keep looking for a way to get spectrum data quickly, hence this contraption. Have fun.
Download Source
This demo does not actually write the data for fear of abuse, but this is a sample of the output.
P.S. Carving Powder mp3 is one of my own creations. 
Related Posts:
Processing js, making svg fonts and your server setup.
I had some trouble getting fonts to work in Processing and then more trouble when I posted the files to my Blog. I finally got it all working so this might save you some time.
Stuff you need:
- A True Type font, e.g Arial.ttf
- Batik TTF to SVG Convertor
- Possibly need access to either your servers httpd.conf or mime.types for .svg mime-type
If you have all this, you are going to get it working.
First off, put the ttf font you want to convert in the directory where you extracted Batik & pull up a terminal and cd to it.
Type: java -jar ttf2svg.jar myFont.ttf -o myFont.svg
Replacing the myFont with your font. The result should be myFont.svg, great!!!. Copy it to your working Processing dir.
In your Processing setup function add the lines:
font = loadFont
var myFont = loadFont("myFont.svg");
textFont(myFont, 12);
Test it and see if you like it, if not repeat the process with another font. Go ahead and upload to your server and test live.
Looks good, ? yes : no;
For a quick test to see if your server supports svg head over to http://web-sniffer.net/ and type the path to your svg font in the box and hit submit. On return, look down to the HTTP Response Header table and look @ the content-type. If it says anything other than image/svg+xml or at least something with svg in it, you need to do this next step.
This is the part that got me and where you need access to the server config files I listed above. If you do not, you need to contact your sys admin or service provider and tell them you need support for svg files. If you do, edit either the httpd.conf or mime.types file “depends on your server setup” and add the line:
AddType image/svg+xml .svg
or
Content-Type: image/svg+xml
again it depends on what flavor of Apache or whatever you have. You can Google your setup and find out.
Restart your server and you should be good to go. Happy Processing!
Related Posts:
Processing js Twitter search visualizer
I jumped over from Raphael back to Processing again today. I have said it before, us Flash guys might get frustrated trying to pull off some simple stuff in either Processing or Raphael. Just keep in mind that they are young languages and the future looks bright.
Anyway, another attempt to do something here with Processing. It took a me minute to find an elegant way to get Twitter json data into processing without being too sloppy. The visualizer works perfectly in Safari and Chrome but it’s completely hosed in Firefox? Demo Here
Processing JS Twitter Visualizer
Related Posts:
Canvas, Audio, Raphael & Twitter
Last week I worked up an audio visualizer in Flash for a friend that yielded some nice results. The AS 3.0 ByteArray and computeSpectrum are powerful and have many potential uses. Doing the same thing with Canvas and JS requires a more round about method, doable, less accurate but more gratifying from a coding perspective.
My journey down this rabbit hole led me to almost doing this. http://vocamus.net/dave/?p=914 and here is some other interesting reading, https://bugzilla.mozilla.org/show_bug.cgi?id=532492. I got myself a copy of Minfield http://www.mozilla.org/projects/minefield/ and read up on how to build my own audio patched version with http://weblog.bocoup.com/javascript-fft-audio-sampling-in-firefox. Ok right. Still working on that one.
Needing more of a quick fix, I came up with two solutions. My first attempt at a solution was to build a Flash audio sampler that piped out the -1 to 1 floating point numbers to a file and use them in a JS array to manipulate coordinates of sprites on a Canvas. It worked quite well but the synchronization was off. I have not fixed this in that version but in the interim I got side tract and found another way to get some data. Quite simple really. Load up an mp3 into Audacity and go Analyze -> Time -> Beat Finder. Set the tolerance to about 55 and this will generate beat labels. Export those to a text file and then clean up the numbers to get an array of milliseconds for your JS setInterval();
Granted this is not spectrum data, but simpler beat info. In a way it works better for animating sprites because it’s cleaner. Spectrum data is very granular and works nice in widgets designed to show this, e.g. Graphs and Histogram visuals.
This test shows twitter searches on HTML5 Canvas and moves them around in time to the beat of the music loaded in an Audio tag. It’s not very exciting at this point but it’s got me thinking of some fun stuff to do. Every experiment like this is a step closer to moving away from flash. I still can’t settle on using Processing or Raphael though?
Related Posts:
See Creature
Took a day to extend the tentacle class to work on 360° and secondary motion from a parent node, but here it is, the first critter for my ocean. Thanks to Keith Peters book ActionScript 3 Animation, useful formulas section for getting me through this. It kicked my butt and fried my brain, but it’s so clear now. Onwards!
Related Posts:
Logarithmic Spirals
Spent last evening coding some circles & spirals in Flash. I love spirals!
A logarithmic spiral, equiangular spiral or growth spiral is a special kind of spiral curve which often appears in nature. The logarithmic spiral was first described by Descartes and later extensively investigated by Jakob Bernoulli, who called it Spira mirabilis, “the marvelous spiral”.
This kind of simple Math and lengthy tweaking of geometry animation is akin to whittling a piece of wood for me, whenever I have some free time and get the urge to write some code with no particular objective. It’s very relaxing.
It went through numerous iterations over the weekend and truly came to life when I started using Vectors and local3DToGlobal to convert the x,y,z coords to draw the 2D lines. Throwing in some random offsets from time to time helps keep it interesting. I used Math.sin and Math.cos a lot with random offsets to create smooth undulating motion that sometimes reminds me of jelly fish or some sort of under water plant waving around in the current. Other times it takes on a galaxy formation.
Watch it for 10 minutes or so and you will see some interesting spiral explosions. I can stare at it for 20-30 minutes.
Related Posts:
Web 2.0 Suicide Machine
Discovered this Web 2.0 Suicide Machine on Twitter. One day I might use it.
http://www.suicidemachine.org/
Related Posts:
HTML Canvas & Processing JS
I have been experimenting with the new HTML 5 Canvas and trying to get up to speed on the syntax. As a seasoned Actionscript 3 developer, I find JS easy to understand but difficult to write. I find myself thinking flash and trying to work a flash approach. Anyhow, I have tried canvas with js and canvas with Raphael and now canvas Processing JS.
They all have advantages and drawbacks. Processing js is giving me the most fun for now and I can’t wait till they finish implementing the entire set of methods, or at least what’s left that can be implemented into canvas.
I have read some eager articles saying that this can replace Flash and will be the end of flash. This may be so at some point in the future, but I can tell ya right now, it’s not even close. With no dedicated VM it craps out if you try anything with a couple hundred worthy sprites on screen. Also, objects are painted onto the canvas and no longer exist as objects you can have a pointer to. You basically have to paint the the canvas each time with your updates, example: Processing uses pushMatrix() and popMatrix() to store and restore stage translations. This is pissing me off and I am still trying to get my head around it. I just want to move stuff around dang it. On the other hand, when you paint, you can have an infinite amount of detail without worrying about overhead, like when you pipe MC’s into Bitmap object in Flash.
It’s all good though and a step in the right direction as far as I am concerned. No plugins, no 3rd party expensive IDE’s etc. It’s all free range and organic, yay. Can’t wait to start working in some div’s, copy etc and growing the graphics and UI for html pages.
As with all things animation and drawing, I like to start off with basic math and growing plants, trees, etc. Processing has no real shading, 3d or drop shadowing built in right now and it’s kind of refreshing going back to the old way of thinking where you have to fake it all.
Here is a screen shot of some alien plant thing I am writing. It takes about 20 mins to draw the entire 360 view. The depth and dimension is all fake like I said, drawing all the highlights, shadows etc in separate passes with slight offsets. Demo of my first processing attempt here.
Rendering Plants with Processing JS
