spaceport.io Takes some of the Pain Out of HTML5 Game Development By Helping you convert AS3 to HTML5
Wow, it's getting hard to keep track of all the exciting new APIs, SDKs and platforms emerging for HTML5 game development!
We just took a look at Ben Savage's spaceport.io project today, and it looks really interesting. There is both an SDK that helps you to convert AS3 games to native mobile apps, and one that helps you build apps from scratch.
The key here is that the software helps with converting AS3 games to native mobiles games, providing better performance than Flash running on those platforms.
If you are interested in how it works, there is a slide presentation that shows you all the gory details.
Here are some highlights:
- Includes a native renderer built in C++ and openGL for iOS and Android (basically they recreated the Flash player on those platforms)
- Can take a binary .swf and automatically convert it in seconds
- Includes 4 levels of code hiding/obfuscation to that makes the code at least as hard to decipher as a .swf
- The software is free, but there is a licensing fee if your game generates more than $10k in revenue.
- Code can be automatically updated from their servers, allowing for automatic updates around the app store model.
- The conversion is *not* automatic, so some rejiggering of the code might be necessary, but it gets you most of the way there in converting AS3 to HTML5
- Games use Spaceport's native formats, so after conversion you are tied to their service
- Since this is a "service" getting clients to accept using it might be a difficult task.
- The project does not appear finished yet, but you can get started now converting AS3 to JavaScript
- We are not sure if they use the Canvas or not, but from this story it appears that Ben appreciates it, however we could only see CSS mentioned in the docs.
We plan to test it out with an AS3 game soon.
Italian Review of HTML5 Canvas : fantastico!
Here is a review of our book HTML5 Canvas in Italian. The English translation appears to be pretty positive, however, the Italian looks better...so here is a quote in Italian:
L'esempio che viene discusso e realizzato è veramente fantastico: un video puzzle. Si tratta di un video che viene diviso in righe e colonne e le cui celle vengono mescolate casualmente: quello che l'utente vedrà è il video (ovviamente in fase di riproduzione) diviso in rettangolini disordinati tra loro e dovrà, cliccandoci col mouse, scambiarli di posto e ordinarli per poter vedere il video integrale.
I'm not sure exactly what he is saying here, but I think Fantastico is now my personal favorite word...ever.
HTML5 Puzzle Game : Color Drop : Game Demo + AS3 vs. JavaScript Code Comparison
Color Drop HTML5
Color Drop was game that was featured in our book The Essential guide To Flash Games. Earlier this month I decided to to see how hard it would be to tackle a similar game for HTML5 Canvas for the next version of HTML5 Canvas for O'Reilly. Color Drop HTML5 Canvas is the result.
Same as the other demos from earlier this week, this has only really been tested in Google chrome, so your mileage may vary with other browsers.
What interested me the most about the process of converting this game from AS3 to JavaScript was the ease of reusing the existing AS3 algorithms in JavaScript. In the code snippets below you can see the process.
The function findLikeColoredBlocks() is designed to find a list of blocks that are the same color and adjacent to the block that was clicked by the player. There is a full discussion of the code in The Essential guide To Flash Games.
When I sat down to rewrite the code in JavaScript, I found the process very very easy. In fact, the only thing I needed to do was to remove the type definitions on variables.
JavaScript Code
function findLikeColoredBlocks(blockToMatch) {
var blocksToCheck= new Array();
var blocksMatched = new Array();
var blocksTested = new Array();
var rowList = [-1, 0, 1,-1,1,-1,0,1];
var colList = [-1,-1,-1, 0,0, 1,1,1];
var colorToMatch = blockToMatch.blockColor;
blocksToCheck.push(blockToMatch);
while(blocksToCheck.length > 0) {
tempBlock = blocksToCheck.pop();
if (tempBlock.blockColor == colorToMatch) {
tempBlock.selected = true;
blocksMatched.push(tempBlock);
}
var tempBlock2;
for (var i = 0;i < rowList.length;i++) {
if ((tempBlock.row + rowList[i]) >= 0 && (tempBlock.row + rowList[i]) < BLOCK_ROWS && (tempBlock.col + colList[i]) >= 0 && (tempBlock.col + colList[i]) < BLOCK_COLS ) {
var tr = tempBlock.row + rowList[i];
var tc = tempBlock.col + colList[i];
tempBlock2 = board[tr][tc];
if (tempBlock2.blockColor == colorToMatch && blocksToCheck.indexOf(tempBlock2) == -1 && blocksTested.indexOf(tempBlock2) == -1) {
blocksToCheck.push(tempBlock2);
}
}
}
blocksTested.push(tempBlock);
}
return blocksMatched;
}
AS3 Code
public function findLikeColoredBlocks(blockToMatch):Array {
var blocksToCheck:Array = new Array();
var blocksMatched:Array = new Array();
var blocksTested:Array = new Array();
var rowList:Array = [-1, 0, 1,-1,1,-1,0,1];
var colList:Array = [-1,-1,-1, 0,0, 1,1,1];
var colorToMatch = blockToMatch.blockColor;
blocksToCheck.push(blockToMatch);
while(blocksToCheck.length > 0) {
tempBlock = blocksToCheck.pop();
if (tempBlock.blockColor == colorToMatch) {
blocksMatched.push(tempBlock);
tempBlock.makeBlockClicked();
}
var tempBlock2:Block;
for (var i:int = 0;i < rowList.length;i++) {
if ((tempBlock.row + rowList[i]) >= 0 && (tempBlock.row + rowList[i]) < BLOCK_ROWS && (tempBlock.col + colList[i]) >= 0 && (tempBlock.col + colList[i]) < BLOCK_COLS ) {
var tr:int = tempBlock.row + rowList[i];
var tc:int = tempBlock.col + colList[i];
tempBlock2 = board[tr][tc];
if (tempBlock2.blockColor == colorToMatch && blocksToCheck.indexOf(tempBlock2) == -1 && blocksTested.indexOf(tempBlock2) == -1) {
blocksToCheck.push(tempBlock2);
}
}
}
blocksTested.push(tempBlock);
}
return blocksMatched;
}
While the display code for making HTML Canvas games is quite different between AS3 and JavaScript, the logical algorithms for iterations, loops, multi-dimensional arrays, etc. are pretty much the same. This is good news for people who have libraries of AS2 and AS3 algorithms that need to be converted to HTML5/JavaScript will have a fairly easy time accomplishing the task.
HTML5 Canvas Christmas Tree Drag And Drop Demo And Tutorial
Here is another demo from DevCon5. Yesterday we showed you an action game, now we will show you something completely different. A Drag And Drop style decoration application of the type we produced by the dozens ta Mattel throughout the first 10 years of this century. We present to you: Christmas Tree Decorator. Music by Mike Peters/The Children Of The Revolution. This was developed for Google chrome and has not been optimized for other browsers yet.
One of the most interesting thing about this demo (to us) is that we display the mouse button pointer when rolling over things that can be clicked and dragged. This might not sound like much, but since the HTML5 Canvas does not contain any DOM objects, we had to achieve the effect with our own custom code. Here is how we did it:
- First, in JavaScript we listen for Canvas “mousemove” event:
[cc lang="javascript"]
theCanvas.addEventListener("mousemove",onMouseMove, false)
[/cc]
- Next we test to see if the mouse if over any of the bulbs. We keep all bulbs in single array named clickBlocks to make this easy.
[cc lang="javascript"']
function onMouseMove(event) {
var mouseX;
var mouseY;
if ( event.layerX || event.layerX == 0) { // Firefox
mouseX = event.layerX ;
mouseY = event.layerY;
} else if (event.offsetX || event.offsetX == 0) { // Opera
mouseX = event.offsetX;
mouseY = event.offsetY;
}
for (var i =0; i < blocks.length; i++) {
if (blocks[i].dragging) {
blocks[i].x = mouseX - BLOCK_WIDTH/2;
blocks[i].y = mouseY - BLOCK_HEIGHT/2;
}
}
var cursor ="default";
for (i=0; i< blocks.length; i++) {
var tp = blocks[i];
if ( (mouseY >= tp.y) && (mouseY <= tp.y+tp.height) && (mouseX >= tp.x) && (mouseX <= tp.x+tp.width) ) {
cursor = "pointer";
}
}
theCanvas.setAttribute("style", "cursor:" + cursor);
for (i=0; i< clickBlocks.length; i++) {
var tp = clickBlocks[i];
if ( (mouseY >= tp.y) && (mouseY <= tp.y+tp.height) && (mouseX >= tp.x) && (mouseX <= tp.x+tp.width) ) {
cursor = "pointer";
}
}
theCanvas.setAttribute("style", "cursor:" + cursor);
}
[/cc]
- The key lines in that code, change the cursor depending on what the mouse is over using CSS
[cc lang="javascript"]
theCanvas.setAttribute("style", "cursor: pointer”);
[/cc]
or
[cc lang="javascript"]
theCanvas.setAttribute("style", "cursor:default" );
[/cc]
Don't forget, you can join our new HTML5 Game Development forums and talk about this kind of stuff all day long!
HTML5 Canvas "1945" Game Demo
Here is one of the game demos we showed at Devcon5 last week. This is an action game named 1945. It uses graphics from Ari Feldman's Spritelib and music from Musopen.com. You cannot die in this game. It's a demo of parallax scrolling and particle effects. Move and shoot with the mouse.
This game has only been tested with Google Chrome. Other browsers will probably require a little tweaking to get to work correctly.
This game is really not practical for HTML5 because it uses mouse button clicks like old style Flash web games. Those controls would not work well on mobile.
discussion: How would you change this game to make it work on mobile platforms? Do you even think this type of game is viable?
Don't forget, you can join our new HTML5 Game Development forums and talk about this kind of stuff all day long!
Steve and I will be presenting on the HTML5 Canvas at Devcon5 on Wedensday
The conference is in Santa Clara on Wednesday and Thursday. We have a three hour block from 2-5PM on Wednesday to present. The first half will be an introduction to the Canvas and some actual code examples to get everyone familiar with the basics.
The second half will be a demonstration of quite a few games and apps we have been working on to demonstrate how we can take our Flash experience and apply it to the Canvas. We will also demonstrate some more advanced topics and touch on mobile, 3D, physics and more
Please stop by and say "Hi" if you are going to be attending. We hope O'Reilly will have copies of our book for sale too. The book goes into deep detail on the subjects we will be touching on during the sessions.
Press Release: 8bitrocket.com’s Jeff Fulton and Steve Fulton to Discuss the Emerging Role of Canvas Development At DevCon5 in Santa Clara, Dec. 7-8, 2011
8bitrocket.com’s Jeff Fulton and Steve Fulton to
Discuss the Emerging Role of the Canvas Development Environment
At DevCon5 in Santa Clara, California, December 7-8, 2011
Norwalk, CT, November 10, 2011— TMC and Crossfire Media announced that Steve Fulton and Jeff Fulton, co-founders of 8bitrocket.com and authors of the best-selling “HTML5 Canvas” book - will be speaking at DevCon5—HTML5 Developers and Designers Conference, taking place December 7-8 at the Network Meeting Center in Santa Clara, California.
Published by O’Reilly Media, Steve and Jeff Fulton’s book discusses how Canvas facilitates the dynamic rendering of shapes, images, and audio. In their session at DevCon5, Steve and Jeff will describe how Canvas is augmenting, and in some cases replacing, Flash as the preferred platform for bringing animation, video and interactivity to games and web pages.
“Canvas will continue to grow in significance because future versions of the Apple Operating System – as well as Window’s-8 will not allow Flash, and our sessions at DevCon5 will teach developers everything they need to know about replacing Flash with Canvas,” Steve Fulton. “These sessions will also discuss how HTML5 is solving application issues across multiple platforms, and evolving into a replacement for application plug-ins on the web.”
Steve and Jeff Fulton are scheduled to speak on Wednesday, December 7, as follows:
- Introduction to Canvas at 2:00 PM
- The Power of Canvas at 3:30 PM
“HTML5 is creating a world of new opportunities for developers, and the DevCon5 event is the one place that web developers; software architects; graphic artists; and business executives can learn everything they need to know about HTML5,” noted event producer Carl Ford of Crossfire Media.
Visit www.devconfive.com to access the complete Conference Agenda.
Registration for DevCon5 is now open. Members of the media can reserve media credentials by contacting Todd Keefe at todd@firpr.com at For Immediate Release PR. Become a DevCon5 Exhibitor and Sponsor—contact Joe Fabiano at jfabiano@tmcnet.com/203-852-6800 x132. Partner with DevCon5—contact Jennifer Terentiuk at jterentiuk@tmcnet.com/203-852-6800 x125.
About Crossfire Media:
Crossfire Media is an integrated marketing company with a core focus on future trends in technology. We service communities of interest with conferences, tradeshows, webinars, and newsletters and provide community websites with the latest information in our industries.
About TMC:
TMC is a global, integrated media company that helps clients build communities in print, in person, and online. TMC publishes the Customer Interaction Solutions, INTERNET TELEPHONY, Next Gen Mobility, InfoTECH Spotlight and Cloud Computing magazines. TMC is the producer of ITEXPO, the world’s leading B2B communications event. TMCnet.com, which is read by two million unique visitors each month, is the leading source of news and articles for the communications and technology industries. In addition, TMC runs multiple industry events: 4G Wireless Evolution; M2M Evolution; Cloud Communications Expo; SIP Tutorial 2.0:Bringing SIP to the Web; Business Video Expo; Regulatory 2.0 Workshop; DevCon5; HTML5 Summit; CVx; AstriCon; StartupCamp; MSPAlliance MSPWorld and more. Visit TMC Events for a complete listing and further information.
TMC Contact:
Todd Keefe
For immediate Release PR
617-262-1968 x 101
Todd@firpr.com
More Fuel For The HTML5 Fire: Adobe Admits That The Long Term Viability Of The Flex SDK In Doubt
In the "Your Questions About Flex Blog" on blogs.adobe.com, Adobe appears to be putting the future of Flex in doubt:
Does Adobe recommend we use Flex or HTML5 for our enterprise application development?
In the long-term, we believe HTML5 will be the best technology for enterprise application development. We also know that, currently, Flex has clear benefits for large-scale client projects typically associated with desktop application profiles.
Given our experiences innovating on Flex, we are extremely well positioned to positively contribute to the advancement of HTML5 development, starting with mobile applications. In fact, many of the engineers and product managers who worked on Flex SDK will be moving to work on our HTML efforts. We will continue making significant contributions to open web technologies like WebKit & jQuery, advance the development of PhoneGap and create new tools that solve the challenges developers face when building applications with HTML5.
So what does this mean? It means that Adobe just took more days off the life of the .SWF format (we said 1000 days last week, now we say about their are about 500 days left. Someone needs to create a SWF Death Countdown Clock...not in a gleeful way mind you....more like a Wake).
Why would Adobe do this? It's very simple: the bottom line. It make sense from a business perspective for Adobe. HTML5 is "free", but the tools to build HTML5 Suuuuuuuuuuuuuuck (especially when compared to the Flash IDE). Adobe can build tools for HTML5 (hopefully better than Adobe Edge), leverage their investment in Phonegap and JQuery and sell them as a package as the "new Flash".
The Flex SDK is free too, but since the world never accepted Flex as a true "open source" software, and since the .SWF is a slowly dying format (because Adobe just shot it in the stomach), there is no incentive to support it (within Adobe anyway). Instead, Adobe will beef-up the Flash IDE, and sell the crap out of the Air exporter to create apps. This may not be a logical decision for loyal Flash developers, but it's good for the bottom line of Adobe and for Adobe's stockholders. Adobe can make money from tools, and retreat from "open source" and "open screen" Flex and AS3, because, as we now know, their heart was never really there anyway...or at least their heart would have been there, if Steve Jobs had not done the service of tearing it out it out for them.
(thanks to Ken Railey for the head's up on this)
Now Don't Get Cocky "Web Standards" Dudes, HTML5 Still Has A Looooooooong Way To Go.
Two days ago Adobe announced that were were ceasing development of the Flash player for the mobile web, in favor of HTML5. They will focus on the air packagers and PC/Mac browser plugins. Technologically speaking, nothing has really changed, as Adobe already had an issue with Flash not being supported on iOS browsers. So what has changed? The perception of Flash: the fact that Fortune 500 CIOs think they can now ONLY use HTML5 for web sites, or they will look like Luddites. While this certainly is a boon to HTML5, and has probably numbered the days for the .SWF format (from infinity to about 1000), the successor, HTML5 has a few things to answer for before it can swoop in and push Flash off the cliff.
1. Audio Playback : HTML5 Audio in the PC browser is awful. HTML5 Audio on mobile is atrocious. Audio issues that Macromedia solved in Flash 10 years ago plague HTML5 and don't look to get better an time soon. Zynga recently released Jukebox to help with this problem, but it falls back to...Flash. That is not gonna work now, is it? Until this is fixed, the web is going sounds pretty much like it did back in 1998 when we all tried to play audio with Java applets!
2. Media Formats: Flash ingests disparate audio and video media formats and spits out a single format to be played across multiple platforms. Essentially, this ability is what created Youtube.com, allowed for audio streaming inside firewalls, and spurred and the Web 2.0 personal media revolution. HTML5 audio and video is stuck in a war over which formats to support, making developers do the same work multiple times to get similar (but not equal results). This needs to be fixed immediately. A the same time, Flash allows for secure, monetizable video streams that are currently not available in HTML5
3. Centering/Scaling: Centering things on the screen should be simple, right? Even with CSS 3.0 (not really HTML5, but married to it), centering a web site on the screen takes a massive effort filled with CSS kludges and black magic. With Flash, all you had to do was center the SWF and you were done. Furthermore, you could easily scale the Flash app to the size of the browser Window to create seamless web app surfaces. These things are supported in HTML5, but are not standard and take browser specific JavaScript to pull off in reasonable manner. This is not 2005. Centering is in, and left-justifying is out. Fix it standards gurus, and give us an easy way to implement it in Javascript (not just with what amounts to CSS shims, even if they won't admit that's what they are)
4. Non-Standard Security Sandboxing : Security sandboxing among different browsers makes creating some web-site based HTML5 apps a real chore. In some instances, code that works locally (to load video for instance) does not work from a web site in certain browsers because it breaks the security sandboxing rules. Flash solved this problem by allowing the developer to set sandboxing rules that were followed across platforms and browsers.
5. Performance : HTML5 is sill slower than Flash running the same kind of application. In certain browsers (iOs 5.0 Safari) this is getting better, and should prove to get better with Windows Metro, but it's still not good enough yet.
6. Sockets/Networking : Socket and Networking programming (for multi-player games and other uses) is still very primitive in HTML5 and relies on POST requests for communication. (at least until Web Sockets arrives universally) This is akin to the old "server-push" model from the late 90's It works, but it has a long way to go to match what Flash can do.
7. Web-Cam/Microphone Support: One great thing Flash does is standardize the interface to microphones and web-cams. There are libraries for this is JavaScript such as the JQuery webcam plugin (http://www.xarg.org/project/jquery-webcam-plugin/) but they require Flash! Oops.
8. Rich Javascript Game Libraries Are Just arriving. Want to make that Angry Birds clone your client desires on the HTML5 Canvas...try coding all of those physics yourself. While Box2dJS has arrived and Impact looks good, we have not had the chance to test them yet so we cannot comment on their speed or effectiveness on the Canvas. Without full GPU support for the Canvas, the game screen updates are still probably going to be rather slow compared to Flash.
9. A Good Flash IDE-like tool for creating HTML5 content does NOT exist. This has forced us and other HTML5 designers to use the FLASH IDE (of all things) to create animations and interactivity, and then pray that the developers can replicate what they have designed with exported Sprite Sheets, png sequences, and rabbits pulled from hats. Designers and programmers alike rely on masks, animation paths, tweens, video with alpha channels for blue-screening, and 100's of more features, tweeks, and tools in the Flash IDE that will need to be replicated in order to replace Flash. It is now Adobe's job to create this tool, as they have taken on the burden. God-Speed and good luck.
We do think that HTML5 is promising, and since Adobe is basically ceding it to the Web (at least for general web site uses), we have to make the best of it. However, now that HTML5 is in the spotlight, it has to make good on its' promise. The list of things here is just the tip of the iceberg. There are probably dozens of other uses for Flash that cannot (yet) be replicated in HTML5. If HTML5 truly is the future, it needs to catch-up to the present as fast as possible.
One Day After Adobe Retreats Flash From The Mobile Web: Our HTML5 Canvas Book Hits #1 On The Game Programming Chart At Amazon.com
Also, it has the lowest ranking it has ever achieved too.