Page 1 of 1

Taller #8 - Composición y animación

Posted: Mon Oct 09, 2017 3:09 pm
by xacarana
Para ir preparando las habilidades técnicas que necesitamos para desarrollar el libro digital del final, en esta clase vamos a aprender y a practicar lo siguiente. Con estos tres ejercicios terminamos el seguimiento de la segunda parte del curso, solo queda pendiente la nota de producción del final.
  1. Composición en múltiples planos (color de fondo, patron svg transparente, patron imagen superpuesto)
  2. Composición de objetos en el escenario apartir de un spritesheet
  3. Animación usando una secuencia de png
Referencias
Ejemplo de clase

Este ejercicio se puede optimizar para no repetir tantas veces el mismo código en los objetos. La solución es usar una clase para lo que sea común. Como ejercicio realice el cambio, esto hace parte de la evaluación.

HTML

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.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: 11});
		}
	</script>
</head>
<body>

	<div id="escena">
		<div id="oso"></div>
		<div id="reloj"></div>
		<div id="balon"></div>

		<div id="personaje"></div>

	</div>


</body>
</html>
CSS

Code: Select all

#escena{
	position: relative;
    width: 900px;
    height: 540px;
    margin: 0 auto;
    background-color: yellow;
    background-image: url(../img/black-scales.png),url(../img/patron.png),url(../img/camara.png);
    background-repeat: repeat,repeat-y,no-repeat;
    background-position: 0,0,top right;
    overflow: hidden;
}

#personaje{
	position: absolute;
	background-image: url(../img/caminata.png);
	width: 100px;
	height: 182px;
	top: 1px;
	left: 1px;
}

#reloj{
	position: absolute;
    background-image: url(../img/sprite_objetos.png);
    background-position: -128px 0px;
    width: 128px;
    height: 128px;
    top: 281px;
    left: 121px;
}
#oso{
	position: absolute;
    background-image: url(../img/sprite_objetos.png);
    width: 128px;
    height: 128px;
    top: 291px;
    left: 531px;
}
#balon{
	position: absolute;
    background-image: url(../img/sprite_objetos.png);
    background-position: -256px 0px;
    width: 128px;
    height: 128px;
    top: 451px;
    left: -49px;
}

Re: Taller #8 - Composición y animación

Posted: Mon Oct 30, 2017 4:00 pm
by DianaAristizabal
Ejercicios del Mapa Zonas, Menú con Sprites y Animación.
(Los ejercicios de clase están en la esquina superior derecha).

http://www.dianaristizabal.com/

Re: Taller #8 - Composición y animación

Posted: Mon Oct 30, 2017 4:03 pm
by JorgeBernal
http://www.jabernal.com

Ejercicio de Mapa de Zonas, Animación con Sprites, Menú con Sprites (Está con con los botones de arriba)

Re: Taller #8 - Composición y animación

Posted: Mon Oct 30, 2017 4:07 pm
by Migueco

Re: Taller #8 - Composición y animación

Posted: Fri Nov 10, 2017 7:45 am
by nataliaroldan
Aquí publico mi ejercicio 8

http://nataliarol.com