Making a Thumbnail for Pi.js Youtube Intro Video

I was working on my thumbnail image in my favorite paint program Paint.net and I was struggling to get it to look just right. Then the idea came to me that I should create the thumbnail with Pi.js. So that's what I did. The following is a step by step instructions on how I did that.

The first step was I download a font that I liked from OpenGameArt.org and found a CC0 licensed font from a creator that goes by the name gnsh. Thanks gnsh! Then I went to Editor and started to work.

I started my code by creating a new screen with the dimensions of 320x180. I chose this size because it scales up to the Youtube recommended size: 1280x760 nicely.

$.screen( "320x180" );

Then I loaded my fonts. Notice that the fonts need a string to load up with the characters in the image. The order matters here.

// A list of characters included in my fonts
var chars = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]" +
  "^_`abcdefghijklmnopqrstuvwxyz{|}~";
// My font images
var font1 = $.loadFont( "fonts/gnsh-bitmapfont-colour8.png", 5, 12, chars );
var font2 = $.loadFont( "fonts/gnsh-bitmapfont-colour2.png", 5, 12, chars );
var font3 = $.loadFont( "fonts/gnsh-bitmapfont-colour5.png", 5, 12, chars );

Then I loaded my other images.

// Other images
var stars = $.loadImage( "images/stars.png" );
var mario = $.loadImage( "images/mario.png" );
var sonic = $.loadImage( "images/sonic2.png" );
var pi_logo = $.loadImage( "images/pijs-logo2.webp" );

The next thing I needed to do in the code is to wait for the images to get loaded. You can't draw an image until it gets loaded. But thankfully the Pi.js has a convenient function for that called ready.

$.ready( function () {
	// Code to be run goes here
} );

Once my images are loaded I'm ready to draw them. I scaled mario smaller by 0.75 and scaled up sonic by 3x. Check out the drawImage command to see what all those parameters are.

// Draw images
$.drawImage( stars, 0, 0 );
$.drawImage( mario, 15, 80, null, null, null, null, 0.75, 0.75 );
$.drawImage( sonic, 190, 50, null, null, null, null, 3, 3 );

After that I draw an ellipse and my logo.

// Draw an ellipse in the top left corner of the screen
$.ellipse( 5, 5, 53, 40, "white" );
$.drawImage( pi_logo, 0, -5, null, null, null, null, 0.5, 0.5  );

Then finally I print my text.

// Print the Pi.js text at the top center
$.setFont( font1 );
$.setPosPx( 0, 12 );
$.setFontSize( 10, 24 );
$.print( "Pi.js", false, true );
// Print the main text
$.setFont( font2 );
$.setFontSize( 10, 24 );
$.setPosPx( 0, 60 );
$.print( "Make Classic Retro", false, true );
$.print( "Games With This New", false, true );
$.print( "JavaScript Library", false, true );
// Print over the word New for emphisis
$.setFont( font3 );
$.setFontSize( 10, 24 );
$.setPosPx( 0, 84 );
$.print( "                New", false, true );

Here is the final code. It's important to note that I changed the $.loadImage and $.loadFont string parameters from "images/..." to "/images/..." and "fonts/..." to "/fonts/..." this is so that it will run this example from this page here. But if you are using the Editor and upload files into a subfolder it will have to be in the format of "images/...".

$.screen( "320x180" );
// A list of characters included in my fonts
var chars = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]" +
  "^_`abcdefghijklmnopqrstuvwxyz{|}~";
// My font images
var font1 = $.loadFont( "/fonts/gnsh-bitmapfont-colour2.png", 5, 12, chars );
var font2 = $.loadFont( "/fonts/gnsh-bitmapfont-colour8.png", 5, 12, chars );
var font3 = $.loadFont( "/fonts/gnsh-bitmapfont-colour5.png", 5, 12, chars );
// Other images
var stars = $.loadImage( "/images/stars.png" );
var mario = $.loadImage( "/images/mario.png" );
var sonic = $.loadImage( "/images/sonic2.png" );
var pi_logo = $.loadImage( "/images/pijs-logo2.webp" );
$.ready( function () {
	// Draw images
  	$.drawImage( stars, 0, 0 );
	$.drawImage( mario, 15, 80, null, null, null, null, 0.75, 0.75 );
	$.drawImage( sonic, 190, 50, null, null, null, null, 3, 3 );
	// Draw an ellipse in the top left corner of the screen
	$.ellipse( 5, 5, 53, 40, "white" );
	$.drawImage( pi_logo, 0, -5, null, null, null, null, 0.5, 0.5  );
	// Print the Pi.js text at the top center
	$.setFont( font1 );
	$.setPosPx( 0, 12 );
	$.setFontSize( 10, 24 );
	$.print( "Pi.js", false, true );
	// Print the main text
	$.setFont( font2 );
	$.setFontSize( 10, 24 );
	$.setPosPx( 0, 60 );
	$.print( "Make Classic Retro", false, true );
	$.print( "Games With This New", false, true );
	$.print( "JavaScript Library", false, true );
	// Print over the word New for emphisis
	$.setFont( font3 );
	$.setFontSize( 10, 24 );
	$.setPosPx( 0, 84 );
	$.print( "                New", false, true );
} );

Leave a Reply Cancel reply