Better Static Images for Amphibian.com

The new, improved version of the image for a recent comic.

As I mentioned last week, I have been working to close Issue #7 on my webcomic. Basically, Amphibian.com is not a normal webcomic. It's not an image, which is great until someone wants to share a link to a comic on social media. I auto-generate static images of the comic just for sharing. But the comics which contain embedded games and stuff haven't looked right in the static captures. I wanted to at least put a warning in the image that explains why they often look weird, but as an added bonus I actually made them look better (most of the time).

As you can see in the picture on the right, I was able to add some warning text to the top of dynamic comics. I generally share this version on TopWebcomics.com but you may see it other places as well. When people see comics like this in the future, they'll know that they should view it on Amphibian.com to get the full effect.

Also, when this comic was originally published, the third frame was black. The game was not captured as part of the image. This was due to two things - the URL of the page used for the image capture was such that the game's image assets could not be loaded, and the fact that the capture was taken before the game initialized asynchronously. I fixed the URL issue by changing the static image comic path from /basic/[comic-number] to /[comic-number]&b=1. There wasn't really a generic way to ensure the comic will be rendered before the capture in all cases, but I added a 500 millisecond delay which should be good enough the majority of the time.

Finally, I also locked-down the ability to see the basic versions of the comic. It was the case that you could view a future comic if you asked for the basic rendering. I changed the rules so that only authenticated users or requests coming from the server itself can see them. I use PhantomJS to perform the image capture and it runs on the server, so that was a simpler fix than I initially thought that it would be.

It always feels good to resolve an issue. It also feels good to read one of my comics. Here's the link so you can feel good too.

Amphibian.com comic for 18 April 2016

Basic Images are Complicated

I sat down tonight thinking that I would quickly resolve Comic Issue #7, which has to do with the static images generated for sharing on social media platforms. Here it is almost midnight and I am not finished.

It's been bothering me that many of the dynamic comics (the ones that use JavaScript for a game or something) are not rendering correctly at all as static images. See this post on how I generate the static images. I finally figured out that it is because I take pictures of "basic" versions of the comics (no header, footer, etc.) and I generated the "basic" versions of the comics at a slightly different URL. When the page rendered there, sometimes file paths used in embedded JavaScript would be wrong and lead to missing resources which in turn leads to a bad picture.

Another problem with this method was that I render the images before the comic's official release date and so I had to leave the basic URL open - that is, no authentication was required to see future comics if you requested them in basic form. I doubt that many people took advantage of this flaw, but still...

Of course I wanted to fix all these problems in addition to just marking dynamic comics as dynamic in the basic view. So I'm not finished with any of it. I'm like, 85% finished. But tomorrow is another day. A day in which I might write another post about what I actually did to fix the problems! Until then, entertain yourself with today's comic. It's funny, and that's no accident.

Amphibian.com comic for 15 April 2016

Frog Soccer with Phaser - the Finishing Touches

I'm finally finishing up Frog Soccer, my 404 page game. There were a few outstanding bugs with it that I was able to fix this week (be sure to tell me if you find more!) and I also had to make the page a little nicer. I now include links to play it in full-screen mode as well as a link to the repository on GitHub.

There were two main issues.

WebGL fail! Ignore!

1. If the web fonts could not be loaded, the game never started. It has come to my attention that some proxies (like the kind used in schools and businesses) prevent the web fonts from loading. Besides totally ruining the look of my comic, this actually causes the soccer game to fail since I wait on the active callback from the Typekit Web Font Loader before initializing the game. I fixed this by adding a callback for inactive, which is called when the fonts fail to load. Why the fonts fail to load is a problem for another day.
2. If a frog stood in the corner of the field and blocked a ball toss-in twice in a row, the ball would end up in an endless toss-in loop. This was because a timer was being set to go off one second after the ball went out-of-bounds which assumed the ball had not re-entered play in between. If the ball toss-in bounced off a frog in less than a second, another toss cycle would begin which would be interrupted by the timer, which would move the ball back out-of-bounds and the cycle could continue without end. Crazy. I put a check in to see if the ball was already back in play before starting the toss. Maybe not the most eloquent solution but it works.

There was one additional minor issue. When I tried playing the game on my phone, a Samsung Galaxy S3, it always failed because of some WebGL problem. I believe this to happen in Phaser's startup process which checks to see if it should render with WebGL or Canvas. I changed the code to always use Canvas instead of auto-detecting and now it works...but I still sometimes see the error anyway. I'm going to chalk this one up to a device-specific annoyance and let it go for now. Could be something weird with Phaser's detection method too. I might look into it more if it's happening to other people as well.

var game = new Phaser.Game(width, height, Phaser.CANVAS, "gameArea", {
    preload: preload,
    create: create,
    update: update,
    render: render
});

One more thing - on the comic site, I changed the meta tag on the 404 page to set the page width to the width of the game's canvas. I don't usually set the width for responsive sites, but it made sense for this one page.

<meta name="viewport" content="width=800,user-scalable=1">

So what's next? I might tinker with this game from time to time, but I think I might start working on another one soon. This was my first experience using Phaser and I was very happy with it for the most part. I'm thinking of maybe making a (gasp!) Facebook game to integrate with Amphibian.com. Don't hate me. Look, here's today's comic...

Amphibian.com comic for 4 September 2015

Your Local Bugs

Just a short note today. I found this link interesting:

Pennsylvania Insects and Bugs

You can look up insects by your state as well. I found this while trying to identify a large spider that lives by my garage door.

Have you ever walked out your door and put your face in a spider web? Yeah, it's pretty terrible.

"Hogna lenta 18" by Patrick Edwin Moran - Own work. Licensed under CC BY-SA 3.0 via Wikimedia Commons.

Amphibian.com comic for September 5, 2014