13 January 2019

Resources for Phaser game makers


Just a quick recommendation for those of you who use Phaser for game development. Apart from Phaser home site, there is a Facebook group Phaser Game Makers currently with over 1k members. 

Group is created by William Clarkson, online instructor who published good books and have courses about making games in Phaser. Visit his site for Phaser tutorials. He also offers free Phaser Template for you to start working on your game, check Toolbox / downloads section. Great way to jump start with development.

Thanks, have fun.

09 January 2019

Some promising indie gamedev work in progress

Hello again.

There are plenty of new games releases every week, nobody can keep track on them. Unfortunately, majority of games are copycats or just bad school projects when it comes to indie gamedev scene. Nothing wrong there, but who has time to lose on something that is not fun to play.

If something catch my eye, whether it's great graphics or original idea I would like to support the developer(s) and hope they will finish the project.

First game I would like to see is Arrow Rider by Whistling Wizard ( @wwgamingnz ) team from New Zealand. Art is fun and gameplay looks ok.

Another very interesting project is this hand-drawn HOA the game ( @hoathegame ) which really looks awesome.

Thanks. Have fun.

03 March 2018

Adding more objects to orbit on Canvas

In the prevoius post you have learned how to make some object move in circular motion around given point on Canvas. Object in this case is simple circle image with radius = 20 pixels and blue color. It orbits around canvas center point. Since in given example canvas dimensions are 500 x 500 pixels, imaginery orbiting point for this blue circle is x = 250 and y = 250. Orbit distance is 100 pixels. 

Now, if you want to add another circle to orbit around same point, but at some different distance you can easily do so. Just above setInterval function definition add next two lines: 

// second object distance  
var radius2 = 150;  

This new radius2 variable will orbit new object slightly further from the first blue circle. Below these two lines add code to set second object angle and speed. 

// second object angle and speed  
var alpha2 = 0;  
var freq2 = 1/75;  

Next copy and paste below // draw object section, but change variable names to match second object variables. like so: 

// draw second object  
alpha2 += freq2;  
if(alpha2 >= 2*Math.PI)  
  alpha2 = 0;  
var object2X = center + (radius2 * Math.cos(alpha2));  
var object2Y = center + (radius2 * Math.sin(alpha2));  

As you can see from the last line, this new satellite will be green with 10 pixels radius. One other note, since we set frequency variable to 1/75, green circle will be slower than blue one. You can change this value to experiment further. 

If you repeat this process described above, you can add as many objects as you like with different colors, radius and speed. If you include black background and check Wikipedia or NASA for data on planets like distance from the Sun and color, you can easily simulate Solar system using this code. It will not be too precise since some planets have their own satellites. 

Next time you will learn how to include those satellites and make them part of the system. 


28 February 2018

Simple orbital movement on Canvas

In this tutorial you can learn how to create simple orbital movement using HTML Canvas and JavaScript. 

This is very basic step-by-step guide, so everyone can understand it without any previous experience with programming. 

Create new folder anywhere on your computer where you will place your files. You can create this folder on Desktop also. Rename it as "Orbit example". Inside "Orbit example" folder create new text file and rename it as "index.html". 

Open this file with your favorite text editing program and paste code which follows. 

<canvas id="myCanvas" width="500" height="500"></canvas>  
<script src="orbit.js"></script>  

This is main HTML file and as you can see after closing body tag we linked to orbit.js JavaScript file. This file is next for you to create and place inside same "Orbit example" folder.

Here is the code:

 // canvas size is 500x500  
 var c = document.getElementById("myCanvas");  
 var ctx = c.getContext("2d");  
 // Object orbit settings  
 // alpha is starting angle   
 var alpha = 0;  
 // center of rotation position  
 var center = 250;  
 // rotation speed  
 var freq = 1/200;  
 // distance from rotation center  
 var radius = 100;  
   ctx.clearRect(0,0,500,500); // clear canvas  
   //Draw orbit path  
   // draw object  
   alpha += freq;  
   if(alpha >= 2*Math.PI)  
     alpha = 0;  
   var objectX = center + (radius * Math.cos(alpha));  
   var objectY = center + (radius * Math.sin(alpha));  
 }, 10);  
 // drawing function  
 function drawCircle(objectX,objectY,radius,color) {  
   ctx.fillStyle = color;  

First we set some object orbit settings like alpha angle, center, frequency and radius. 

Function setInterval will redraw Canvas every 10 milliseconds. It will draw orbit path every time and after calculation new object position it will draw it on Canvas, which will make animation. 

Function drawCircle is outside of setInterval so we can reuse it later. 

This is result image.

You can, for example double orbiting speed with var freq = 1/100; Experiment with other settings.

Next time I will show you how to attach a satellite to this orbiting object.


10 February 2018

Making charts with Three.js

If you are someone who makes presentations and data visualizations on daily basis, you will be pleasantly surprised to see your static charts come alive using Three.js JavaScript library.

Actually, you don't even need to do any coding, because, like most things today, someone has already done that for you. So, visit threegraphs website and start making your awesome charts right now.

How it works? Choose one of the options for your new chart.

Let me show you how to get Bar Chart, others are similar. Click on Edit button (you have only two buttons available export and edit) and enter some data, like I did on image bellow. Choose chart Title, something like Sales or similar. Choose background color and text colors. Use green plus buttons to add new columns and rows. Enter values. Finally click on Generate Chart. 

That's it, your chart is ready. Now, you can export it as image or embed it within your website using iFrame. Here is my example, use mouse to move around.


template by blogger templates