Welcome to SomaliNet Forums, a friendly and gigantic Somali centric active community. Login to hide this block

You are currently viewing this page as a guest. By joining our community you will have the ability to post topics, ask questions, educate others, use the advanced search, subscribe to threads and access many, many other features. Registration is quick, simple and absolutely free. Join SomaliNet forums today! Please note that registered members with over 50 posts see no ads whatsoever! Are you new to SomaliNet? These forums with millions of posts are just one section of a much larger site. Just visit the front page and use the top links to explore deep into SomaliNet oasis, Somali singles, Somali business directory, Somali job bank and much more. Click here to login. If you need to reset your password, click here. If you have any problems with the registration process or your account login, please contact us.

LONG SERIES OF HTML5 GAMES: chapter1 part13 Game Camera

Qaybta Xirfada Sayniska iyo iwm

Moderators: Moderators, Junior Moderators

OUR SPONSOR: LOGIN TO HIDE
User avatar
afisoone
SomaliNet Super
SomaliNet Super
Posts: 5484
Joined: Wed Jul 22, 2009 9:46 pm
Location: We all want to become president even though Amisom controls Mogadishu

LONG SERIES OF HTML5 GAMES: chapter1 part13 Game Camera

Postby afisoone » Sun May 24, 2015 5:54 pm

Assalamu caleykum,

Today we are going to build game camera view. We are going to use it this image...
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.
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);
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.

Now we need to create to more objects. Meesha uu maraayo diyaarada iyo camerada.
let's do that..
var 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
}
Beautiful. As you can meeshaUmarayo object waxaan ku lifaaqinay backgroud width iy heightkiisa. Meesha ee mareeyso diyaarada waa large
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
camera.x = (meeshaUmarayo.x + meeshaUmarayo.width / 2) - camera.width / 2;
camera.y = (meeshaUmarayo.y + meeshaUmarayo.height / 2) - camera.height / 2;
Now camera is the center of the meeshaUmarayo. Ok.

Now we need to create plane from the sawirObject.. we did many time previous lesson.
let's do it
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);
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.

Now let's load one that large graphic.
var image= new Image();
image.addEventListener("load", keenStageka, false);
image.src="arialview.png";
Ok. Now we are almost there..

Now we need to move the plane and keep inside meeshaUmarayo. How do we do that?

in the UpdateStageka()
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));
That is how you move and keep inside that large area of meeshaUmarayo ok.

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.
camera.x = Math.floor(plane.x + (plane.width / 2) - (camera.width / 2));
camera.y = Math.floor(plane.y + (plane.height / 2) - (camera.height / 2));
That how you center. ok..

Now what.. we test the meeshu uu maraayo inuuna dhaafin camerada. the camera should inside meeshaUmarayo.
That is easy. here is how?
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;
}
Now the camera will be in the boundaries of meeshaUmarayo area. So far soo good.

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.

User avatar
afisoone
SomaliNet Super
SomaliNet Super
Posts: 5484
Joined: Wed Jul 22, 2009 9:46 pm
Location: We all want to become president even though Amisom controls Mogadishu

Re: LONG SERIES OF HTML5 GAMES: chapter1 part13 Game Camera

Postby afisoone » Sun May 24, 2015 11:01 pm

The camera works but cilad yar ayaan ku arkay. Markaad load kareeysid planeka side ayuu taagnaa. Hada lee fursad u helay inaa fiiriyo.

cilada wax waay we did not center plane.x
here is the code we use to center...
plane.x = (meeshaUmarayo.x + meeshaUmarayo.width / 2) - meeshaUmarayo.width / 2;
the correct way is to at the end is plane.width/2

it is like this..
plane.x = (meeshaUmarayo.x + meeshaUmarayo.width / 2) - plane.width/ 2;
I was doing faster at the time. and there was many centering and logic in this tutorial.. But you see the plane and the camera moves at the
same time...

Thanks again.. Meeshaan lecture diini ah dhageysanaa kadib chapter 2 ayaa bilaabeenaa...


OUR SPONSOR: LOGIN TO HIDE

Hello, Has your question been answered on this page? We hope yes. If not, you can start a new thread and post your question(s). It is free to join. You can also search our over a million pages (just scroll up and use our site-wide search box) or browse the forums.

  • Similar Topics
    Replies
    Views
    Last post

Return to “Careers - Engineering, Science & Computers”

Who is online

Users browsing this forum: No registered users and 1 guest