Autor Tema: Multiples Camaras 2D para html5 Canvas. (Leído 633 veces)

ilovepixel · « **en:** 15 de Abril de 2012, 13:50:20 pm »

Otro script que hice, ojala les sirva.
Básicamente lo que que permite es crear múltiples cámaras para juegos 2D a la que fácilmente se le puede agregar parallax scrolling.
Acá está el codigo completo del demo:

Código: [Seleccionar]


/**
 * @author Felipe Alfonso
 * www.shin.cl
 */


/**
 * Count frames
 */
 
function FPS()
{
	this.startTime = new Date().getTime();
	this.framesNumber = 0;
}

FPS.prototype.Update = function()
{
	var d = new Date().getTime();
	var currentTime = (d - this.startTime)/1000;
	this.framesNumber+=1;
	var result = Math.floor((Math.floor((this.framesNumber/currentTime)*10.0)/10.0));
	if(currentTime>1)
	{	
		this.startTime = new Date().getTime();
		this.framesNumber = 0;
	}
	return result;
}

var f = document.getElementById("fps");
var e = document.getElementById("canvas");
var canvas = e.getContext("2d");
var fps = new FPS();
var img = new Image();
img.src = "sprite.png";
var x = 0;
var y = 0;

window.onmousemove = function(e)
{
	x = e.pageX;
	y = e.pageY;
}


/**
 * Draw Camera
 */

function drawCam(x,y,width,height,color)
{
	canvas.restore();
	canvas.save();
	canvas.beginPath();
	canvas.rect(x,y,height,width);
	canvas.clip();
	canvas.closePath();
	canvas.translate(x,y);
	canvas.fillStyle = color;
	canvas.fillRect(0,0,width,height);
}

/**
 * Draw Animation
 */
var frameCount = 0;
var currentFrame = 0;
var delayCount = 0;
function drawAnim(image,x,y,frameWidth,frameHeight,frames,delay)
{
	if(delayCount<delay)
	{
		delayCount+=1;
		currentFrame = frames[frameCount];
		canvas.drawImage(image,currentFrame*frameWidth,0,frameWidth,frameHeight,x,y,frameWidth,frameHeight);
	}
	else
	{
		if(frameCount<frames.length-1)
		{
			currentFrame = frames[frameCount];
			frameCount+=1;
		}
		else
		{
			currentFrame = frames[frameCount];
			frameCount = 0;
		}
		canvas.drawImage(img,currentFrame*frameWidth,0,frameWidth,frameHeight,x,y,frameWidth,frameHeight);
		delayCount = 0;
	}
}


///////////////////////////////////////////////////////////////////////////////////////////

function GameLoop()
{
	var t = setTimeout("GameLoop()",17);
	//background
	canvas.fillStyle = "#000000";
	canvas.fillRect(0,0,e.width,e.height);
	
	//draw cameras
	drawCam(0,0,200,200,"#5a5a5a");
	render()
	drawCam(201,0,200,200,"#5a5a5a");
	render()
	drawCam(402,0,200,200,"#5a5a5a");
	render()
	drawCam(0,201,200,200,"#5a5a5a");
	render()
	drawCam(201,201,200,200,"#5a5a5a");
	render()
	drawCam(402,201,200,200,"#5a5a5a");
	render()
	
	//fps
	f.innerHTML = "FPS "+fps.Update();
}

var w = Array();
var h = Array();

for(var i=0;i<200;i++)
{
	w.push(Math.random()*600);
	h.push(Math.random()*400);
}

function render()
{
	
	for(var i=0;i<200;i++)
	{
		drawAnim(img,w[i],h[i],26,30,[0,1,2,1,0,3,4,3],18);
	}
	
	drawAnim(img,x,y,26,30,[0,1,2,1,0,3,4,3],18);
}
window.onload = GameLoop();

El codigo que dibuja la camara es este:

Código: [Seleccionar]

function drawCam(x,y,width,height,color)
{
	canvas.restore();
	canvas.save();
	canvas.beginPath();
	canvas.rect(x,y,height,width);
	canvas.clip();
	canvas.closePath();
	canvas.translate(x,y);
	canvas.fillStyle = color;
	canvas.fillRect(0,0,width,height);
}

Acá esta el demo:
http://shin.cl/cam/

Saludos

SoyJoaquin. · « **Respuesta #1 en:** 15 de Abril de 2012, 17:12:47 pm »

Para Isomap tuve que crear literalmente 6 cámaras y créeme que fue muy, muy, pero muy fastidioso ya que 4 de ellas eran las 4 fachadas, la planta y bueno, la isometría como tal, pero aun así quede con las ganas de poder rotar dicha isometría también en sus 4 lados jaja, uno a la final nunca queda satisfecho y siempre quiere mas.

Muy buen aporte, con esto se podría llegar a crear un juego de 2 jugadores en local dividiendo ambas cámaras en sus respectivos objetos a seguir.

Felicitaciones y te llevas K+ sin duda.
Saludos.

Physlet · « **Respuesta #2 en:** 16 de Abril de 2012, 01:27:36 am »

Se ve interesante pero... ¿Podrían buscar una forma de explicar esto a seres comunes y corrientes como yo que no entendemos nada de diseño, animación y ni desarrollo de juegos?

Es que veo código pero, no entiendo con qué fin.

ilovepixel · « **Respuesta #3 en:** 16 de Abril de 2012, 06:51:13 am »

Lo que hace es crear un rectángulo que limita el área de dibujo, y luego traslada la matriz de los objecto dibujados en base a la posición.
Lo de la animación lo que hace es algo similar, pero sin trasladar la matriz. Lo que hace es dibujar una región rectangular de la imagen completa.

Saludos

Noticias:

Autor Tema: Multiples Camaras 2D para html5 Canvas. (Leído 633 veces)

ilovepixel

Multiples Camaras 2D para html5 Canvas.

Comunidad PHPeros

Multiples Camaras 2D para html5 Canvas.

SoyJoaquin.

Re:Multiples Camaras 2D para html5 Canvas.

Physlet

Re:Multiples Camaras 2D para html5 Canvas.

ilovepixel

Re:Multiples Camaras 2D para html5 Canvas.