Quick HTML5 App: Minecraft Skin Getter

In my previous blog post I explained how to make a skin getter/stealer for Minecraft in Java using JavaFX. Turns out that post was actually quite popular, probably something to do with the buzzwords Minecraft and JavaFX, I even saw a few people discussing their dislike for Oracle and JavaFX on my reddit post of it.

Anyway, yesterday I created a simple web application that does pretty much the same thing as the JavaFX program but runs in your browser and thought I’d share it.

This won’t be an in depth tutorial on JavaScript and HTML5 since there are plenty of resources online for that; I recommend w3schools and the Mozilla Developer Network.

First the HTML!

I just made a very simple HTML5 document with a simple form:

<!DOCTYPE html>
<html>
    <head>
	<title>Minecraft Skin Getter - By Lyndon Armitage</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script src="MCSkin.js"></script>
    </head>
    <body onload="load();">
	<div id="content">
	    <h2>Minecraft Skin Getter</h2>

	    <form id="skinGetterForm" onsubmit="return false;">
		<span class="formLabel">Username: </span><input id="input" type="text" name="Username" value="Notch" />
		<input id="btn" type="button" value="Get Skin" name="getSkin" />
	    </form>
	    <div id="skinHolder">
		<img id="actualSkin" src="http://s3.amazonaws.com/MinecraftSkins/char.png" alt="Minecraft Skin" width="256" height="128" />
	    </div>
	</div>

    </body>
</html>

I made sure to keep all my styling information in the CSS and kept the CSS in a separate file so without it it looks like this:

noCSS

Notice the blurring of the image? This is because the actual image found at http://s3.amazonaws.com/MinecraftSkins/char.png is being scaled up and the default behaviour of most browsers is to try and smooth the pixels so we don’t get bad edges on things like photos. For pixel art like this it’s a little annoying though isn’t it? In the CSS section I show how to rectify the problem!

Onto the CSS!

The CSS looks very complicated and uses gradients, but I didn’t hand write these! I used a tool called Ultimate CSS Gradient Generator to generate the CSS for the background.

#content {
    width: 500px;
    height: 300px;
    box-shadow: #333333 0px 0px 10px;
    margin: 0 auto;
    border: #333333 solid 1px;
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

#content h2 {
    border: #333333 inset 1px;
    margin-top: 0;
    text-align: center;
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

#skinGetterForm {
    padding: 10px 10px;
}
.formLabel {
    font-weight: bold;
}

#skinHolder {
   margin: 0 auto; 
   text-align: center;
}

#actualSkin {
    padding: 10px 10px;
    display: inline;
    border: #333333 inset 1px;
    background: #f6f8f9; /* Old browsers */
    background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#d7dee3), color-stop(100%,#f5f7f9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

If you look at the #actualSkin section of the CSS you can see a set of properties after the background ones called image-rendering. These make sure that we don’t get blurring on the scaled up images (currently it seems chrome will do this regardless, if I am missing one for it please leave a comment!).

withCSS

It looks a lot better now! And is centred in the browser window!

Now to actually change the image to the one you type in! to do this we need JavaScript.

Finally JavaScript

The JavaScript code here is very short, but can still probably be rewritten to work in a more browser friendly manor (currently if you look back at the HTML you see I use the onload attribute of the body tag, this could be changed).

/* 
 * Script for getting a minecraft user's skin using JavaScript
 * By Lyndon Armitage
 */

function AddEvent(html_element, event_name, event_function) {       
   if(html_element.attachEvent) //Internet Explorer
      html_element.attachEvent("on" + event_name, function() {event_function.call(html_element);}); 
   else if(html_element.addEventListener) //Firefox & company
      html_element.addEventListener(event_name, event_function, false); //don't need the 'call' trick because in FF everything already works in the right way  
}

function getSkin() {
    var input = document.getElementById("input").value;
    var url = "http://s3.amazonaws.com/MinecraftSkins/" + input + ".png";
    document.getElementById("actualSkin").src = url; // set the images src to the players skin url
}

function load() {
    AddEvent(document.getElementById("btn"), "click", getSkin);
    AddEvent(document.getElementById("skinGetterForm"), "submit", function() {
	getSkin();
    return false;
    });
}

The most important function here is getSkin(). What it does, quite simply, is gets the text you type into the input and tries to set the image tag on the page to the skin for that player.

meSkin

In the other functions we simply add the calls to getSkin() to the click event and submit events of the form tags.

And that’s it!

It’s that simple. You can see a live version here: http://lyndonarmitage.com/html/MCSkinGetter/index.html

Possible extensions to it include:

  • Adding a download button, right now you just need to right click and use the save image option on your browser on the image
  • Adding a webGL view of the skin in action. Will attempt this when I have had some practice with webGL!
  • Adding a function to set your own skin using the application. Then you can really use people’s skins with minimal effort…

Feel free to leave any comments, suggestions or questions!

Happy Coding!

Leave a Reply