Today we are going to build game camera view. We are going to use it this image...
This image actual size 4581 by 2981 That is how large the plane will travel.
The plane is tiny thing that is far top left side. You can't see it unless someone tell it there.
You have seen alot of online games that has large graphic that has houses, trees, and desert. The character travels all the places to find the enemy.
In this toturial we will make the plane travel like real life.. So how do they do that? Is what we answer in this tutorial.
Ok maxaa u baahantahay?
Casharkii hore waxaan kusoo baraney arrow keyboarding. We will same file but in this case we will background graphics.
let's do that background.
We did this in other lesson. You know how to use the sawirObject to create the background. this background is much larger than the canvaska widthkiisa.var background=Object.create(sawirObject);
background.sawirY=64;
background.sawirWidth=4581;
background.sawirHeight=2981;
background.width=4581;
background.height=2981;
background.x=0;
background.y=0;
xafidSawir.push(background);
Now we need to create to more objects. Meesha uu maraayo diyaarada iyo camerada.
let's do that..
Beautiful. As you can meeshaUmarayo object waxaan ku lifaaqinay backgroud width iy heightkiisa. Meesha ee mareeyso diyaarada waa largevar meeshaUmarayo =
{
x: 0,
y: 0,
width: background.width,
height: background.height
};
//camirada object
var camera =
{
x: 0,
y: 0,
width: canvaska.width,
height: canvaska.height
}
area.
Laakiin camera object waxaan ku lifaaqinay canvaska widthkiisa iyo heightkiisa. So it will difine meeshaUmarayo object and she will display it. You will see it. Remember this technique it is called scaling.
now we need to center the camera to the meeshaUmarayo object. Ok..
/camarida waxey lagu simaya dhaxda meeshaUmarayo Object
Now camera is the center of the meeshaUmarayo. Ok.camera.x = (meeshaUmarayo.x + meeshaUmarayo.width / 2) - camera.width / 2;
camera.y = (meeshaUmarayo.y + meeshaUmarayo.height / 2) - camera.height / 2;
Now we need to create plane from the sawirObject.. we did many time previous lesson.
let's do it
Beautiful: we center the plane.x and plane.y with meeshaUmarayo object. camerada iyo plane is the center of that large area of meeshaUmarayo. Remember meeshaUmarayo widthkiisa is the same as the background width which is very large.var plane = Object.create(sawirObject);
plane.x = (meeshaUmarayo.x + meeshaUmarayo.width / 2) - meeshaUmarayo.width / 2;
plane.y = (meeshaUmarayo.y + meeshaUmarayo.height / 2) - plane.height / 2;
xafidSawir.push(plane);
Now let's load one that large graphic.
Ok. Now we are almost there..var image= new Image();
image.addEventListener("load", keenStageka, false);
image.src="arialview.png";
Now we need to move the plane and keep inside meeshaUmarayo. How do we do that?
in the UpdateStageka()
That is how you move and keep inside that large area of meeshaUmarayo ok.plane.x = Math.max(0, Math.min(plane.x + plane.vx, meeshaUmarayo.width - plane.width));
plane.y = Math.max(0, Math.min(plane.y + plane.vy, meeshaUmarayo.height - plane.height));
We need to do the same thing to the camera. So we don't miss the plane. We center the camera to follow the plane.
ok. It is like man camera man recording and moving around to get the pictures.
let's do it.
That how you center. ok..camera.x = Math.floor(plane.x + (plane.width / 2) - (camera.width / 2));
camera.y = Math.floor(plane.y + (plane.height / 2) - (camera.height / 2));
Now what.. we test the meeshu uu maraayo inuuna dhaafin camerada. the camera should inside meeshaUmarayo.
That is easy. here is how?
Now the camera will be in the boundaries of meeshaUmarayo area. So far soo good.if(camera.x < meeshaUmarayo.x)
{
camera.x = meeshaUmarayo.x;
}
if(camera.y < meeshaUmarayo.y)
{
camera.y = meeshaUmarayo.y;
}
if(camera.x + camera.width > meeshaUmarayo.x + meeshaUmarayo.width)
{
camera.x = meeshaUmarayo.x + meeshaUmarayo.width - camera.width;
}
if(camera.y + camera.height > meeshaUmarayo.height)
{
camera.y = meeshaUmarayo.height - camera.height;
}
So we need to use translate the canvaska.. We need to edit a little bit of the hadbaSawir() function. Ok.
here is how translate or let it move the camera.
function hadbaSawir()
{
meeshaSawirka.clearRect(0,0, canvaska.width, canvaska.height);
meeshaSawirka.save();
//Move the drawing surface so that it's positioned relative to the camera
meeshaSawirka.translate(-camera.x, -camera.y);
if(xafidSawir.length!==0)
{
for(var i=0; i<xafidSawir.length; i++)
{
var sawirkaan=xafidSawir;
meeshaSawirka.drawImage(image, sawirkaan.sawirX, sawirkaan.sawirY,sawirkaan.sawirWidth, sawirkaan.sawirHeight, Math.floor(sawirkaan.x), Math.floor(sawirkaan.y),
sawirkaan.width, sawirkaan.height);
}
}
meeshaSawirka.restore();
}
Wow! we did it. We did it. Ok let's see in our server what we did Camera moving tutorial
That is all you need. remember learn the technique and play around with many graphics. go use and create mogadishu and put a character and travel all mogadishu. Now you how to create camera and a character...
I can't believe it we are discussing camera that means our first chapter has just ended..
Ok.. let's begin next Chapter2.