tag:blogger.com,1999:blog-62819436590892212392024-03-12T03:17:06.785-04:00Amphibian AbstractsSoftware, and frogs, and cookies. And software.Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.comBlogger302125tag:blogger.com,1999:blog-6281943659089221239.post-1981674627964947702018-08-15T00:00:00.000-04:002018-08-15T00:00:07.048-04:00Search for ComicsAnother new feature I've just added to the comic is the ability to search the archive for comics containing a certain word or phrase. I've wanted this feature since 2014! I always had to bring up a terminal and perform SQL queries manually to find the comic I was looking for.<br />
<br />
Since the titles often don't give any real hints as to the content, I often had trouble finding one.<br />
<br />
If you want to give it a try, go to the <a href="https://amphibian.com/archive" target="_blank">Archive page</a>. You'll see the search box near the top.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-IkK0AqpTDNxDQMrpTaBpP8OWDfVVYTYfEoF6xmHZ0GP90EuSvuOsYpmgLDKvcEbnK8mT__pOS-fVqP8kpwco8Ly3ArVmeoph0YP5yy82CHoTNWHLrM2O5AdM-ZFYOwh23TJ7dCSZCzg/s1600/comic_search.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="401" data-original-width="758" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-IkK0AqpTDNxDQMrpTaBpP8OWDfVVYTYfEoF6xmHZ0GP90EuSvuOsYpmgLDKvcEbnK8mT__pOS-fVqP8kpwco8Ly3ArVmeoph0YP5yy82CHoTNWHLrM2O5AdM-ZFYOwh23TJ7dCSZCzg/s640/comic_search.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The new Search feature!</td></tr>
</tbody></table>
<br />
Just type in a word or two and give it a try. If your search comes up empty, you'll get a confused-looking Business Frog to share in your puzzlement.<br />
<br />
You won't have to search for today's comic though. The link to it is right here:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><span style="margin-left: auto; margin-right: auto;"><a href="https://amphibian.com/524" target="_blank"><img border="0" data-original-height="452" data-original-width="854" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvqh-iPO5Oz4IerJJxKS1A6WPkFHCt8oQ1MxZ5R_l-KUJHL76YC4ABgEzFlnIUoDdLftkZc9WXEcxtp-NGy4r922WCkBY1ae0j53Q_Bu-3jqtx_I6q2JA3UIZLhGfDJCAA9W7oAw3aOaQ/s640/524.png" width="640" /></a></span></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://amphibian.com/524" target="_blank">Amphibian.com comic for 15 August 2018</a></td></tr>
</tbody></table>
<br />
<br />Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com4tag:blogger.com,1999:blog-6281943659089221239.post-58962541531002525122018-08-08T00:00:00.000-04:002018-08-08T00:00:03.411-04:00Minor Comic Style ImprovementsI've made a few minor adjustments to the comic's style coinciding with the restart. You might not notice unless you have a keen eye for detail.<br />
<br />
<h3>
Font Upgrades</h3>
<br />
First, I've set a specific font for the free-text in comic frames. The speech bubbles have always used <a href="https://fonts.google.com/specimen/Sniglet" target="_blank">Sniglet</a>, but any text that just floated there was actually set to Verdana with a fallback to sans serif. Sure, it looked fine for Windows users and didn't look too bad when I viewed them on Linux, but sometimes I'd be on a weird browser and get a weird font that looked...weird. I don't know why I never fixed this in the first three years of the comic, but when I set my mind on it I had a lot of trouble picking a free font that I liked. I ended up going with <a href="https://fonts.google.com/specimen/Ubuntu" target="_blank">Ubuntu</a>. Now the text should look consistent for all browsers on all operating systems.<br />
<br />
<div style="text-align: center;">
<b><i>Here's a sample of a comic in the original font:</i></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyoTbKoktUs3zCuR8DYmkcKNTV-7u1Hwr4rHFh_qgJw7yvfJA1P2iW0_334So_h4_D57wRMfxLvRzwgPYUkHDfXN1mW_I0MYsjEzTn8ghOCxVIhLJ6LBYc-FBh8h0ua3oQdekMXdzYD8k/s1600/521-old-font.png" imageanchor="1"><img border="0" data-original-height="452" data-original-width="854" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyoTbKoktUs3zCuR8DYmkcKNTV-7u1Hwr4rHFh_qgJw7yvfJA1P2iW0_334So_h4_D57wRMfxLvRzwgPYUkHDfXN1mW_I0MYsjEzTn8ghOCxVIhLJ6LBYc-FBh8h0ua3oQdekMXdzYD8k/s400/521-old-font.png" width="400" /></a></div>
<br />
<div style="text-align: center;">
<b><i>And here's that same comic using the new font:</i></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwaWZRhbb-IdNd-Vef3_uBVctdCx0ihyphenhyphenGvsPXrG4OC5m5KBrjxDdmF-wt0fWgRpZp_2WbEweEpngdUDUu8qF21Q_XJigXFP230SlzFbo4Hy4ln2iKdKzzwTUrfsHqhHyp5YzGCnnVnaBE/s1600/521-new-font.png" imageanchor="1"><img border="0" data-original-height="452" data-original-width="854" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwaWZRhbb-IdNd-Vef3_uBVctdCx0ihyphenhyphenGvsPXrG4OC5m5KBrjxDdmF-wt0fWgRpZp_2WbEweEpngdUDUu8qF21Q_XJigXFP230SlzFbo4Hy4ln2iKdKzzwTUrfsHqhHyp5YzGCnnVnaBE/s400/521-new-font.png" width="400" /></a></div>
<br />
The difference is subtle, but I think it's important. I'm much happier with the new font.<br />
<br />
In addition that font fix, I've added another font option for comics. Anything that's supposed to look hand-written will now use the <a href="https://fonts.google.com/specimen/Architects+Daughter" target="_blank">Architect's Daughter</a> font. It's clean and easy to read but also warm.<br />
<br />
<div style="text-align: center;">
<b><i>Here's an old comic with writing on the whiteboard:</i></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYnoqcy1V8GeSKT9cIXHqtnVfHbNNG1WrChF3R4j68EMh3HkXiqJPfLa_PBpChM8ezmEH8Iwf9UPYROVfMx6aG_1GBgCxLEYKWJ-BdVNe05bB4O6-yD2MmQNY5wgB4CPr-M_2hOt0iX-c/s1600/191.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="424" data-original-width="854" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYnoqcy1V8GeSKT9cIXHqtnVfHbNNG1WrChF3R4j68EMh3HkXiqJPfLa_PBpChM8ezmEH8Iwf9UPYROVfMx6aG_1GBgCxLEYKWJ-BdVNe05bB4O6-yD2MmQNY5wgB4CPr-M_2hOt0iX-c/s400/191.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<b><i><br /></i></b></div>
<div class="separator" style="clear: both; text-align: center;">
<b><i>And here's that same comic, updated for the new font:</i></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLiWgNahx7buOZFlOqVohJEiKDyFDqgqlTwnOBB9YXmlnkApoZfGmuB379Nlwdtb23jDHN04MmU_igbJcQVoU2lqgq8BrhT2gfXJR5419AgiqCJqw74gWchFHZbEztYZ32GZtiJVDhR58/s1600/191-new.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="452" data-original-width="854" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLiWgNahx7buOZFlOqVohJEiKDyFDqgqlTwnOBB9YXmlnkApoZfGmuB379Nlwdtb23jDHN04MmU_igbJcQVoU2lqgq8BrhT2gfXJR5419AgiqCJqw74gWchFHZbEztYZ32GZtiJVDhR58/s400/191-new.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: left;">
Mobile Theme Color</h3>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Mobile users may also notice another minor change that I've made. I set a "theme color" so the address bar will be green. Oddly enough, this is done via meta tags instead of CSS like I'd expected.</div>
<div style="text-align: left;">
<br /></div>
<blockquote class="tr_bq" style="text-align: left;">
<span style="color: #24292e; font-family: , "consolas" , "liberation mono" , "menlo" , "courier" , monospace;"><span style="white-space: pre;"><meta name="theme-color" content="#006600"></span></span></blockquote>
<div style="text-align: left;">
<span style="background-color: white; color: #24292e; font-family: , "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: 12px; white-space: pre;"><br /></span></div>
<div style="text-align: left;">
Here's what it looks like for me, in Chrome for Android:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc57wId7-BNmxXJrKan0b6BJUg-IUiPLBIFhsqm2-qykI7iLmt3n8o2nHPqAMJwkSvRlOgYPJseFu0wxiQbqATF2_kgDkXQ2VGT7Dwt1HGNvaVrJnlrU7dJMFz-MEPu9WCfWUYwfm6TgY/s1600/Screenshot_20180729-150736.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="846" data-original-width="423" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc57wId7-BNmxXJrKan0b6BJUg-IUiPLBIFhsqm2-qykI7iLmt3n8o2nHPqAMJwkSvRlOgYPJseFu0wxiQbqATF2_kgDkXQ2VGT7Dwt1HGNvaVrJnlrU7dJMFz-MEPu9WCfWUYwfm6TgY/s640/Screenshot_20180729-150736.png" width="320" /></a></div>
<br />
<br />
<h3>
More to Come</h3>
<div>
That's all for now, but there are more updates coming along with the new comics. Here's this week's:</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><span style="margin-left: auto; margin-right: auto;"><a href="https://amphibian.com/523" target="_blank"><img border="0" data-original-height="452" data-original-width="854" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZA0XGYBZMlF9Q4Q9Mb4K3E98x8IyPU98CDmcOIr_U8h_mQZF0PIHmbhBzbVjyeMjNBf2rMxCB5Uz3YpWKXihDGgPfwpWjDjTGJ83vzDT7fh2mB2ifa60JStLRjN2xZo99xeehXhrNdFY/s640/523.png" width="640" /></a></span></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://amphibian.com/523" target="_blank">Amphibian.com comic for 8 August 2018</a></td></tr>
</tbody></table>
<div>
<br /></div>
<br />
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com5tag:blogger.com,1999:blog-6281943659089221239.post-21821525658534922482018-08-01T00:00:00.000-04:002018-08-01T00:00:00.737-04:00Where Have I Been?It's been a while. I wrote my last blog post over a year ago, and the comics stopped shorty after the blogs. Some people emailed me to make sure I was okay, since there was no notice or anything. Stuff just stopped. So what happened?<br />
<br />
Lots of stuff. Life is complicated. My life is extra complicated.<br />
<br />
My wife and I are foster parents. We have three of our own children and at any time we could have any number of additional children. In March of 2017, while I was out of town for business, we were given a 3-month-old foster baby. We already had a toddler only 21 months old. It was just too much. I didn't have time to make comics anymore. I didn't have time to sleep anymore. I burned through my buffer of comics. I found some time to finish a bunch of drafts that I'd started, but I was unable to start anything new and in August of 2017 they just ran out.<br />
<br />
I didn't make an announcement or anything because I didn't know what to say. Was it only temporary? Was it the end? I didn't know.<br />
<br />
And then things continued to get harder. In October, was got an additional foster child - the baby's 10-year-old sister. I was pretty sure I'd never write another comic again.<br />
<br />
Until the spring of 2018. It turns out that babies grow into toddlers. They start sleeping through the night. I guess I should have remembered this fact about babies, but I was really really tired. I'm not saying that anything around here is easy, but I am somehow able to write comics again.<br />
<br />
A few of them anyway.<br />
<br />
I'm going to start slow. There's only going to be one new comic per week, on Wednesdays. And I don't know if I'll embed any games or anything in them for a while yet. But hey, I've got something. We'll see how it goes.<br />
<br />
Here it is, the link to the comic you've all been waiting for!<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><span style="margin-left: auto; margin-right: auto;"><a href="http://amphibian.com/522" target="_blank"><img border="0" data-original-height="452" data-original-width="854" height="337" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzjiCglslQa2tNuknkZxyBHIxT9j7mA5NC12oPJGpzm_NcQERnOhY9lKAnUeDf21OgQ_Y-HM4-gKIWTPn6SdfcrcphA0Twpv3LSqY4QRatOKqTC9Q6ENJH6uALsIBQoysjLieE93YjBLY/s640/522.png" width="640" /></a></span></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://amphibian.com/522" target="_blank">Amphibian.com comic for 1 August 2018</a></td></tr>
</tbody></table>
<br />
<br />Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com1tag:blogger.com,1999:blog-6281943659089221239.post-30173532666060985502017-04-30T12:43:00.002-04:002017-04-30T12:43:20.261-04:00New Webcomic AdIt's been a long time, but I've started advertising <a href="https://amphibian.com/" target="_blank">Amphibian.com</a> on another webcomic list site. Actually, <a href="http://www.thewebcomiclist.com/" target="_blank">The Webcomic List</a> site. After successfully getting my comic to show up as updating properly on that site after all these years, I decided to try their sponsorship deal where you can get your comic's little square icon in the banner for a month. I'd been seeing pretty good traffic from that list already just from fixing the update status, so we'll see how this goes.Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-55662044667880458992016-05-16T00:00:00.000-04:002016-05-16T00:00:17.390-04:00CSS3 Smoke Animation EffectThe <a href="http://amphibian.com/326" target="_blank">comic today</a> uses quite a bit of CSS3 animation. This is a rather new thing for me - I've been using mostly JavaScript-powered animations on Amphibian.com since it started. But after I did the rain animation using CSS back in March (<a href="http://amphibian.com/298" target="_blank">see the comic here</a>), I've been warming up to the idea of more CSS and less JavaScript to move things around.<br />
<br />
For this task, I wanted to make some animated smoke come out of the frogs' rocket ship before the launch. My style is mostly just simple geometric shapes arranged to look like things, so using circular DIV elements to look like puffs of smoke was fine with me. I found a great starting point by <a href="http://codepen.io/verlok/" target="_blank">Andrea Verlicchi</a> on <a href="http://codepen.io/verlok/pen/nLsdB" target="_blank">CodePen</a>, and then modified it for my comic.<br />
<br />
Here's the basic idea - puffs of smoke emanate from a given source element. They move downward and off to the side while fading away.<br />
<br />
The puffs of smoke will be represented by rounded SPAN elements, with this CSS applied to them:<br />
<br />
<pre class="brush: css">span.smokepuff {
display: block;
position: absolute;
bottom: -35px;
left: 50%;
margin-left: -20px;
height: 0px;
width: 0px;
border: 35px solid #4b4b4b;
border-radius: 35px;
left: -14px;
opacity: 0;
transform: scale(0.2);
}
</pre>
<br />
The above styling just makes them round, grey, and positioned absolutely in their container. I also have two animation keyframes defined, one for the down-and-left movement and one for the down-and-right movement:<br />
<br />
<pre class="brush: css">@keyframes smokeL {
0% {
transform: scale(0.2) translate(0, 0);
}
10% {
opacity: 1;
transform: scale(0.2) translate(0, 5px);
}
100% {
opacity: 0;
transform: scale(1) translate(-50px, 80px);
}
}
@keyframes smokeR {
0% {
transform: scale(0.2) translate(0, 0);
}
10% {
opacity: 1;
transform: scale(0.2) translate(0, 5px);
}
100% {
opacity: 0;
transform: scale(1) translate(50px, 80px);
}
}
</pre>
<br />
The above keyframe definitions define an animation that will move the smoke puffs lower by 80 pixels and 50 pixels to either side while at the same time scaling them up and fading them out. It defines 3 steps: 0% (the start), 10% (moved a little down), and 100% (moved completely down and over). There's one for the left, <b>smokeL</b>, and one for the right, <b>smokeR</b>.<br />
<i><br /></i>
<i style="background-color: #ffe599;">Note: if you care about being compatible with slightly older browsers, you would want copies of these with @-moz-keyframes and @-webkit-keyframes as the names as well as adding -moz-transform and -webkit-transform to them all! I left that out here to keep the example simpler!</i><br />
<i><br /></i>
I said this was pure CSS3 animation, but there's still a little JavaScript involved. It doesn't really do the animating, but I use some code to generate the puffs in the first place. Something like this:<br />
<br />
<pre class="brush: js">function createSmoke(time, num) {
var timeGap = (time / num);
for( var i = 0; i < num; i++) {
var delay = (timeGap * i) + 's';
var aniName = "smokeL";
if (((i+1) % 2) == 0) {
aniName = "smokeR";
}
var aniStyle = "animation: " + aniName + " " + duration + " " + delay + " infinite";
$('#smoker').append('<span class="smokepuff" style="' + aniStyle + '"></span>');
}
}</pre>
<br />
When this function is called, you give it the length of the animation and the number of puffs of smoke you want. It figures out how much of a delay there should be between each puff's animation starting based on those two values. For example, if you want the animation to run 5 seconds and have 10 puffs of smoke, the first puff would have <i>no </i>delay, the second would have a delay of <i>( 5 / 10 ) * 1</i>, the third a delay of <i>(5 / 10 ) * 2</i>, and so on. In this example, that just means add a half-second delay for each puff you generate. Also, each time through the loop, it alternates between the <i>smokeL </i>and <i>smokeR </i>animations so that every other puff moves in the opposite direction. One final piece of the total animation style is to set the repeat-count to <i>infinite</i>, so the puffs keep on coming! The function generates new SPAN tags with these animation styles applied and appends them to the parent element, which here is named <i>smoker</i>. It's just a DIV somewhere on the page - all the puffs of smoke will appear to come out of it.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSotNHUEP9q2CoCXvbM7-W-9aoiWaXiBa9SlcjkOKk6-5EhHA6NWGrgN5VI2-RXiriqIhJzvDJG86lXNWBghISy4k-CHV6JXmhbEYCZupQrdS5BrECvxNJBaDL0BXlY5LY8l_YLRWhyphenhyphenMQ/s1600/smoke-animation.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSotNHUEP9q2CoCXvbM7-W-9aoiWaXiBa9SlcjkOKk6-5EhHA6NWGrgN5VI2-RXiriqIhJzvDJG86lXNWBghISy4k-CHV6JXmhbEYCZupQrdS5BrECvxNJBaDL0BXlY5LY8l_YLRWhyphenhyphenMQ/s1600/smoke-animation.gif" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The finished animation. Don't miss it!</td></tr>
</tbody></table>
<br />
I think the effect turned out great. Even though I used a little JavaScript to create the elements, doing all the animation with JavaScript would have been much, much more complicated. I may consider replacing all the old JavaScript-powered animation on Amphibian.com with CSS animation, and fix up my animation editor to go with it!<br />
<br />
Now don't miss the smoke effect in <a href="https://amphibian.com/326" target="_blank">today's comic</a>! If you're reading this on the publication day (16 May 2016) the countdown to launch will be live! That means the last frame of the comic will change and do different things right up to the launch time! Keep watching it!<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://amphibian.com/326" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijWSIPJKExcYbuYfLm1V95nGfWASHSKVTp_ZFA-VP7Vd8tsDEcSNq1ISBlJuJcC4oIVk0KfNDGXWSleiw6vcV9EBW2EbaTewDNjb5FMvF8rpNMeo_uZLXDlUAwDGqpX4zciOwiHGSj_Z8/s400/326.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://amphibian.com/326" target="_blank">Amphibian.com comic for 16 May 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com47tag:blogger.com,1999:blog-6281943659089221239.post-16882145882116616962016-05-09T00:00:00.000-04:002016-06-10T07:25:21.276-04:00Add Gamepad Support to a Phaser Game<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAqOrpArNGG5RJY2EGgDRnN8puPRgJ6iBkF_Q7855YzxckRwZn77-Nv1qwzDO6CZIEOHnIQmS_itKzNxCXFpft5jTGSpU7tXK5P0XseLpbhyphenhyphenk1-rLCxxCzFZXFN5EGWja10i9aCiCj2ig/s1600/gamepad.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAqOrpArNGG5RJY2EGgDRnN8puPRgJ6iBkF_Q7855YzxckRwZn77-Nv1qwzDO6CZIEOHnIQmS_itKzNxCXFpft5jTGSpU7tXK5P0XseLpbhyphenhyphenk1-rLCxxCzFZXFN5EGWja10i9aCiCj2ig/s320/gamepad.jpg" width="320" /></a></div>
It seems like I haven't written a blog post in forever! It's actually been less than 2 weeks. Right before I took a break, I wrote a little about my new NES-style Bluetooth gamepad. I've been trying off-and-on ever since then to get my 8-bit style platformer to work with it, and today I finally had some success!<br />
<br />
First of all, it needs to be said that support for gamepads in the browser is very inconsistent. The <a href="https://www.w3.org/TR/gamepad/" target="_blank">W3C's Gamepad API</a> document is still a working draft after all these years (I first <a href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" target="_blank">read about it</a> and tried it out in 2013). It seems as though Mozilla and Google have some different opinions on how it should work, because the way you interact with the devices varies significantly between Firefox and Chrome. <a href="http://phaser.io/" target="_blank">Phaser</a> provides gamepad support through the <a href="http://phaser.io/docs/2.4.7/Phaser.Gamepad.html" target="_blank">Gamepad object</a>, but the documentation carries a warning about the volatility of the specification.<br />
<br />
Here's what I learned when I tried to use it...<br />
<br />
I started with some of the examples on Phaser's site. They worked, <u>most</u> of the time. Let me explain. In theory, working with a gamepad in Phaser is simple. You get a gamepad object, setup a callback to handle the detection of a gamepad device, and bind to buttons in that callback. Then you start the gamepad polling.<br />
<br />
<pre class="brush: js">function create() {
// ... setup stuff ...
var jumpButton = null;
controller = game.input.gamepad.pad1;
controller.addCallbacks(this, {
onConnect: function() {
// you could use a different button here if you want...
jumpButton = controller.getButton(Phaser.Gamepad.BUTTON_1);
}
});
game.input.gamepad.start();
// ... other stuff ...
}
function update() {
// ... other stuff ...
if (jumpButton.isDown) {
// jump code goes here!
}
// ... other stuff ...
}
</pre>
<br />
Much like you do for keyboard input, you can set up the buttons you want to listen for in <i>create</i> and then perform actions based on their state in <i>update</i>. And this works pretty well - in Firefox. Chrome, on the other hand, has some issues. Phaser's example code, much like my example above, works most of the time in Chrome when the code gets executed very quickly after the page loads. But if you put enough setup code in front of your gamepad initialization you'll be wondering, like I was, why your gamepad never connects.<br />
<br />
I had to dig into the Phaser code in order to figure this out. It works consistently in Firefox because Firefox waits until the first time a button is pressed on a gamepad before it emits a <i>gamepadconnected</i> event from the window object. Phaser catches that and sets everything up, calling the <i>onConnect</i> function when complete. In Chrome, however, gamepads just show up magically at some point after the page is loaded, in an array-like object accessed by calling <i>navigator.getGamepads()</i>. Phaser checks this list constantly, and when things appear for the first time, it makes all the internal setup calls. <b>And right there's the problem!</b> If the gamepads appear <i>BEFORE </i>my <i>onConnect </i>callback function is set up, I missed the boat. A default, no-op callback got executed instead and my gamepad buttons never get set up!<br />
<br />
There was no work-around for this that I felt was acceptable, so I actually forked Phaser and fixed the problem in the Gamepad object's code. It was a fairly simple fix - I just don't start polling for those gamepad objects until after the call has been made to <i>game.input.gamepad.start().</i><br />
<br />
I forked off of version 2.4.7 and submitted a pull request, so hopefully my fix makes it in to the next Phaser release and the rest of you won't have to deal with this problem like I had to! If you can't wait, try <a href="https://github.com/cwleonard/phaser/tree/gamepad" target="_blank">using my fork and gamepad branch</a>.<br />
<blockquote class="tr_bq">
<b><i>UPDATE: My pull request was merged, but not in time for 2.4.8. Look for this fix in the 2.4.9 release!</i></b></blockquote>
If you're just interesting in playing the game I've been working on, you can do that here: <a href="http://amphibian.com/eight-bit" target="_blank">http://amphibian.com/eight-bit</a>. The full source code is available <a href="https://github.com/cwleonard/eight-bit" target="_blank">on GitHub</a>. If you're just interested in viewing today's comic, you can do that here:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://amphibian.com/323" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0usiZL9R7vdKHOlVHzuoO4DEyn322cZwk6dxAZfyj0_b_DWi8OnbHb8LkcR1sUWRUYVM1JZ8Zpn4wa5Fwt_33tV_lXK4P21AmVwxmKW8hvFTrigP8_DJ9AvJfy62gLaX-Qmi5MH-Pgz4/s400/323.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://amphibian.com/323" target="_blank">Amphibian.com comic for 9 May 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com4tag:blogger.com,1999:blog-6281943659089221239.post-29058834042942262192016-04-27T00:00:00.000-04:002016-04-27T00:00:24.993-04:00The Most Awesome Thing on the InternetHere it is, people. The most awesome thing on the Internet (besides my frog comics) - a <br />
Mariachi Cover of the Dark World theme from <i>The Legend of Zelda: A Link to the Past</i>.<br />
<br />
<br />
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/R8zedXN_bdQ" width="560"></iframe><br />
<br />
<div style="text-align: left;">
You can thank me later (by viewing and sharing today's comic!). Oh look, here it is...</div>
<div style="text-align: left;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://amphibian.com/318" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBg0aGD6XH8t9QNdP_uEOuPRJM2YDxTov0PN7ThddekxkDLDC3N-CunVgBqy2HgSY5rK4JAfJCk9kEKu3PjDQ6TkR4wkCUkc3BdBp_5zZJ31MPw8KRdlMydgsRlCtrV9Zhcyp43SRzkCI/s400/318.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://amphibian.com/318" target="_blank">Amphibian.com comic for 27 April 2016</a></td></tr>
</tbody></table>
</div>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-8102137020412235122016-04-25T00:00:00.000-04:002016-04-25T07:18:24.787-04:00Review of Xgaming's NES-style Wireless GamepadLate last week I received my new Bluetooth <a href="http://shop.xgaming.com/collections/arcade-joysticks/products/nes-wireless-gamepad-ios-android-mac" target="_blank">wireless gamepad from Xgaming</a>. I was really excited about this new product. I've had one of their arcade joysticks for years and found it to be an excellent piece of hardware that fully lives up to the high expectations set for it on their web site. I was certain that this new wireless gamepad, a bit of a departure from their existing product line, would not disappoint me.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim50AhyefX_Tg2e9x2xh0zW3glVuF53BegC2traWfD3GiNvdg8re0875zppQ8FWwX_3xrNs6TkhrsFXrUQe5-pPo4gVal-9rRxCBNHbkGlvq_eYEhlNOkx2yblFhC4DOl99Q-K-8n3AlY/s1600/IMG_20160424_214901998.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim50AhyefX_Tg2e9x2xh0zW3glVuF53BegC2traWfD3GiNvdg8re0875zppQ8FWwX_3xrNs6TkhrsFXrUQe5-pPo4gVal-9rRxCBNHbkGlvq_eYEhlNOkx2yblFhC4DOl99Q-K-8n3AlY/s640/IMG_20160424_214901998.jpg" width="640" /></a></div>
<br />
So, what do I think now that I've had a few days to play with it?<br />
<br />
Let's start with my initial impressions. It was a little smaller than I had expected it to be. It doesn't really give dimensions anywhere on Xgaming's site (as far as I could tell) but the unit is only 5.125 inches wide and 2.5 inches tall. It's slightly over half an inch thick (not counting the sticks and buttons). For me, the small size makes hitting both sets of top trigger buttons awkward but maybe I just need to get used to it. Most games I play only need one set of top triggers anyway. Besides that, the position of all the buttons and sticks is excellent. It weighs only 3 ounces, but feels very solid. The buttons and D-pad are very firm and have a wonderful feel to them.<br />
<br />
Technically, it has been functioning very well. I had no problems pairing it to my Windows 10 PC as a Bluetooth game controller, but it did seem to lose its pairing once (there are colored LED lights on the bottom which indicate things like that - flashing blue means ready to pair). I'm not sure if it was the device's fault or mine - I may have been holding down one of the settings buttons inadvertently while powering it on. I'll withhold judgement on that issue until I see if it repeats. There were no issues setting up button mappings in my emulator software either. It all worked very well.<br />
<br />
Playing games with it has been very enjoyable so far. The button response is much better than my old SNES-style USB game controller. I honestly haven't liked a PC game controller this much since my <a href="https://en.wikipedia.org/wiki/Gravis_PC_GamePad" target="_blank">Gavis PC GamePad</a>.<br />
<br />
The device is currently selling for about $45. If you love playing emulated NES and SNES games as much as I do, I believe you'll find it to be well-worth the money.<br />
<br />
The only question left might be, does it work in web-based HTML5 games such as the 8-bit style platformer I've been working on? The answer is...maybe. Web browser gamepad support is still weird. Phaser has an API for it, but so far I've found it difficult to work with. I'll keep trying and maybe have something to report next week.<br />
<br />
Until then, I've got more comics for you to enjoy!<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://amphibian.com/317" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAC9-SX-6nbqGnQ3IYt9YEOJAsyQzlsBaCsnsYI_BZ5ZFKSRPZ-2cPXP-HkGb6kf9v4lV-yEdsIzWoUlBIHD4MfPY4beCTkdG9crEN_MUOb6bjJXTx1a4Dtt-RuTAmDnIga5C1KMWmri0/s400/317.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://amphibian.com/317" target="_blank">Amphibian.com comic for 25 April 2015</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-34376496480467463012016-04-22T00:00:00.000-04:002016-04-22T00:00:22.059-04:00Answering QuestionsTonight I'm working on answering interview questions. Yes, I'm being interviewed by <a href="http://best-webcomics.com/" target="_blank">Best WebComics</a>, a site that promotes the discovery of new webcomics. Their questions are rather unique so the finished interview should be a good read. I also get <a href="https://amphibian.com/" target="_blank">Amphibian.com</a> promoted on their site for a week next month.<br />
<br />
I've been working on the comics for over 2 years now. The first comic was published in August of 2014 but I actually started working on it in January of that year. It took almost 8 months to get things ready. I had to develop the web page stuff, the back-end application that runs everything, make the editor for the comics, and write a bunch of comics. Looking back on some of my early work, I think I've gotten a lot better.<br />
<br />
So when you view today's comic, why don't you click the link to go back to the first comic too? Even if you've been reading them from the beginning, you've probably forgotten the early ones.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://amphibian.com/316" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqrjMAYLEhZqY0sQuprK3GxEKEQR1fdGQwBjEbHgFKdz1Sp-uNi3AJ5FiaimyPB2h-mkHoUqmk8sNqX0cAS1ptdFX-7sYKnUtlcvBBicW6kYbtPxtKst7JI249yhMwwr0mDQ3eUAtVF9Q/s400/316.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://amphibian.com/316" target="_blank">Amphibian.com comic for 22 April 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com1tag:blogger.com,1999:blog-6281943659089221239.post-66070378556204200152016-04-20T00:00:00.000-04:002016-04-20T00:00:09.687-04:00Read Another Blog TodayAs I said last week, I'm not spending as much time writing this blog as I normally have been. I need a few weeks off from it due to the demands of the real world. But that doesn't mean that you, the reader, have to suffer. Please take the time you would have normally spent reading my inane ramblings to read someone else's.<br />
<br />
Here are some excellent options:<br />
<br />
<span style="font-size: x-large;"><a href="http://darylwiest.blogspot.com/" target="_blank">Smoke in the Cinderhaze</a></span><br />
<blockquote class="tr_bq">
I'm not exactly sure what a "Cinderhaze" is, but I suspect that it's a word used to describe Cinderella's mental state before she has her first cup of coffee in the morning. Either that or some kind of sailor thing. This tech blog is written by my friend Daryl Wiest, and he doesn't update it often enough. Go leave him some comments about that.</blockquote>
<span style="font-size: x-large;"><a href="https://davidwalsh.name/" target="_blank">David Walsh Blog</a></span><br />
<blockquote class="tr_bq">
An excellent tech blog that covers a variety of topics, but often covers JavaScript and front-end stuff. Also some excellent career advice sometimes. This David Walsh guy is fairly famous so you might have heard of him already. If not, you should.</blockquote>
<br />
While you wander off to read those, don't forget to read today's comic! It's #314, which is a lower number than Monday's comic (#315). That kind of thing hasn't happened in a while. I move the publish dates around from time to time after I make them. I hope it doesn't bother anyone.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://amphibian.com/314" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVNmEyJTHCqVLicXhRV7LhAcX0N8__wTgTZaWPpWCUus3Ad6vSsJuaRhhn4cSvncOF-nQtwney3mE5vLJ8wsyx1lg03ZrSmu8fBAPCQFZv_doxP7dMvOULZNf1Q16Xm1m1fvxUjvXnvAU/s400/314.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://amphibian.com/314" target="_blank">Amphibian.com comic for 20 April 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-9139508802651922912016-04-18T00:00:00.000-04:002016-04-18T00:00:18.448-04:00Better Static Images for Amphibian.com<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy3xshHp5qWgCBUAE1tCvSKAN2w9Xu5kP650wR9-rKQaVD-k_E7uuSVWOIvfOcwFIWIPh0wv9mXHwT_NwwyTa_SD-zK5z7Fpe6q8V6Jh33_Zep9Qy2TMI8yTU9BkWJbmEh0W_O_m2eCWU/s1600/294-full.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy3xshHp5qWgCBUAE1tCvSKAN2w9Xu5kP650wR9-rKQaVD-k_E7uuSVWOIvfOcwFIWIPh0wv9mXHwT_NwwyTa_SD-zK5z7Fpe6q8V6Jh33_Zep9Qy2TMI8yTU9BkWJbmEh0W_O_m2eCWU/s640/294-full.png" width="300" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The new, improved version of the image for a recent comic.</td></tr>
</tbody></table>
As I mentioned last week, I have been working to close <a href="https://github.com/cwleonard/comic/issues/7" target="_blank">Issue #7</a> 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).<br />
<br />
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 <a href="http://www.topwebcomics.com/" target="_blank">TopWebcomics.com</a> 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.<br />
<br />
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 <b><i>/basic/[comic-number]</i></b> to <b><i>/[comic-number]&b=1</i></b>. 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.<br />
<br />
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 <a href="http://phantomjs.org/" target="_blank">PhantomJS</a> to <a href="http://thoughts.amphibian.com/2014/08/phantomjs-for-image-capture.html" target="_blank">perform the image capture</a> and it runs on the server, so that was a simpler fix than I initially thought that it would be.<br />
<br />
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.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://amphibian.com/315" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZXY4d46KIAvXcbNvOmy98qGQyVK287LX8W4oa-rhZB2y5ywJ5h4-u022Pg32UAii9dTvDuuHxfT2Xh9hgNso3uQiXxERJLdUU-X2zc40ZaBIhfIswy4hNrJEHynabdoFQXzjdrS0gf9M/s400/315.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://amphibian.com/315" target="_blank">Amphibian.com comic for 18 April 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-47560905768516577302016-04-15T00:00:00.000-04:002016-04-15T00:00:08.699-04:00Basic Images are ComplicatedI sat down tonight thinking that I would quickly resolve <a href="https://github.com/cwleonard/comic/issues/7" target="_blank">Comic Issue #7</a>, 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.<br />
<br />
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. <i><a href="http://thoughts.amphibian.com/2014/08/phantomjs-for-image-capture.html" target="_blank">See this post on how I generate the static images</a></i>. 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.<br />
<br />
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...<br />
<br />
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 <a href="https://amphibian.com/313" target="_blank">today's comic</a>. It's funny, and that's no accident.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://amphibian.com/313" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5HrDIo2pE1EhnycSCg3tzrOTCS15oHQzNEAlWcDAaWEVDrn5d8SLyvm1ypEwb6D20rHn28t2-VPWax3bpMjh9xkOJjJa71ad9kICNtGsOvQF_dwt9wawqdecEDCQeuBvIRy-XrIBxBQc/s400/313.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://amphibian.com/313" target="_blank">Amphibian.com comic for 15 April 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-43664635038724132012016-04-13T00:00:00.000-04:002016-04-13T00:00:14.471-04:00Use Tiled's Map Background Color in PhaserI actually did some work on my <a href="http://phaser.io/" target="_blank">Phaser</a> platformer this week! Yeah! I resolved an issue that was submitted on <a href="https://github.com/cwleonard/eight-bit" target="_blank">GitHub</a> concerning the water physics in Level 7, and I started thinking some more about another thing which had been bothering me.<br />
<br />
Even though I can set a map's background color in the <a href="http://www.mapeditor.org/" target="_blank">Tiled map editor</a>, Phaser doesn't parse that property when it builds a Tilemap object. I had been keeping track of the background colors for each level separately, but that violates one of my principles - the map editor should be the one and only source of data about each level map.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEPVvtpuM3xmEYbh5vvXcg2KWXIT7tL5gb-9xBGf3Bj9hjbks2PoZPuizDh5txjbw94paI6HnD64-lej2BIWEJ64pe35_rGTXNEyXmgNQLdiDefedlajd36ApbHnqJyTG2jG3TsFW5DQ0/s1600/map-background-prop.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEPVvtpuM3xmEYbh5vvXcg2KWXIT7tL5gb-9xBGf3Bj9hjbks2PoZPuizDh5txjbw94paI6HnD64-lej2BIWEJ64pe35_rGTXNEyXmgNQLdiDefedlajd36ApbHnqJyTG2jG3TsFW5DQ0/s400/map-background-prop.PNG" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The Background Color map property in Tiled</td></tr>
</tbody></table>
<br />
I was able to make a few minor changes to work around this limitation. In the stage's create function, I first pull the tilemap data manually for the map's key. This is the same data that is used behind-the-scenes when you call <i>game.add.tilemap(key)</i>.<br />
<br />
<pre class="brush: js">function create() {
// get the asset key for this level
mapKey = "key-for-this-level";
// pull the tilemap data from the asset cache
var tilemapData = game.cache.getTilemapData(mapKey);
// all the data from Tiled is in the data field
var mapData = tilemapData.data;
// set the stage's background color from the map's background color.
// note that Tiled didn't capitalize the "c"...
game.stage.backgroundColor = mapData.backgroundcolor;
// go about making the make the normal way
var map = game.add.tilemap(mapKey);
map.addTilesetImage("ground", "tiles");
// ... the rest of the stuff ...
}
</pre>
<br />
The tilemap data object returned from the asset cache has itself a <i>data </i>field, which is essentially the Tiled JSON map object. The <i>backgroundcolor </i>property is there can can be used to set the <i>backgroundColor </i>property for the stage. Remember, you can <a href="https://github.com/cwleonard/eight-bit" target="_blank">view the full source code</a> to this game in its public repo on GitHub!<br />
<br />
It really was that simple. In only a few minutes, I feel like I accomplished something on this game for the first time in a month! It doesn't take much to make me feel good about my achievements. Now, go read <a href="https://amphibian.com/312" target="_blank">today's comic</a> and feel good about that achievement!<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://amphibian.com/312" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmujT7qup-zb88WBAaYX2mHXM1-IcCjTq2lAUPb9Awfbgc0deTBrj1Ei-MYRlrN7aVkU8U0bBE-vIEd4ZR3GwcIe188uIof30sENgw9z07rmB3OL0Z4rd4aGg38sB3ymsTL3oiAwpvmt4/s400/312.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://amphibian.com/312" target="_blank">Amphibian.com comic for 13 April 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-60706797407982379732016-04-11T00:00:00.000-04:002016-04-11T00:00:13.732-04:00A Little BreakOver the last month, regular readers here might notice that the stresses of travel and a new job have greatly limited my ability to do interesting things and blog about them. It's just been too hard to keep up both the writing of the blog and the writing of the comic. I've decided that the comic is more important and must continue on its regular publication schedule, while blog posts might get a little more irregular.<br />
<br />
I haven't forgotten about my 8-bit-style Phaser platformer, and I will be finishing it up over the next few weeks - I just might have one blog post per week instead of three.<br />
<br />
I will try very hard to get back on my old schedule as soon as possible. And speaking of things being back on schedule, look what's on Cartoon Network's schedule: a reboot of the Powerpuff Girls! Along with Dexter's Laboratory, the Powerpuffs were one of my favorite shows back when I was in college. My wife, who was known to watch them with me back in those days, even has the <i>Heroes and Villians</i> Powerpuff Girls soundtrack CD somewhere in this house. We added it to our iTunes library years ago but no longer have any iDevices so I haven't heard it in a while...<br />
<br />
Anyway, to promote the new series Cartoon Network put together this <a href="https://www.powerpuffyourself.com/" target="_blank">Powerpuff Yourself</a> thing and I used it to make this Powerpuff version of my wife:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKa4uiXD7Wxo-7eZHWGyJ8xJHGSooLJ0kE-GeMUcJGBdVWZdzd6jxgY5jsGbCz6aYhK4N-ob2ihrjK22c-zXUgQvMUAzkyBSlyuGuGq4It0TSPJr4m5ACHPAXwmtTlwndTrUoZ4PaaCoY/s1600/animated.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKa4uiXD7Wxo-7eZHWGyJ8xJHGSooLJ0kE-GeMUcJGBdVWZdzd6jxgY5jsGbCz6aYhK4N-ob2ihrjK22c-zXUgQvMUAzkyBSlyuGuGq4It0TSPJr4m5ACHPAXwmtTlwndTrUoZ4PaaCoY/s400/animated.gif" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Powerpuff Rebecca, with her super-powered latte.</td></tr>
</tbody></table>
<br />
It looks just like her, trust me.<br />
<br />
And you might say that the art style of the Powerpuff Girls influenced my own work. You might be right. I loved the art in the original series. The new one is very similar, but it's not <i>quite </i>the same. Or maybe it is and I've just gotten older.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://amphibian.com/311" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSQaH4j6Gfyb4Q2MNvXnEA7Krqwr3gHIbmfOEHJb14OgqDRPuJPHV_hSPNsHBxV43RTRdaxAMv1e-n8M6n6wq1jR1fSt3mdH1sxFXpof92-IcaKSeslvF8NnXVJjpDh8Icz2F2fXmdF0M/s400/311.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://amphibian.com/311" target="_blank">Amphibian.com comic for 11 April 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com1tag:blogger.com,1999:blog-6281943659089221239.post-20775795402517423082016-04-08T00:00:00.000-04:002016-04-08T00:00:01.096-04:00New Things to LearnI'm back home in Pennsylvania after spending 4 days in Virginia learning about my new job. I'll be working with some technologies that I haven't really used much before, so maybe I'll have some new stuff to share here soon. Angular is currently at the top of my list of things to learn better.<br />
<br />
So here's another super-short blog post followed by a link to another super-entertaining comic. Well, at least mildly-entertaining.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://amphibian.com/310" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDp7h-toZ2mJeAfjYK1HHJca-3toZiIsKe0LDunCSqurOD2GnnPoDRueZDB9BN3lnzSV8nEuiNutV1ZU8N0ua-MHromWwBopFmu1U7OfSiRc3XH3FbBOOpYNtkziXhj_tnK7MJNngRaU/s400/310.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://amphibian.com/310" target="_blank">Amphibian.com comic for 8 April 2015</a></td></tr>
</tbody></table>
<br />Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-57909782270571159782016-04-06T00:00:00.000-04:002016-04-06T00:00:24.068-04:00I'm Tired of HotelsSo here I am in another hotel. In the past 5 weeks, I've been to Texas, Florida, and Virginia. I don't mind a business trip every now and then, but this has been difficult. This week I'm in Virginia because I'm starting a new job and need to learn some things before I go back home to Pennsylvania. So far I've learned that I am really tired of hotels.<br />
<br />
They've all been nice hotels. There's nothing really wrong with them. There's just something wrong with me. A lot of people travel much more than I do, and I am starting to think those people are crazy. Back six months ago, I was able to do some work on my comic and some games while in a hotel room. Now I can't even get Eclipse to start. I once wrote 2 blog posts per night in my hotel. Now I forget that I even have a blog until the last minute. I may have to take a hiatus from the blog writing for a while so that I don't get behind on the comic too. I haven't decided yet.<br />
<br />
My friend <a href="http://darylwiest.blogspot.com/" target="_blank">Daryl</a> tries to help keep me working on things by writing <a href="https://github.com/cwleonard/eight-bit/issues" target="_blank">issues on GitHub</a> for my unfinished games. Maybe if more people did that I would be forced to work on them more. Why don't you go read my comics and play some of my games right now and write an issue for a bug fix or improvement on one of them? That would really help me out. It would help more if you did the fix yourself and just sent the fix...<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://amphibian.com/309" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgByWmaahdb9bjb7dMkp6mEET8Yd3n24J4qRSCpXtWLYWSmTpTE1zI7YkP-V-Qe3W2_6QSlP4RKzqpYyzBVh1GyU6PxiK50q4elVfDXHG6aJzLKU9CQCa-MCPQCwOeM47dy_pNh4l8eLOU/s400/309.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://amphibian.com/309" target="_blank">Amphibian.com comic for 6 April 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com1tag:blogger.com,1999:blog-6281943659089221239.post-59678348382845611172016-04-04T00:00:00.000-04:002016-04-04T00:00:18.173-04:00New Job TodayThe main reason that I've been under too much stress to work on anything lately is because I'm starting a new job today. Yes, after nearly 15 years at the same one, I recently resigned. I've worked for the same company since I graduated from college, so this is a very new experience for me. Lots of stuff is changing. And I hate change.<br />
<br />
So once again, I have nothing to share in this blog. I'm sorry. Hopefully in no more than a few weeks I'll be settled in to a routine and can go back to gleefully making frog games in my spare time. But for today, all I have is today's comic. It's the first of a short series.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwjrt8CHDTHyEG932_hyphenhyphenH2PmgMXbOGciM_hYXo9bML4SUHuykJDyq3uS2yHea1zkG6pLOA03u4Z2Srt8s6WiegLPUVv3crRfqWpeim1iyeyitV5XNazuRSskwwDcZdPeeD7D7HDZezIOQ/s1600/308.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwjrt8CHDTHyEG932_hyphenhyphenH2PmgMXbOGciM_hYXo9bML4SUHuykJDyq3uS2yHea1zkG6pLOA03u4Z2Srt8s6WiegLPUVv3crRfqWpeim1iyeyitV5XNazuRSskwwDcZdPeeD7D7HDZezIOQ/s400/308.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://amphibian.com/308" target="_blank">Amphibian.com comic for 4 April 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-40233884705341746392016-04-01T00:00:00.000-04:002016-04-01T00:00:02.188-04:00April Fools!Things are still out of control here. I've had no more time to work on that Science Frog game this week, and April Fools Day caught me off-guard. Making a comic for today proved more time-consuming that it should have been, and in the middle of it all I got sucked into a Google code challenge thing that ended up not even working! Google's fault, not mine (pretty sure).<br />
<br />
What? Yeah, so it turns out that <a href="http://fortune.com/2015/08/27/google-has-a-very-clever-recruiting-trick/" target="_blank">Google does some recruiting by looking at the kind of things for which you search</a>. I don't claim to know their algorithm for identifying potential candidates, but if you are searching for computer science terms you might get an invitation to play a game in your search results. It happened to me Tuesday night, and despite the obvious parallels to <a href="http://www.imdb.com/title/tt0086567/" target="_blank">War Games</a> and the fact that I was really tired when it happened, I agreed to play the game.<br />
<br />
I was given a programming challenge and a Unix-like terminal-in-a-web-page in which to write some code and test it before submission. I wrote up a solution within a few minutes, but got a very unhelpful error message when I attempted to verify it against the test cases. I was so certain that my solution was correct, but I was too tired to look at it any more. I left the window up and came back to it the next day after work.<br />
<br />
When I sat down, the first thing I did was just try to verify again. This time, even though I hadn't changed anything, I got a valid response. I was surprised so I verified again. This time I got an error response: <b><i>400 bad request</i></b>. I tried again. That time it worked. Obviously, something was going wrong intermittently on the Google side of the test. Knowing that my solution was most likely correct, I perhaps foolishly submitted it. Did the submit work? No, 400, bad request. I hit submit again. Same thing. I tried verify again. No. And again. No. It never worked again after that. Oh well, it might have been fun to continue with it...but I had to eventually close the window.<br />
<br />
I'm not even kidding. This is no April Fool's joke. It really happened.<br />
<br />
Know what else happened? I wrote <a href="https://amphibian.com/307" target="_blank">this comic</a>. <i>No picture link today. It just wasn't working. Just like <a href="http://amphibian.com/149" target="_blank">last year's April Fools comic</a>, these "special" ones break my automated image capture.</i><br />
<br />
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-77771094589579696322016-03-30T00:00:00.000-04:002016-03-30T00:00:15.407-04:00Dependency CostOver the weekend I was alerted to a bug in the Amphibian.com web application by a reader. For him, the "previous" and "next" navigation links would not work. Clicking on them put the page into endless "Grabbing Frogs" mode and never displayed another comic.<br />
<br />
Fortunately, the issue was not difficult to correct. Since Amphibian.com is (almost) a single-page-application, each time a new comic replaces the currently visible one I have to generate a new Pinterest button for the correct comic. Yeah, you're probably wondering, "why a Pinterest button?" I don't know. It seemed like a good idea at the time...<br />
<br />
I'm generating the new button by calling a slightly undocumented function in the Pinterest code. I don't think they intended for it to be used on pages quite like mine. The problem arises when the function is unavailable. Maybe Pinterest is blocked. Maybe Pinterest is down. Maybe certain browsers actually download an older version of the code where that function doesn't exist. Doesn't matter why - the end result is the same. Without that function, an error occurs in my JavaScript and the new comic is never displayed. I fixed this issue and then immediately found another similar issue with my call to Emoji One's JavaScript. Fixed that too.<br />
<br />
This got me thinking about what I'll call Dependency Cost. I didn't really think about the cost of my code being dependent on <a href="https://www.pinterest.com/" target="_blank">Pinterest</a> and <a href="http://emojione.com/" target="_blank">Emoji One</a> behaving in a certain way. I don't control either of them, and they could change or vanish at any time - resulting in my comic readers getting shut out of my site. When you think about it, this is really an unacceptable situation. But how many situations like this are you in right now with your code? I think we're all in too many. Take the setup Amphibian.com for example - it's built on Node using Express and over a dozen other modules all downloaded from <a href="https://www.npmjs.com/" target="_blank">npm</a> at first install. What if I had to recreate the site and <a href="https://www.npmjs.com/" target="_blank">npm</a> was down. Do I think npm will be around forever? Nothing lasts forever.<br />
<br />
Just something to think about when you're building your next application. Or you can think about today's comic. That's much more fun.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://amphibian.com/306" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidC7f6J0W89IbWFf0CO6a72IQ2Rada1yeRPe1D2HAhioIxATX0sfDd1sLrOsNe_M6M_UJ2w9AEPTE95p2KGe0C5mOoiHprInUkpn5mXo-3Ps4Q7ntX3oeBqOJO_-Ix2eKj4EB2hNzSpuU/s400/306.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://amphibian.com/306" target="_blank">Amphibian.com comic for 30 March 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com1tag:blogger.com,1999:blog-6281943659089221239.post-89812149162401980802016-03-28T00:00:00.000-04:002016-03-28T00:00:02.118-04:00Know Your viI through in a little jab at <a href="https://en.wikipedia.org/wiki/Vi" target="_blank">vi</a> in the third frame of today's comic. The truth is, I actually use vi almost every day at work. Remote displays are such a hassle. It got me thinking about this nice vi cheat sheet I was given on my first day of work (almost 15 years ago).<br />
<br />
It hung on the wall of my cubicle all these years. I found a copy of it on the Internet and wanted to share it with you!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBm_0Z6us3ULx2y2wU3ThaYhAkRifCSTWpE5r9PDkHu2ozyV3steskO_E4dp52enZJ1sEenxNKpBY1DuQ_6vPwrZnJqYsux8YRmLCRtHkMU_g_qREAMyLmugg9dmLql3htBH0ao3M-PWw/s1600/vi-cheat-sheet.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBm_0Z6us3ULx2y2wU3ThaYhAkRifCSTWpE5r9PDkHu2ozyV3steskO_E4dp52enZJ1sEenxNKpBY1DuQ_6vPwrZnJqYsux8YRmLCRtHkMU_g_qREAMyLmugg9dmLql3htBH0ao3M-PWw/s400/vi-cheat-sheet.jpg" width="400" /></a></div>
There are a couple of cleaned-up versions of this same style sheet floating around. I like it because it spells out "vi" with the commands. Just in case you forget what the commands are for. Mine is a copy of a copy of a copy and has some hand-written notes on it too, just like the one I found above. Gives it character.<br />
<br />
Right after you read today's comic, go log on to a Linux terminal and edit something with vi!<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://amphibian.com/305" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLD43jQ90TbXK3a03BvZNIG9xKhY7oMSR3lDnKGuAMKtnSR9e4VC-8ezPEI1JOHoHYSd1WdnT9b7lMxUGzVMv1B_dWxM-G4v3sBOUQ9iZzkjFO02wT-a72Vn5CtPip-qPwOXsFR5QJxlA/s400/305.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://amphibian.com/305" target="_blank">Amphibian.com comic for 28 March 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-2363806419947504352016-03-25T00:00:00.000-04:002017-04-09T21:09:13.687-04:00Easter EggsWhile today's comic is about Easter eggs (maybe?) the comic itself does not contain any. And by that I mean it doesn't have any fun undocumented features. It might have real eggs. Who knows?<br />
<br />
The term "Easter Egg" for an undocumented message, joke, or feature in a software product comes from the concept of the Easter Egg Hunt where children search for brightly colored eggs containing prizes. Similarly, if you find the hidden commands or whatever to unlock the Easter Egg in a software application, you get the prize. The hiding of Easter Eggs inside software dates back an Atari game from the late 1979 when the uncredited developer hid his name inside the game. It was supposedly given the name "Easter Egg" by Atari personnel after its discovery.<br />
<br />
If I'd had more time, I would have put one in the comic today. But, alas, my life is a bit of a disaster lately and I'm not even sure what day it is most of the time. I just got back from my second business trip in 3 weeks and I have a list of over 10,000 things to do before the end of the month. Okay, I'm exaggerating a little. The list is really only 9,875 things.<br />
<br />
The closest thing that Amphibian.com has to an Easter Egg is the teapot response. If you go to <a href="https://amphibian.com/teapot">https://amphibian.com/teapot</a> you will get a message indicating that your tea is ready. But if you look at the HTTP response code, it's actually in the error range - specifically a 418. That's the response to indicate "I'm a teapot" in the <a href="https://en.wikipedia.org/wiki/Hyper_Text_Coffee_Pot_Control_Protocol" target="_blank">Hyper Text Coffee Pot Protocol</a>. I may expand on this someday.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4bsolM8gfA_sj_6Qpj_LYAWF9b4gPU7KTRJIgwdPp4lSh1jcNhhS3ER0nFaTAeq3BKTC8S1tbwvqNHoEDtTdLnowPW6vTbq_wBxdVPQLVF4M79yPWcb8Depq5cjCPbmaOHwmIxR6t5IA/s1600/teapot418.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4bsolM8gfA_sj_6Qpj_LYAWF9b4gPU7KTRJIgwdPp4lSh1jcNhhS3ER0nFaTAeq3BKTC8S1tbwvqNHoEDtTdLnowPW6vTbq_wBxdVPQLVF4M79yPWcb8Depq5cjCPbmaOHwmIxR6t5IA/s400/teapot418.PNG" width="400" /></a></div>
<br />
<br />
It's not quite an Easter Egg, but there's also a way on the site to force an error condition for test purposes. It lets you see a 2-frame comic which is my lame attempt to tell you that there's been a server-side failure. You will hopefully never see it except by going to <a href="https://amphibian.com/broken">https://amphibian.com/broken</a>.<br />
<br />
So enjoy today's comic about eggs and Easter but not really Easter but definitely eggs. Yeah.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://amphibian.com/304" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVfdi3ZMSfmh5qDrUSsmnswkAjQUxjnUCNo4y7t55MZyMtdDWamGABaUMP7xc55K2I7LRTScRX2ougnD0H-lry0-LytMnqDPo2yExbr77CHxK3rDmskHjnN8eeT09Ecfx2AGvbeyTQYSY/s400/304.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://amphibian.com/304" target="_blank">Amphibian.com comic for 25 March 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-42340080612148557642016-03-23T00:00:00.000-04:002016-03-23T00:00:04.525-04:00Perspective Transformations in InkscapeI still haven't gotten a chance to go back to work on one of my games. I'm on another trip for work this week. But I did learn something new related to today's comic.<br />
<br />
While it doesn't have any special features, it does have a piece of paper on the ground with writing on it. The writing is skewed to show perspective. This is something that I hadn't been able to figure out before today - how to make a perspective transformation in Inkscape.<br />
<br />
Here's how to do it. First, get whatever object you want to transform. It can be text or a picture of something, but you have to turn it into a path first. You can do that by using the <b>Path</b> - <b>Object to Path</b> menu option.<br />
<br />
In this example, I'll transform one of my frog images. It is made up of lots of paths, all in a group. That's ok. To perform the skew, draw another path around the object in the shape that you want it to look like in the end. Start in the lower left corner and draw the line clockwise.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3bWm_Wrg7GMM8JE0aPVfOH3cSNtsHBNsMSiiYiVSoZGolBeieNqs87LeD5vF-3U5zAcJofxwDzs629vB59oSx4E66dKcWojyWKLYhyb0N-G97LzIwxeDL267hy43Mrk0q7SYWknpFOIE/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3bWm_Wrg7GMM8JE0aPVfOH3cSNtsHBNsMSiiYiVSoZGolBeieNqs87LeD5vF-3U5zAcJofxwDzs629vB59oSx4E66dKcWojyWKLYhyb0N-G97LzIwxeDL267hy43Mrk0q7SYWknpFOIE/s400/Capture.PNG" width="400" /></a></div>
<br />
After you have the shape outlined by the new path, select the shape to be transformed first and the path second (Shift+click). Then use the menu option <b>Extensions</b> - <b>Modify Path</b> - <b>Perspective</b>. It takes a few seconds, but should look like this after it runs.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjZpDtPq677gyMlVmB3mABe2_6Eo3EYeqq8Yg0b0mnGWlHq32cCpy1S0-eBjsMOXbTeAvgIthEirb6gjPmVgN2ufDCFopA1No8JOGBhiIOt7-OS0GLrTpgV3af7xggFt28t7605Jm7enE/s1600/Capture2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjZpDtPq677gyMlVmB3mABe2_6Eo3EYeqq8Yg0b0mnGWlHq32cCpy1S0-eBjsMOXbTeAvgIthEirb6gjPmVgN2ufDCFopA1No8JOGBhiIOt7-OS0GLrTpgV3af7xggFt28t7605Jm7enE/s400/Capture2.PNG" width="400" /></a></div>
You can delete the outline path if you want.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm-imyU3_fdrkKK1sqV_HTdAoPGfL1W1dNbtvH0PTl-NgiQIxtbpbK_MwE2FIMoiEH16GCjOz_vf_hJPL1ursaTfJGGBatFhyphenhyphen6_Y3OEWKEc2nWhZjGhvVCLwGhmYpaLojaTLnVdYrhyPs/s1600/Capture3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm-imyU3_fdrkKK1sqV_HTdAoPGfL1W1dNbtvH0PTl-NgiQIxtbpbK_MwE2FIMoiEH16GCjOz_vf_hJPL1ursaTfJGGBatFhyphenhyphen6_Y3OEWKEc2nWhZjGhvVCLwGhmYpaLojaTLnVdYrhyPs/s400/Capture3.PNG" width="400" /></a></div>
That's how I made the text on the "landing page" look like it does. I'm always happy when I learn something new. I'm also happy when you read my frog comics.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://amphibian.com/303" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWYvyzl3JVzO1vS12whz5VcxYyUZfpXkYJMv145MwCujaJSBChH0LQ3h0JetlEHlTUx1bDx51mjIkkfTgjQbIfnO785lCnbJJ_g7NyCUqXCdeFjYkS6bcLCsSU1F6J4jYAN_qeDNZoohg/s400/303.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://amphibian.com/303" target="_blank">Amphibian.com comic for 23 March 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-64929404700990937422016-03-21T00:00:00.000-04:002016-03-21T00:00:10.076-04:00Amphibian.com's got Web SocketsToday's comic might look like a simple joke about planting light bulbs, but it is really so much more. Well, actually it's only a little bit more. But still more.<br />
<br />
The lamp post in the third frame can be turned on and off by clicking on it. But it doesn't just go on and off for you the clicker; it goes on and off for everyone looking at the comic. Try it. Go to <a href="https://amphibian.com/302" target="_blank">Amphibian.com</a> and look at the lamp. Call a friend on the other side of the world and have them also go to <a href="http://amphibian.com/302" target="_blank">Amphibian.com</a> and look at the lamp. Click on the lamp. You'll both see it toggle state at the same time.<br />
<br />
I finally got around to integrating Web Sockets via <a href="http://socket.io/" target="_blank">Socket.io</a> into the site. The state of the lamp is stored on the server and clicks emit "lamp-toggle" events from the clients. When a toggle event is received on the server, the state of the lamp switches and the new state (on or off) is broadcast out to all the clients. The clients show or hide the "glow" effect accordingly.<br />
<br />
Server Code:<br />
<br />
<pre class="brush: js">var lampOn = true;
io.on("connection", function (socket) {
socket.on("lamp-toggle", function(data) {
if (lampOn) {
io.emit("lamp-off");
} else {
io.emit("lamp-on");
}
lampOn = !lampOn;
});
});
</pre>
<br />
Client Code:<br />
<br />
<pre class="brush: js">var socket = io("http://amphibian.com");
socket.on("lamp-off", function(d) {
$("#glow").hide();
});
socket.on("lamp-on", function(d) {
$("#glow").show();
});
$("#lamp").click(function() {
socket.emit("lamp-toggle");
});
</pre>
<br />
On the server side, I had a little trouble with the fact that I have Node HTTP servers for both secure and insecure web traffic in the application. I wanted the same Socket.io instance to service both. Fortunately, it is easy to attach a Socket.io server to multiple HTTP servers. In the code snippet below, I call <i>attach</i> on an existing Socket.io instance to bind it to a second HTTP server (line 17).<br />
<br />
<pre class="brush: js">var app = express();
var server = http.createServer(app).listen(3000, function() {
console.log('listening on port %d', server.address().port);
});
// create a Socket.io server attached to the HTTP server just created
var io = require('socket.io')(server);
if (ssl) {
var secureServer = https.createServer(sslOptions, app).listen(4443, function() {
console.log('listening securely on port %d', secureServer.address().port);
});
// attach the Socket.io server to the secure HTTP server as well
io.attach(secureServer);
}
</pre>
<br />
Back in the client, I just had to be smart about which URL to connect to. I never got Web Sockets to work correctly with Nginx, so I'm just bypassing it when I make the connections back from the client. Nginx listens on ports 80 and 443 and proxies HTTP traffic to the Node application which actually listens on ports 3000 and 4443. When I set up Socket.io in the client, I use these ports directly. Browsers still allow Web Socket connections to different ports on the same server without raising cross-site scripting concerns. But you can't mix insecure HTTP and secure Web Sockets (or vice versa). Look at this update to the client code from above, where I examine the browser's location to determine what URL I should use for connecting:<br />
<br />
<pre class="brush: js">var urlParts = window.location.href.split("/");
var cUrl = urlParts[0] + "//" + urlParts[2];
if (!window.location.port) {
if (urlParts[0] !== "https:") {
cUrl += ':3000';
} else {
cUrl += ':4443';
}
}
var socket = io(cUrl);
// ... rest of client code from above ...
</pre>
<br />
So go play around with that lamp! And feel free to read more comics while you're there.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://amphibian.com/302" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKqZhcdM8FmJixi3HOvJ1tv8hj17B1M55T1DI4w4V3dQ0Pp5Z3rJXXIZ77xNkIHwlOjaPAwSscD_yU61CjhW0ihZUGzDzeOqEVNcnLiO8IaXBbO2WS61dHov159Y_L3k8t6naPzrrzNL0/s400/302.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://amphibian.com/302" target="_blank">Amphibian.com comic for 21 March 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-83676829561320594412016-03-18T00:00:00.000-04:002016-03-18T00:00:10.723-04:00PseudocodeYou may have heard stories of brilliant software engineers jotting down code on bar napkins when they have a sudden epiphany while drinking with their friends. Maybe you've done this sort of thing yourself. Maybe, like the frogs in <a href="http://amphibian.com/301" target="_blank">today's comic</a>, you've written down code in a stranger place.<br />
<div>
<br /></div>
<div>
I've never written code with letter-shaped pasta, but I have written out lots of algorithms on paper beside my keyboard. It's never in perfect form for compilation, but is usually just <a href="https://en.wikipedia.org/wiki/Pseudocode" target="_blank">pseudocode</a>. I am not a genius when it comes to algorithms; I can rarely go straight from my brain to they keyboard and have the code work on the first (or fifty-first) try. When I was working on <a href="http://amphibian.com/276" target="_blank">the match-3 game back in January</a>, it took lots of scratch paper pseudocode to get things working correctly.</div>
<div>
<br /></div>
<div>
For whatever reason, writing out the algorithm in pencil and then working through it on paper really works for me. I usually write a list of the variables off to the side, along with their current values as I work through the steps. I erase and re-write the value of each variable as it changes. This is a skill I was taught in college, using a whiteboard instead of paper, but it works just as well.</div>
<div>
<br /></div>
<div>
If you haven't done something similar yourself, give it a try next time you're stumped on an algorithm problem. Or just take a break from programming and read some of my comics!</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://amphibian.com/301" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-tXV56k-pUqPqIsyYtvMOTXB4YQgVC33xrf2WmfEetfW_NUMci-gY3CCw0LXgvPx2Ox4R5kAp1IcPDoxtQB17Dii4t6a23CklY-NJkIVxRq_spdD8h2iDkSwE0yZkO90bf6HDqnQ45wk/s400/301.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://amphibian.com/301" target="_blank">Amphibian.com comic for 18 March 2016</a></td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com0tag:blogger.com,1999:blog-6281943659089221239.post-84078807606375564352016-03-16T00:00:00.000-04:002016-03-16T00:00:01.515-04:00I Don't Like GingerbreadI have noticed that it's been over 2 weeks since I worked on <a href="http://amphibian.com/eight-bit/" target="_blank">my platformer</a>. I haven't abandoned it, but I have taken a break from it to work on other things. A trip to Texas where I got sick and this stupid Daylight Savings Time thing messing up my sleep schedule haven't helped.<br />
<br />
This basically means that I don't have any code or <a href="http://phaser.io/" target="_blank">Phaser</a> insights to share at the moment. I honestly don't have much of anything to share, other than comics and the fact that I don't like gingerbread.<br />
<br />
But today's comic has a gingerbread house! Well, technically it's a gingerbread grocery store, but the fact remains that I don't like gingerbread. When we make "gingerbread" houses around here at Christmastime, we use graham crackers which I consider to be more edible.<br />
<br />
Why am I writing about this? I have no idea.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://amphibian.com/300" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGE93h6OQsfr7PsIx5NKswPNme4f_oKBQGTJMyFQ6E6L1BYpVQtyInnKtDzv47q7OZvTC_tOKI3MCHCSA9QUKHtIZLfMnbKb9Nj70Ep1KfS9XP46t6_97hGVTxHi0pw8Gkp-wIIVNEt2s/s400/300.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://amphibian.com/300" target="_blank">Amphibian.com comic for 16 March 2016</a></td></tr>
</tbody></table>
<br />Anonymoushttp://www.blogger.com/profile/13405361457156178249noreply@blogger.com3