So I've been hacking on the Akihabara HTML5 video game engine. I'm trying it out while I put together a platformer. I think I've come to an answer for the question, "Why does Mario have a wide stance?" Being from Minneapolis, MN I've heard my fair share of wide stance jokes (thanks Larry Craig) … in this video I talk about video game sprites with wide stances and why that is important for platformers. I also discuss how I applied this new knowledge to some code improvements in Akihabara.
I'm sorry to have recorded you such a long video, I didn't have time to record a shorter one. ;)
I revisited my 3D CSS3 Galaxy from my previous post and rewrote the effect in JavaScript that renders using HTML5's canvas tag (instead of Safari-only 3D CSS3 transforms).
This time it works in Google Chrome, Firefox, Safari, Opera, and yes even IE9! Oh, it still works on the iPad and iPhone, too. Well, go on then, give it a whirl:
I updated the galaxy a bit, adding an effect where it cycles from blue stars to orange stars as it rotates.
Another fun fact about this demo, is that I was quite easily able to squeeze the entire thing into a single file well under 10KB in size for An Event Apart's 10K contest.
Anyway, I hope you enjoy. Check out the source code!
Galaxy Box is a CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, I used 3D CSS properties available in Safari 5 and on the iPhone and iPad. Check out this video of the demo in action and then interact with the 3D CSS3 Galaxy demo yourself.
Each star is a div with border-radius applied to make it round and a white or light blue box-shadow to add glow.Since the stars are actually flat 2D objects, normally when you rotate them this would become very apparent and destroy the illusion. The trick is that when the galaxy is being rotated each individual star is being rotated in the exact opposite direction so that it is always facing the viewer.
The stars are placed procedurally by JavaScript, and I also used JavaScript to add interaction to the demo. You can rotate or spin the galaxy with some momentum on the desktop. On iOS you can also rotate and spin the galaxy with your fingers, or pinch to zoom. Try the demo now in Safari!
Why hello there reader, I'd like to announce a video game I created called "Infiltration at Dusk". It is the near future, and the Artificial Intelligence is trying to rid Earth of all humans. The remaining villages have installed batteries of gun turrets as their only defense against the hordes of biomechanical abominations sent on raids by the AI. You, gunner, are the last hope remaining!
I chose the song "Infiltration at Dusk" by the very talented Tettix, off of his Technology Crisis II album. The album inspired me to create biomechanical monsters that you have to shoot, and the song inspired me to create a game that starts at dusk and gets darker as you play. The bullets from your gun and the exploding enemies light up the dark scene — that's one of the twists of my game.
I set out to enter this competition with two major goals in mind. My first goal was to raise the technical bar for games written in JavaScript rather than Flash. I wrote the game engine in JavaScript using the canvas tag for graphics and HTML5 audio tag to play the music. I wanted to show realtime lighting effects and have fast paced action with lots of sprites on the screen at once to help demonstrate the massive improvements in JavaScript performance. Rob Beschizza of Boing Boing and Offworld says:
Zachary's Infiltration was built with JavaScript and HTML5's canvas tag, but contains powerful lighting and blending effects normally the province of Flash — a perfect showcase for plugin-free browser gaming.
The other big goal I had for this game was to introduce a new input style for desktop gaming (my second twist). In Infiltration, you control where your turret shoots bullets by mashing on the keyboard. The entire keyboard becomes almost a touch input surface roughly mapped to the game screen.
Typically with action games on the desktop you target your bullets with the keyboard using WASD or the arrow keys, or you use your mouse to point in a particular direction. This always felt a bit too controlled to me when playing manic "bullet hell" style action shooter games. I would play my way up to dozens of enemies on the screen at once and end up dying in a keyboard crushing or mouse tossing fit. That's when it kind of dawned on me that it might be a bit more fun to mash on your keyboard in the general vicinity of the oncoming horde of enemies. I think it turned out pretty well!
Update: The CSS2 text-shadow property sure is versatile. If you combine it with some CSS3 animations you can create a pretty decent vanishing smokey text effect.
A few months ago I made a fun flaming text effect simply by using some JavaScript and the good old CSS2 property text-shadow. I posted it on Twitter but never got around to posting it here. Today I pulled together another text effect, shining text, by using CSS3 properties and animation. I thought I'd cover both in one post.
Flaming Text Using CSS2 text-shadow
Now we're cooking with gas.
Most readers should see the previous line of text on fire since it just uses the CSS2 property text-shadow. If you don't see that you're probably using Internet Explorer or something. Do note, there's no use of images, and the text is still selectable.
The key to this effect is using multiple text shadows applied to the same text, each with a different color, position, and blur.
Then you just jostle them around with some JavaScript. Open my flaming text example and view source. There's not a lot to it.
Shining Text Using CSS3 WebKit Properties
Check out the shine on this.
To see this effect, you're going to have to check it out in Safari, Chrome, or WebKit. Again, this effect uses no images and the text is selectable, and this time there isn't even any JavaScript involved. If you have an iPhone, the above effect is remarkably similar to the "slide to unlock" text animation on your lock screen.
This effect is created through a combination of a CSS3 gradient in the background, a CSS3 background clipping property which clips the background to the text, and a CSS3 animation to move the background gradient. I was inspired by a demo done by Trent Walton, and took it to the next level by removing the use of any image files. Open my shining text example and view source.
The background gradient is created with the -webkit-gradient CSS3 property. Firefox 3.6 added support for CSS gradients to the Firefox browser family.
The animation is created with a CSS3 animation. You can read more about these in Safari's Visual Effects Guide. CSS3 animations and transitions are on their way to Firefox 3.7.
The "trick" CSS property here to complete this effect is the CSS3 property -webkit-background-clip. This defines the region to which the CSS background property will be clipped. By using transparent or semi-transparent text and -webkit-background-clip: text I can make the background gradient only visible where the text is.
Welp, that's about it. I hope you found it enjoyable. Happy hacking!
