- Composición en múltiples planos (color de fondo, patron svg transparente, patron imagen superpuesto)
- Composición de objetos en el escenario apartir de un spritesheet
- Animación usando una secuencia de png
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>
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;
}
