data/manual/controlando_la_pantalla/index.html
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Controlando la pantalla - pilas-engine</title>
<link rel="shortcut icon" href="../img/favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Slab:400,700|Inconsolata:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/theme.css" type="text/css" />
<link rel="stylesheet" href="../css/theme_extra.css" type="text/css" />
<link rel="stylesheet" href="../css/highlight.css">
<script>
// Current page data
var mkdocs_page_name = "Controlando la pantalla";
var mkdocs_page_input_path = "controlando_la_pantalla.md";
var mkdocs_page_url = "/controlando_la_pantalla/";
</script>
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/modernizr-2.8.3.min.js"></script>
<script type="text/javascript" src="../js/highlight.pack.js"></script>
<script src="../js/theme.js"></script>
</head>
<body class="wy-body-for-nav" role="document">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side stickynav">
<div class="wy-side-nav-search">
<a href=".." class="icon icon-home"> pilas-engine</a>
<div role="search">
<form id ="rtd-search-form" class="wy-form" action="../search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
</form>
</div>
</div>
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<ul class="current">
<li>
<li class="toctree-l1 ">
<a class="" href="..">Principal</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../que_juegos/">Tipos de juegos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../instalacion/">Instalación</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../about/">Acerca de ...</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../empezando/">Empezando y los primeros pasos con pilas</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../actores/">Actores</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../actores_personalizados/">Actores personalizados</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../grupos/">Grupos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../colisiones/">Colisiones</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../etiquetas/">Etiquetas</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../fisica/">Fisica</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../controles/">Controles</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../joystick/">Joystick</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../imagen/">Imagen</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../sonidos/">Audio: Sonidos y Música</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../dibujado_simple_en_pantalla/">Dibujado simple en pantalla</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../dibujado_avanzado_con_superficies/">Dibujado avanzado con Superficies</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../tareas/">Manejo de tiempo con tareas</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../interpolacion/">Interpolaciones</a>
</li>
<li>
<li>
<li class="toctree-l1 current">
<a class="current" href="./">Controlando la pantalla</a>
<ul>
<li class="toctree-l3"><a href="#controlando-la-pantalla">Controlando la pantalla</a></li>
<li><a class="toctree-l4" href="#modo-depuracion">Modo depuración</a></li>
<li><a class="toctree-l4" href="#orden-de-impresion-atributo-z">Orden de impresión: atributo z</a></li>
<li><a class="toctree-l4" href="#atributos-de-posicion">Atributos de posición</a></li>
</ul>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../comportamientos/">Comportamientos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../escenas/">Escenas</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../interfaz/">Interfaz de usuario</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../menu/">Cómo crear menúes para tu juegos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../mapas_y_plataformas/">Mapas y plataformas</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../dialogos/">Diálogos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../camara/">Manejo de Cámara</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../eventos/">Eventos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../texto/">Textos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../habilidades/">Habilidades</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../depurando/">Depurando</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../como_funciona_pilas_por_dentro/">¿Cómo funciona pilas por dentro?</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../complementos/">Complementos</a>
</li>
<li>
<li>
<li class="toctree-l1 ">
<a class="" href="../desarrolladores/">Guía para desarrolladores</a>
</li>
<li>
</ul>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="..">pilas-engine</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="breadcrumbs navigation">
<ul class="wy-breadcrumbs">
<li><a href="..">Docs</a> »</li>
<li>Controlando la pantalla</li>
<li class="wy-breadcrumbs-aside">
</li>
</ul>
<hr/>
</div>
<div role="main">
<div class="section">
<h1 id="controlando-la-pantalla">Controlando la pantalla</h1>
<p>Para posicionar actores en el escenario
principal es importante conocer las
propiedades de la pantalla.</p>
<p>La pantalla es lo que contiene la ventana
principal de pilas, y que puede observar
una porción del escenario y a un grupo de actores.</p>
<h2 id="modo-depuracion">Modo depuración</h2>
<p>El modo depuración te permite ver información
de utilidad cuando estás desarrollando un juego
o simplemente buscando algún error.</p>
<p>Para iniciar el modo depuración pulsa <strong>F12</strong>. En
la ventana principal aparecerán varios textos
indicando el rendimiento del juego, las coordenadas
de posición de los actores y la posición del
mouse.</p>
<p>El centro de la ventana es, inicialmente, el
punto <code>(0, 0)</code>. Este modelo de coordenadas
es el cartesiano, y lo hemos elegido porque es
el que mejor se adapta a los conocimientos
geométricos que se enseñan en las escuelas.</p>
<h2 id="orden-de-impresion-atributo-z">Orden de impresión: atributo z</h2>
<p>Cuando tienes varios actores en pantalla notaras
que a veces unos aparecen sobre otros.</p>
<p>Para cambiar este comportamiento tienes que modificar
el atributo <code>z</code> de cada actor.</p>
<p>Los valores altos de <code>z</code> indican mucha distancia
entre el observador y el escenario. Mientras que
valores pequeños <code>z</code> harán que los actores tapen
a los demás (porque aparecerán mas cerca del
usuario).</p>
<p>Este es un ejemplo de dos configuraciones distintas
de atributos <code>z</code>:</p>
<p><img alt="" src="../imagenes/controlando_la_pantalla/atributo_z.png" /></p>
<p>Ten en cuenta que inicialmente todos los actores
tienen un atributo <code>z=0</code>.</p>
<h2 id="atributos-de-posicion">Atributos de posición</h2>
<p>Todos los actores tienen atributos cómo:</p>
<ul>
<li><code>x</code></li>
<li><code>y</code></li>
</ul>
<p>que sirven para cambiar la posición del actor dentro de la escena.</p>
<p>También encontrarás atributos que permiten hacer lo mismo, pero
tomando como referencia alguno de los bordes del
actor. Por ejemplo:</p>
<ul>
<li><code>izquierda</code></li>
<li><code>derecha</code></li>
<li><code>arriba</code></li>
<li><code>abajo</code></li>
</ul>
<p>Ten en cuenta que estos valores indicarán la posición del
actor dentro del escenario, no de la ventana. Esto significa que
si cambias la posición de la cámara los actores seguirán estando
en la misma posición pero se verán un poco corridos.</p>
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<a href="../comportamientos/" class="btn btn-neutral float-right" title="Comportamientos"/>Siguiente <span class="icon icon-circle-arrow-right"></span></a>
<a href="../interpolacion/" class="btn btn-neutral" title="Interpolaciones"><span class="icon icon-circle-arrow-left"></span> Anterior</a>
</div>
<hr/>
<div role="contentinfo">
<p>
<!-- Copyright etc -->
</p>
</div>
Creado con <em>MkDocs</em>.
<script>
$(document).ready(function() {
$('img').each(function(elemento) {
if (this.src.indexOf('github.io') > 0) {
this.src = this.src.replace('github.io/imagenes', 'github.io/pilas-manual/imagenes');
}
});
});
</script>
<script>
$(document).ready(function() {
String.prototype.endsWith = function(suffix){
return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
$('a').each(function(){
var x=this.href;
if (!this.href.endsWith('html') && this.href.indexOf('#') < 0 && this.href.indexOf('http://') === -1 && this.href.indexOf('https://') === -1) {
if (this.href.endsWith('/')) {
this.href = this.href + "index.html";
} else {
this.href = this.href + "/index.html";
}
}
});
});
</script>
<script>
function alternar_menu() {
var sidebar = document.querySelectorAll(".wy-nav-side")[0];
var left = sidebar.style.left;
if (left === "-300px") {
sidebar.style.left = "0px";
} else {
if (left === "0px") {
sidebar.style.left = "-300px";
} else {
sidebar.style.left = "0px";
}
}
}
$(document).ready(function() {
document.querySelector('ul.wy-breadcrumbs>li>a').onclick = function() {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (w < 768) {
alternar_menu();
return false;
} else {
return true;
}
}
});
</script>
<style>
.rst-versions {
border: 0 !important;
}
.wy-nav-side {
padding-bottom: 50px;
}
.wy-nav-content-wrap {
background-color: white !important;
}
.wy-nav-content {
background-color: white !important;
}
.star {
display: inline-block !important;
width: 14px !important;
height: 14px !important;
background-image: url('/imagenes/star.png');
margin-bottom: -2px;
margin-left: 4px;
}
</style>
</footer>
<script type="text/javascript">
var dentro_de_pilas_engine = (document.location.href.indexOf('file://') === 0);
// Ocultando la barra de búsqueda
if (dentro_de_pilas_engine) {
var b = document.getElementsByName('q');
b[0].style.display = "none"
}
</script>
<style media="screen">
code {
font-size: 15px !important;
}
</style>
<style>
img {
width: auto !important;
}
pre {
padding: 0px !important;
}
.hljs {
font-size: 15px;
}
td {
padding: 15px;
text-align: center;
}
.wy-menu-vertical li.current {
background: #0B0B0B;
}
.wy-menu-vertical li.on a, .wy-menu-vertical li.current>a {
color: #FFFFFF;
padding: 0.4045em 1.618em;
font-weight: bold;
position: relative;
background: #6C6C6C;
border: none;
border-bottom: none;
border-top: none;
padding-left: 1.618em -4px;
}
.wy-menu-vertical li.current a {
color: rgb(186, 186, 186);
}
.wy-menu-vertical li.current a:hover {
background: #444444;
}
</pre>
</div>
</div>
</section>
</div>
<div class="rst-versions" role="note" style="cursor: pointer">
<span class="rst-current-version" data-toggle="rst-current-version">
<span><a href="../interpolacion/" style="color: #fcfcfc;">« Previous</a></span>
<span style="margin-left: 15px"><a href="../comportamientos/" style="color: #fcfcfc">Next »</a></span>
</span>
</div>
</body>
</html>