HB Games Logo animated in HTML 5

[Xilef]

So this comes out of my plans to have the HB Games logo appear during opening videos of games, and then to spice it up make it animated.

So I did this today:
CLICKY THIS LINKY TO SEE LOGO

Sorry I can't embed it, it is HTML5 after all, feel free to view-source and grab the image resources to recreate it/tweak it yourself.

I had to change the cog as I couldn't redraw the original so well, if anyone can produce a better cog I'll use that in stead.

I'll make animated GIF, AVI, APNG, MOV, WMV, w/e versions of this later.

Limitations: Shadows double-up. Not much I can do unless I start messing around with XOR blitting or what ever it takes.

EDIT:

Spoiler: Rubbish animated previews

Here's a shitty APNG version with no alpha and 30FPS (Took mew hours to get this working)
On some browsers this image will animate:

On Google Chrome you need the APNG extension
Here's an even worse GIF version with 1 alpha channel (Limitation of GIF)

^^^THESE ARE PREVIEWS, CLICK THE DAMN LINK IF YOU WANT TO SEE HOW GREAT IT REALLY IS^^^

 

[Xhukari]

Very nice!
I'm not seeing what you mean about shadows 'doubling-up' though.

 

[Xilef]

Very nice!
I'm not seeing what you mean about shadows 'doubling-up' though.

Look at the bottom and the right of the cog, it's shadows are darker where it merges with the HB and the bar shadows, which logically doesn't work when there is a single light-source.

EDIT: Just updated it to have a delay before the Games part appear and a delay between the envision, create, share part, it makes it seem a bit more...Sensual

 

[Xhukari]

Yeah I see it now.
That makes me even more curious of how HTML works then.
I could do that in Flash, put a shadow filter on top and it'll function exactly how you wanted with one shadow 0.o

 

[bacon]

Well damn.
Yes that is a really cool logo animation. The way the gear turns doesnt look centered imo?

 

[Xilef]

Well damn.
Yes that is a really cool logo animation. The way the gear turns doesnt look centered imo?

It's not centred, mathematically it is, but I think for the rotation to work properly it needs to be a power of 2 texture, which it is not. I'll look into fixing that again.

 

[bacon]

Still I really like it. Its simple and the animation is cute. Thanks for sharing!

 

[Xilef]

Cog is a bit more centred to it's pivot now, only a bit more though.

EDIT: Also made it so "Games" decelerates into position, making it's movement look much smoother.

 

[Xhukari]

I think the circles aren't perfect, I think that may be the issue?

 

[Venetia]

Holy shit. I only just saw this. It's so freaking adorable, I love it. I want to figure out a way I can incorporate it into the site or use it somehow.
It'd be great if we could figure out a way to integrate it into the banner rotation. I'm not sure how though, in its current state, and if it were an animated PNG, it'd probably be too big [filesize] to reasonably have it load every 30th click or so.
Hmm.

Good freaking work though man!!! Love the enthusiasm ~~~ <3

 

[Xhukari]

HTML5 can't be used in the banner? XD

 

[Toams]

The problem is that the imagea for the banner het picked randomly from a directory, and this isn't an image.

 

[Xilef]

Could always change the rotator to rotate through embed code and one of the embeds is the canvas tag in stead, it's pretty easy to do actually, I'll write some example code.

Rotating Logo Example - Keep hitting refresh for a new image

I optimised it so images are 9.9KB smaller than the default logo and the code is now 1.6KB obfuscated, so the HTML5 animated logo is 8.3KB smaller than the default logo, just say if you want the optimised version of this (Code is obfuscated so it's difficult to modify).
I could further optimise the PNGs by making it a chip-set sheet, but I don't really have the time right now.

Take a look at logo.php's code to see how it is set up
DOWNLOAD CODE UNCOMPRESSED (Easy to edit)
Download code compressed (Harder to edit, smaller file size)

Here it is in code form for implementing into the forum theme, read all the comments and stuff to understand how to customise it and where to put the code and files:

PHP code to put in the top of the forum theme code (Or you can put it in it's own php file and write an include for it in the forum's theme PHP code).

 

<?php

/* Variables Begin */

$urlJavaScript = "canvasPaint.js"; // JavaScript URL for painting to canvas

$urlLogoBase = "http://www.arpgmaker.com/images/slogans/HBlogo-"; // Logo base URL

 

$imgCount = 39; // How many images are there

$canvasPercent = 50; // Percentage chance of getting the canvas element, this can be changed to 1 / ($imgCount + 1) * 100 to make it the same percentage chance as the other images

 

$altStrring = "HBGames Logo"; // Logo alt text

$embedString = "<img src='".$urlLogoBase."01.png' alt='".$altStrring."' style='max-width: 671px !important;'>"; // Default fall-back

/* Variables End */ 

 

if (rand(0, 99) >= $canvasPercent) // This is where we use the % chance of getting the canvas embed

{

    $imageNum = rand(1, $imgCount); // One of the random images

    $embedString = "<img src='".$urlLogoBase.sprintf("%02d",$imageNum).".png' alt='".$altStrring."' style='max-width: 671px !important;'>"; // Build the random image URL

    

}

else

{

    $onloadString = "onload='init();'";

    $headString = "<script type='text/JavaScript' src='".$urlJavaScript."'></script>";

    $embedString = "<canvas id='canvas' width='671' height='190'><img src='".$urlLogoBase."01.png' alt='".$altStrring."' style='max-width: 671px !important;'/></canvas>";

}

/*

So now we have:

The string for the header to include the JS (Will be blank for the random images) - $headString

The string for the embed code (Will be either canvas or img) - $embedString

The string for the load code - $onloadString

 

Insert them into the correct places with <?php echo $headString ?> and <?php echo $embedString?> and <?php echo $onloadString ?>

*/

?>

 

Put the above code at the top of the PHP theme code, then put the <?php echo $headString ?> anywhere in the header and the <?php echo $embedString?> between the <a href="index.php"> </a> of the forum logo.
Put <?php echo $onloadString ?> inside the body tag as an element: <body <?php echo $onloadString ?> >

And the canvasPaint.js code:

 

var logo = new Image();

var HB = new Image();

var ecs = new Image();

var bar = new Image();

var games = new Image();

var cogWhite = new Image();

var cogShadow = new Image();

var rot = 0.0;

var barDist = 0;

var gameDist = 114;

var eAlpha = 0.0;

var cAlpha = 0.0;

var sAlpha = 0.0;

var spd = 14.5;

 

// Edit these sources to reflect the image paths

function init()

{  

    logo.src = 'images/HBlogo-01.png'; 

    HB.src = 'images/HB.png'; 

    ecs.src = 'images/ecs.png';

    bar.src = 'images/bar.png';

    games.src = 'images/games.png';

    cogWhite.src = 'images/cogWhite.png';

    cogShadow.src = 'images/cogShadow.png';

    setInterval(draw,60);

}

 

function draw()

{

    var ctx = document.getElementById('canvas').getContext('2d');  

    ctx.clearRect(0,0,671,190);

    //ctx.drawImage(logo,0,0);

    

    ctx.save();

    ctx.translate(143, 69); 

    ctx.translate(55, 55); 

    ctx.rotate(rot);

    ctx.globalAlpha = 0.9;

    ctx.drawImage(cogShadow,-55,-55);

    ctx.restore();

    

    ctx.drawImage(HB,8,17);

    if (barDist > -437) ctx.drawImage(bar,437 + barDist,0,1 - barDist,21,   227,    108,    1 - barDist,21);

    else ctx.drawImage(bar,227, 108);

    

    ctx.save();

    ctx.translate(142, 68);

    ctx.translate(51, 51); 

    ctx.rotate(rot);

    ctx.drawImage(cogWhite,-51,-51);

    ctx.restore();

    

    if (gameDist == 0)

    {

        if (eAlpha < 2.0) eAlpha += 0.1;

        ctx.save();

        ctx.globalAlpha = eAlpha;

        ctx.drawImage(ecs,0, 0,153, 33, 262, 130, 153, 33);

        ctx.restore();

        

        if (eAlpha >= 2.0)

        {

            if (cAlpha < 2.0) cAlpha += 0.1;

            ctx.save();

            ctx.globalAlpha = cAlpha;

            ctx.drawImage(ecs,153, 0,126, 33,   262 + 153, 130, 126, 33);

            ctx.restore();

        }

        

        if (cAlpha >= 2.0)

        {

            if (sAlpha < 1.0) sAlpha += 0.1;

            ctx.save();

            ctx.globalAlpha = sAlpha;

            ctx.drawImage(ecs,153 + 126, 0,108, 33, 262 + 153 + 126, 130, 108, 33);

            ctx.restore();

        }

    }

    

    if (barDist < -437 && gameDist > -93)

    {

        gameDist -= spd;

        spd--;

        if (spd <= 1) spd = 2;

        if (gameDist < 0) gameDist = 0;

        

        ctx.drawImage(games,0, 0,422, 93 - gameDist,    240,    19 + gameDist,  422,  94 - gameDist);

    }

    

    if (barDist > -437) rot += 0.25;

    barDist -= 10;

    if (barDist < -437) barDirst = -437;

}

 

And here's all the images

EDIT: It'll take a bit more to accept images in a directory, if that's really needed I'm sure some inject code can be written in PHP to run a script that's in the directory, it would be a lot more logic code but it would be as simple as dropping that in the image directory in stead of dealing with the forum theme code.

 

[Ellie]

While I like it, I think it would be too much seeing as the logo is shown on every page - I think if we were to use it, we would have to use cookies (perhaps with a 24 hour limit or something) so it only shows the animation the first time you view the site and not on every single page load. I did think about having the gears in the background rotate at some point but again, it was a little too flashy for every single page load. Thanks for taking the time though, this is awesome.

 

[Xilef]

While I like it, I think it would be too much seeing as the logo is shown on every page - I think if we were to use it, we would have to use cookies (perhaps with a 24 hour limit or something) so it only shows the animation the first time you view the site and not on every single page load. I did think about having the gears in the background rotate at some point but again, it was a little too flashy for every single page load. Thanks for taking the time though, this is awesome.

Shouldn't be on every page load as that would be insane, perhaps have it as a nice surprise or easter-egg in the logo cycle, could even use the $canvasPercent = 1; to give it a 1% chance of appearing within the logo cycle or make it so it only appears in the mornings before 9AM local time or every 10th post it has a 20% chance of appearing in the cycle.

 

[Venetia]

yeah that's what i was considering ... just a small easter egg's chance of appearing

 

[Xhukari]

While I like it, I think it would be too much seeing as the logo is shown on every page - I think if we were to use it, we would have to use cookies (perhaps with a 24 hour limit or something) so it only shows the animation the first time you view the site and not on every single page load. I did think about having the gears in the background rotate at some point but again, it was a little too flashy for every single page load. Thanks for taking the time though, this is awesome.

Omfg!
I so want this xD
That would be such a 'whoa!' moment!

 

[Jason]

yeah that's what i was considering ... just a small easter egg's chance of appearing

How about if you just have it playing on the portal/homepage?

 

[DJ]

amazing. HBgames sure can use this.

 

[Kingdom Ablaze]

i really liked that