Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Medidor de Salud en Juegos Con CSS3

    Enviado por

    Eliseo David Mend
    40 visualizações7 páginas

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    40 visualizações7 páginas

    Medidor de Salud en Juegos Con CSS3

    Enviado por

    Eliseo David Mend

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 7

    Medidor de salud en juegos con CSS3

    Enviado por danielholmlund el 18 de Noviembre de 2011 a las 13:43:53

    ndice
    1. 2. 3. 4. 5. 6.

    Introduccin Medidor bsico Adicin de degradados CSS al medidor Adicin de animaciones CSS al medidor Adicin de fuentes web al medidor Ms recursos
    Funcin Esquinas redondeadas CSS3 Sombras CSS3 Degradados CSS Animaciones CSS Compatible? s s s s

    Compatibilidad del encapsulador para este artculo

    Introduccin
    Muchos juegos se disean con elementos comunes como indicadores del juego (para salud, magia, municin, dinero, etc.), o paneles de control y de estado que se colocan por los bordes. Forman parte del juego, pero no necesariamente de la escena de grficos principal. En HTML5, el rea principal de grficos se suele crear con una etiqueta canvas (lienzo). A continuacin, el desarrollador escribe con JavaScript para dibujar en el rea del lienzo y crear el juego. Tiene sentido quitar los elementos del juego que no forman parte de la escena de grficos principal del elemento de lienzo por un par de razones. En primer lugar, los objetos se pueden animar a menudo en el DOM mediante animaciones y transiciones CSS para disfrutar de una mayor optimizacin del navegador y de una aceleracin uniforme del hardware. Es decir, las animaciones que se puedan realizar en CSS funcionarn mejor que las realizadas en JavaScript. En segundo lugar, el DOM y CSS no pueden manipular los objetos que se dibujan en una etiqueta de lienzo con JavaScript. De este modo, moviendo elementos del juego al documento

    HTML principal y colocndolos en el elemento de lienzo, se puede conseguir la misma apariencia pero habr que usar la potencia de CSS3, as como de JavaScript, para manipularlos. En este artculo vamos a crear un medidor. Como ejemplo concreto, crearemos un medidor de salud.

    Medidor bsico
    En primer lugar el marcado bsico HTML:
    <html> <body> <style> #meter-container { width: 300px; } .meter { height: 10px; position: relative; background: #333; border: 1px solid black; -moz-border-radius: 30px;

    -webkit-border-radius: 30px; border-radius: 30px;


    padding: 10px;

    -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
    } .strong-health { background-color: #7eff00; width: 85%; } .weak-health { background-color: #ff0; width: 35%; } .danger-health { background-color: #f00; width: 10%; } .meter-value { /* Position the value */ position: absolute; top: 0; left: 0; bottom: 0; right: 0;

    -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px;


    -moz-border-radius-topright: 5px;

    -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;

    -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px;


    -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } </style> <div id="meter-container"> <div class="meter"> <div class="meter-value strong-health"> </div> </div> </div> </body> </html>

    Se puede usar esto para crear tres estilos de medidor de salud. Medidor de salud en peligro Medidor de salud dbil Medidor de salud fuerte Estos medidores no estn mal y la nica parte de CSS3 que se ha usado es la de esquinas redondeadas, que permite redondear las esquinas del medidor de vida.

    Adicin de degradados CSS al medidor


    #gradient-example .strong-health { background-color: #7eff00; background-image: -moz-linear-gradient(top, #78F165, #0CF30C); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #78F165),color-stop(1, #0CF30C)); background-image: -webkit-linear-gradient(#78F165, #0CF30C); width: 85%; } #gradient-example .weak-health { background-color: #ff0; width: 35%; background-color: #f1a165; background-image: -moz-linear-gradient(top, #F1F165, #F3F30C); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F1F165),color-stop(1, #F3F30C)); background-image: -webkit-linear-gradient(#F1F165, #F3F30C); }

    #gradient-example .danger-health { background-color: #f00; width: 15%; background-color: #f0a3a3; background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323)); background-image: -webkit-linear-gradient(#f0a3a3, #f42323); }

    Medidor de salud en peligro Medidor de salud dbil Medidor de salud fuerte Los degradados CSS son parecidos a los degradados de otras herramientas grficas como Photoshop o GIMP. Se define un tipo de transicin, ya sea lineal o radial, y, a continuacin, se define un color para el punto inicial y otro para el punto final. El degradado pasar suavemente de uno a otro. Tambin se puede definir cualquier cantidad de puntos finales que permiten pasar a un color intermedio antes de pasar al siguiente color de parada o al color final. Estos degradados CSS son sutiles, pero dejan que el color del medidor de vida destaque sobre el fondo. En este momento, tambin debera comprobar que est leyendo este artculo en un navegador habilitado para CSS3, ya sea IE9+, Firefox, Opera, Safari o Chrome. De lo contrario, no podr ver el degradado.

    Adicin de degradados CSS al medidor


    El marcado es el mismo.

    @-webkit-keyframes glow { 0% { -webkit-box-shadow: 0 0 16px rgba(240, 163, 163, 0.5); border-color: rgba(0,0,255,0.5); } 100% { -webkit-box-shadow: 0 0 16px rgba(240, 0, 0, 1.0), 0 0 36px rgba(240, 0, 0, 1.0); border-color: rgba(0,0,255,1.0); } } @-moz-keyframes glow { 0% { -moz-box-shadow: 0 0 16px rgba(240, 163, 163, 0.5); border-color: rgba(0,0,255,0.5); } 100% {

    -moz-box-shadow: 0 0 16px rgba(240, 0, 0, 1.0), 0 0 36px rgba(240, 0, 0, 1.0); border-color: rgba(0,0,255,1.0); } } @-ms-keyframes glow { 0% { -ms-box-shadow: 0 0 16px rgba(240, 163, 163, 0.5); border-color: rgba(0,0,255,0.5); } 100% { -ms-box-shadow: 0 0 16px rgba(240, 0, 0, 1.0), 0 0 36px rgba(240, 0, 0, 1.0); border-color: rgba(0,0,255,1.0); } } #animation-example .danger-health { background-color: #f00; width: 15%; background-color: #f0a3a3; background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); background-image: -webkit-gradient(linear,left top,left bottom,colorstop(0, #f0a3a3),color-stop(1, #f42323)); background-image: -webkit-linear-gradient(#f0a3a3, #f42323); -webkit-animation-name: glow; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: glow; -moz-animation-duration: 1s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-timing-function: ease-in-out; -ms-animation-name: glow; -ms-animation-duration: 1s; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; -ms-animation-timing-function: ease-in-out;

    El medidor de salud en peligro: Ahora el medidor de salud en peligro brilla para llamar la atencin del jugador sobre el estado crtico de su salud Las animaciones CSS permiten que el navegador pase de un conjunto de estilos CSS a otro conjunto de estilos CSS. Tambin se pueden definir estilos intermedios para la animacin. En este caso, slo defino dos estilos. El primero est al 0 % o al principio de la animacin. El

    primero est al 100 % o al final de la animacin. Para crear el efecto brillante, el navegador pasar suavemente la propiedad de sombras de un tamao pequeo a uno grande.

    Adicin de fuentes web al medidor


    Finalmente, voy a aadir el porcentaje al medidor usando una fuente web desde la pgina Google web fonts. Enlace a la fuente web. Google ha creado estas fuentes para que estn a disposicin del pblico y libres de derechos de autor.
    <link href='http://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'>

    Cree algunas reglas CSS para este texto.


    .textbox {

    font-size: 40px; color: #fff; font-family: 'Chewy', cursive, helvetica, arial, sans-serif; text-shadow: 2px 3px 1px #000; letter-spacing: 0px; -webkit-text-fill-color: #fff; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; text-align: center; text-transform:uppercase;

    Aqu est el marcado HTML para los medidores


    <div id="animation-example"> <link href='http://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'> <div class="container"> <div class="meter"> <div class="textbox">15%</div> <div class="meter-value danger-health"> </div> </div> <p>Danger Health Meter</p> <div class="meter"> <div class="textbox">35%</div> <div class="meter-value weak-health"> </div> </div> <p>Weak Health Meter</p> <div class="meter"> <div class="textbox">85%</div> <div class="meter-value strong-health"> </div>

    </div> <p>Strong Health Meter</p> </div> </div> </div>

    15 %
    Medidor de salud en peligro

    35 %
    Medidor de salud dbil

    85 %
    Medidor de salud fuerte
    Promedio:

    Etiquetas: Content Agregar comentario nuevo English Franais Deutsch Italiano

    Você também pode gostar