Animación cuadro a cuadro usando spritely y animación por programación usando greensock

En esta sección se resolverán temas de diseño gráfico, como uso de herramientas como photoshop, illustrator, herramientas para prototipado, herramientas de diseño web, entre otros.

Moderator: julianmartinez16

Post Reply
User avatar
xacarana
Site Admin
Posts: 950
Joined: Fri Jan 15, 2016 6:13 pm

Animación cuadro a cuadro usando spritely y animación por programación usando greensock

Post by xacarana » Mon Apr 17, 2017 3:34 pm

En este ejercicio vamos a realizar una animación usando un spritesheet, este es una imagen que esta compuesta por varios frames de una animación, como muestra la siguiente imagen:

Image

Luego debemos descargar la librería spritely y jquery. Por último implementar el siguiente código.

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.spritely.js"></script>
	<script type="text/javascript">
		window.onload = function()
		{
			$('#personaje').sprite({fps: 12, no_of_frames: 5});
		}
	</script>
	<style type="text/css">
		#personaje{
			background-image: url(img/monsterSpriteSheet.png);
			background-repeat: no-repeat;
			width: 110px;
			height: 110px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="personaje"></div>
</body>
</html>
Para animar y desplazar el personaje, combinamos dos librerías, spritely y greensock, como se muestra en el siguiente ejemplo.

Nota: Tenga presente los siguientes enlaces, para entender mejor que pasa en el código de la animación.

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
	<script type="text/javascript" src="js/jquery.spritely.js"></script>
	<script type="text/javascript">
		window.onload = function()
		{
			$('#personaje').sprite({fps: 12, no_of_frames: 7});
			TweenLite.to($('#personaje'), 5, {opacity:0,left:"490px",ease: Bounce.easeIn});
		}
	</script>
	<style type="text/css">
		#personaje{
			position: absolute;
			background-image: url(img/monsterSpriteSheet.png);
			background-repeat: no-repeat;
			width: 100px;
			height: 100px;
		}
		#escena{
			width: 600px;
			height: 110px;
			background-color: cyan;
			position: relative;
		}
		#pasto{
			position: absolute; 
			z-index: 1;
			width: 100%;
			height: 20px;
			background-color:green;
			bottom:0px;
			left: 0px;
		}
	</style>
</head>
<body>
<div id="escena">
	<div id="pasto"></div>
	<div id="personaje"></div>
</div>
</body>
</html>
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

Post Reply