Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /nfs/c03/h07/mnt/48256/domains/blog.sokay.net/html/wp-includes/pomo/plural-forms.php on line 210

Warning: Cannot modify header information - headers already sent by (output started at /nfs/c03/h07/mnt/48256/domains/blog.sokay.net/html/wp-includes/pomo/plural-forms.php:210) in /nfs/c03/h07/mnt/48256/domains/blog.sokay.net/html/wp-content/plugins/bad-behavior/bad-behavior/screener.inc.php on line 9

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /nfs/c03/h07/mnt/48256/domains/blog.sokay.net/html/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 77

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /nfs/c03/h07/mnt/48256/domains/blog.sokay.net/html/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 87
HTML5 Archives - blog.sokay.net

wildlife_logo
I recently wrapped up a project I worked on for the fine crew at Wildlife. It was a web application involving compositing a user’s name and photo into a video in realtime, so I’m describing this as realtime compositing! My bad if this sounds misleading to ya! Read on if you’re interested in finding out what this is all about.

 

 The Spell Caster

witches_thumb
Created for the TV show, Witches of East End, the spell caster allows users to create a spell with their favorite character from the show. After the user logs in with their Facebook account, the application plays out like an interactive video. The user selects an ingredient to mix, their photo is added to the cauldron and stirred by the user, and finally presented with a potion bottle that displays their name on the bottle.

To create the illusion of the user’s photo and name being in the video we developed a sort of realtime compositing system. This isn’t too unbelievably different from something that you’ve probably seen in Flash before but that didn’t make it any less difficult. The goal was to make this seamless with the live action video and visual fx, also handled at Wildlife. With this project I got up close and personal with the quirks and limitations of HTML video — especially with regards to cross platform and cross browsers compatibility.

In Javascript, I developed a system that basically functions as a custom video player. It generates a playlist based on the user’s selection, with certain videos being tied to tracking data that’ll draw the user’s photo and name into the scene as a texture.

Here’s my explanation for how it all works.

Continue Reading…

Hello ya’ll!

I’ve been neglecting this place. I haven’t even been announcing our games officially on the blog. (by the way, we stealthily released The Crazy Program on Android!)

For the past year or two I’ve been hacking away at HTML game demos on and off. Thinking about it, I never followed through and released something. For a time, I was thinking seriously about doing a Japanese styled mobile card game, similar to the now famous Puzzles & Dragons but I sort of hit a wall with my approach to using 3D with CSS. But that ended up just turning into a blog post outlining a CSS3 technique.

I decided to release this new project as early as possible and get something out the door, no matter how rough it was. Introducing…

RUSH-D (alpha)!

Play it at http://www.rush-d.com

rush-d_screen_01

RUSH-D is a Sokay game series that never got quite off the ground. I started designing RUSH-D as a side-scrolling space shooter (SHMUP) fashioned after some of my favorite games — Einhander and UN Squadron. I created a simple Flash prototype while I was working on Thugjacker and in those days, that was enough to completely sidetrack me away from my main project.

rush-d-OG
Here’s a screen shot of RUSH-D (aka Sokay Rush) prototype.

Since this was back in the day (around 2003), I thought I was clever planning to use pre-rendered 3D art to wow all of the Flash game audience. My expectations grew and I never got really far with the project outside of a few design docs and concept art. Continue Reading…

The Demo

Here’s a CSS3 demo of the Donut Get! background.

Use your mouse to adjust the perspective of the scene.

I’ve been messing around with CSS3’s 3D Transform ability recently. I was looking for a way to achieve some primitive 3D visuals strictly with HTML. I wanted something that would also run on phones and tablets.
Continue Reading…