Box2DJS Platformer

platformer screenshot
Here’s an experiment I’ve been working on: it’s a platformer demo made in JavaScript. It uses the Box2DJS physics engine, and it’s iOS compatible.

It’s meant to become a version of a Macromedia Director game I made long ago (and can’t seem to find a copy of) called “Guy”, which was played with a mouse. You click on the screen to place a marker, and your little man walks towards the marker. If you click above his head, he jumps. Guy was made with badly hacked, homemade physics, so this demo is turning out much different. It’s a lot wilder, and moving your guy around is a lot more like driving a vehicle than a person. Which is maybe not so great? Anyway, your character is more like a car because I made the choice to build him with a wheel, rather than simply slide him around the ground. In a lot of ways, this makes his walking a little more natural, but it also makes him harder to control. Some tweaking could hopefully fix that.

If you’d like to look at the JavaScript, it’s here. I also use jQuery in there. It works in Chrome, Safari, and Firefox, though it really putters in Firefox and Mobile Safari. Try it out, and let me know what you think.

Tagged , , , , , , , | Leave a comment

HTML5 Music Players

With the success of the iPad and the continued success of the iPhone (and also the sneaking suspicion that flash is over-used), I’ve been on the hunt for a new in-browser music player for my music web site Act Dead. Right now, it uses the del.icio.us mp3 player plugin for WordPress. The nice thing about this plugin is that it just automatically scans the page for mp3 links and adds a little play button next to all of them. So there’s very little set up. Ideally, I’d like a new plugin that does exactly this, but when necessary (like on an iOS device), the player uses an html5 music player instead of a flash-based player.

Unfortunately, I haven’t found anything that fits my needs exactly, and I’m not sure what I’m going to do. I might just wait, as this space has only just opened up, and I would bet that someone will make exactly what I need within a year.

For now, the most interesting player out there is jPlayer, a robust JavaScript library that lets you create and customize your music player with a bit of coding. I tested it on iPad, iPhone, Chrome, and Firefox. It smartly switches between its flash component and HTML5 depending on the browser. However, there is no WordPress plugin. This one is probably the best option for someone willing to do a little dev work, and it will probably be made into a fantastic plugin by somebody soon.

Until then, the best WordPress-ready option is the Degradable HTML5 Audio and Video plugin. This one lets you use shortcodes in your WordPress posts (like http://myblog.com/wp-content/uploads/2009/09/mysong) and then it provides the appropriate player for the browser. Unfortunately, I don’t want to use shortcodes. Again, I just want JavaScript to scan my page for mp3 links and work auto-magically.

Has anyone else out there found any better html5/mp3 solutions?

Tagged , , , , | 1 Comment

Poser Wireframes

Some simple sketches for an app idea. I like to draw on my iPad, and I’ve felt the need for a poseable figure — like those wooden ones that artists use for reference. Then it occurred to me that you could probably make a pretty cool iPhone app to be a virtual poseable figure. And you could build the app with HTML/JavaScript. So this is something I’d like to explore, but in the meantime, here’s how it would work:

Tagged , | Leave a comment

Shop Shark 0.6

Finally got version 0.6 done for Shop Shark. In this installment, I’ve added the ability to keep a list of stores as well as a list of items. It’s actually not too big a deal — the store list behaves just like the item list does, and there’s no interactivity between the two. YET. The real idea behind Shop Shark is to help you plan shopping trips, so at least getting the stores in there sets me up to add some of the key features in the next few releases.

Tagged , , | Leave a comment

UX Myths

Here’s a nice, ongoing list of user experience myths, along with notes about the research that debunks them. I especially like “Stock photos improve the users’ experience” (users ignore irrelevant imagery), “People don’t scroll” (scrolling comes naturally to modern Web users), and “People read on the web” (they skim for clues on what to spend their time with).

Tagged , , | Leave a comment

The Wired iPad App

Apparently, the new Wired Magazine iPad application is 500 megs because every visual element is just an image. That is, all the text, the animation, even the progress bars for the audio files are images or a series of images. Interface Lab is right to ask why they didn’t build this with HTML5?

Tagged , , | Leave a comment

Shop Shark 1.0 Wireframes

Shop Shark WireframeHere are some wireframes I made to envision the Shopping Trip functionality I want to be in Shop Shark 1.0. The two main changes from today’s interface are that a) there will be a list of stores to visit in addition to a list of items to buy and b) when adding a store or an item, you will see a filterable list of past items and stores.

Aside from needing a visual on the interface, I also made these as an opportunity to give Google Doc’s new Visio replacement a try. It’s pretty easy to use, pretty functional, and pretty promising for future use. For now, it’s still a little green.

Tagged , , , | Leave a comment

Mouse Events and Touch Events, Mouse Enter

I ran into a little snag with my last batch of Shop Shark changes. If you try the application in your computer’s browser, using a mouse, you can select multiple items by holding your mouse button down in the checkbox of one item and dragging through the checkboxes of other items. It works just like the visibility buttons on layers in Photoshop, which is a feature I much enjoy.

Unfortunately, if you try the application in your iPhone’s browser, you won’t find the same functionality. You’ll still be able to select many items by tapping on checkbox after checkbox, but you can’t do it in one sweep. Which I finally decided was good enough for now.

The reason is the difference between mouse events and touch events. The iPhone uses a whole new set of events that let you take advantage of the touch screen interface, which is very cool. It seems they left a few things out, though. In this particular instance, it’s the mouseenter event. On a mouse-driven browser, Shop Shark listens for the mouseenter event on every checkbox and then checks to see if the mouse button is down. If it is, Shop Shark knows to either check or uncheck the box in question. But there isn’t a “touchenter” event. There is a touchmove event, which I tried to use to duplicate the functionality. The issue there is that the event doesn’t contain any information about which element it’s over when it’s moving, but only which element it began with.

So I finally decided it wasn’t worth the headache for now. In the future, I might try to rig up a way to find the element the touch event is moving through by referencing the x and the y, but that’ll have to wait.

Tagged , , , | 1 Comment

Shop Shark 0.5

Shop Shark 0.5I’ve updated Shop Shark to version 0.5. It is now much prettier than it was before, incorporating a new palette: Cyan, Magenta, Yellow, and Purple. No new functionality, but the slickness quotient should’ve gotten a big bump.

The user-friendliness may have taken a slight step back, however, as I’ve replaced the text labels on the action buttons with icons. I’ll have to address this problem in the future. One idea I have is flash the name of the action you selected right after you do something. Or perhaps show the message as soon as you touch the button and fade it out after you let go, executing the action. That way, you’ll have a chance to move out of the button to cancel the object. Basically, the iPhone equivalent of a tooltip.

Tagged , , , , | Leave a comment

Classic Iconography

Check out a collection of images of the Xerox Star, which boasted one of the earliest, best versions of the GUI metaphor we still use.

Leave a comment