Bien Empecemos....
]INDICE:
-Primeros pasos.
-Variables, animaciones.
Introducciòn
Para hacer un videojuego hay que aprender a programarUna consola
de videojuegos es una computadora especializada, y un videojuego es un programa para esa computadora. Por lo tanto, para hacer un videojuego es necesario
saber programar.
de videojuegos es una computadora especializada, y un videojuego es un programa para esa computadora. Por lo tanto, para hacer un videojuego es necesario
saber programar.
Aprender a programar es como jugar un videojuego.Un programa de
computadora es una lista de instrucciones que le dicen a un proceso computacional qué debe hacer en cada momento. Estas instrucciones se escriben en
unos lenguajes especializados llamados lenguajes de programación. Existen
muchos lenguajes de programación. El que nosotros vamos a emplear se llama
simpleJ.
Un lenguaje de programación, al igual que los lenguajes que conocemos tales
como el español o el inglés, tiene su propio vocabulario, sintaxis y semántica
que hay que conocer para poder emplearlo. Por suerte, aprender un lenguaje
de programación es mucho más sencillo que aprender un nuevo idioma. De
hecho, aprender un lenguaje de programación ni siquiera se parece a aprender
un idioma.
computadora es una lista de instrucciones que le dicen a un proceso computacional qué debe hacer en cada momento. Estas instrucciones se escriben en
unos lenguajes especializados llamados lenguajes de programación. Existen
muchos lenguajes de programación. El que nosotros vamos a emplear se llama
simpleJ.
Un lenguaje de programación, al igual que los lenguajes que conocemos tales
como el español o el inglés, tiene su propio vocabulario, sintaxis y semántica
que hay que conocer para poder emplearlo. Por suerte, aprender un lenguaje
de programación es mucho más sencillo que aprender un nuevo idioma. De
hecho, aprender un lenguaje de programación ni siquiera se parece a aprender
un idioma.
Aprender
un lenguaje de programación se parece a aprender a jugar un videojuego. Es
más ¡cada vez que usas un nuevo videojuego estas aprendiendo un nuevo lenguaje!
un lenguaje de programación se parece a aprender a jugar un videojuego. Es
más ¡cada vez que usas un nuevo videojuego estas aprendiendo un nuevo lenguaje!
Nivel 1: Primeros pasos
El simpleJ devkit
Inicia el simpleJ devkit, selecciona el proyecto que se llama Nivel_01 y haz
click en el botón OK. En pocos segundos verás aparecer la ventana del devkit.
click en el botón OK. En pocos segundos verás aparecer la ventana del devkit.
Arriba de estas 3 áreas hay unos botones que corresponden a las acciones que
vas a usar más frecuentemente. También puedes tener acceso a estas acciones,
y unas cuantas más, en los menúes que se encuentran arriba de esos botones.
En el Editor puedes ver ahora el siguiente programa que muestra todo lo que
vas a saber hacer al terminar este nivel. Seguramente no entiendes casi nada
de lo que dice ahí. No te preocupes. Dentro de poco te va a quedar claro qué
significa.
vas a usar más frecuentemente. También puedes tener acceso a estas acciones,
y unas cuantas más, en los menúes que se encuentran arriba de esos botones.
En el Editor puedes ver ahora el siguiente programa que muestra todo lo que
vas a saber hacer al terminar este nivel. Seguramente no entiendes casi nada
de lo que dice ahí. No te preocupes. Dentro de poco te va a quedar claro qué
significa.
setBackground(0, 0, 0);
showAt("Hola!", 12, 4);
pause(1.0);
showAt("Bienvenido a simpleJ", 5, 8);
pause(1.0);
showAt("Lo primero que vas a aprender", 1, 12);
showAt("es como desplegar mensajes en", 1, 13);
showAt("la pantalla.", 1, 14);
pause(4.0);
showAt("Tambien a cambiar el color", 1, 16);
pause(1.0);
1showAt("del fondo", 1, 17);
pause(0.6);
setBackground(0, 0, 31);
pause(0.6);
setBackground(0, 31, 0);
pause(0.6);
setBackground(31, 0, 0);
pause(0.6);
setBackground(31, 31, 0);
pause(0.6);
setBackground(0, 31, 31);
pause(0.6);
setBackground(31, 0, 31);
pause(0.6);
setBackground(0, 0, 0);
pause(1.0);
showAt("y de las letras.", 11, 17);
pause(0.6);
setForeground(0, 0, 31);
pause(0.6);
setForeground(0, 31, 0);
pause(0.6);
setForeground(31, 0, 0);
pause(0.6);
setForeground(31, 31, 0);
pause(0.6);
setForeground(0, 31, 31);
pause(0.6);
setForeground(31, 0, 31);
pause(0.6);
setForeground(31, 31, 31);
pause(2.0);
showAt("Y como borrar la pantalla...", 1, 20);
pause(2.5);
clear();
pause(2.0);
setBackground(0, 0, 31);
showAt("Hola!", 12, 4);
pause(1.0);
showAt("Bienvenido a simpleJ", 5, 8);
pause(1.0);
showAt("Lo primero que vas a aprender", 1, 12);
showAt("es como desplegar mensajes en", 1, 13);
showAt("la pantalla.", 1, 14);
pause(4.0);
showAt("Tambien a cambiar el color", 1, 16);
pause(1.0);
1showAt("del fondo", 1, 17);
pause(0.6);
setBackground(0, 0, 31);
pause(0.6);
setBackground(0, 31, 0);
pause(0.6);
setBackground(31, 0, 0);
pause(0.6);
setBackground(31, 31, 0);
pause(0.6);
setBackground(0, 31, 31);
pause(0.6);
setBackground(31, 0, 31);
pause(0.6);
setBackground(0, 0, 0);
pause(1.0);
showAt("y de las letras.", 11, 17);
pause(0.6);
setForeground(0, 0, 31);
pause(0.6);
setForeground(0, 31, 0);
pause(0.6);
setForeground(31, 0, 0);
pause(0.6);
setForeground(31, 31, 0);
pause(0.6);
setForeground(0, 31, 31);
pause(0.6);
setForeground(31, 0, 31);
pause(0.6);
setForeground(31, 31, 31);
pause(2.0);
showAt("Y como borrar la pantalla...", 1, 20);
pause(2.5);
clear();
pause(2.0);
setBackground(0, 0, 31);
➨Lo primero que vas a hacer es ejecutar el programa para ver qué hace.Haz click en el botón (Start) para ejecutar el programa
Para desplegar mensajes se emplea "showAt"
Ahora vas a escribir un programa muy sencillo. Lo único que debe hacer el
programa es desplegar Hola! en la pantalla.
programa es desplegar Hola! en la pantalla.
Para empezar a escribir un nuevo programa haz click en el botón (New).
Con eso le indicas al devkit que deseas editar un nuevo programa.
Con eso le indicas al devkit que deseas editar un nuevo programa.
NOTA:
Si le hiciste cambios al programa que está en el editor y aún no los has grabado en el disco duro entonces, al intentar crear un nuevo programa, el devkit te indica que hay cambios que se perderían y te pregunta si quieres seguir adelante (y perder esos cambios) o cancelar la operación. Para grabar un programa en el disco duro puedes usar el botón (Save), o el botón (Save as) si es que lo quieres grabar con otro nombre (o si todavía no tiene un nombre).
Escribe esto en el editor:
showAt("Hola!", 13, 6);Ahora ejecútalo haciendo click en el botón➘(START).Si te aparece un mensaje
de error en el Log al intentar ejecutarlo no te preocupes. Nada más revisa lo
que escribiste, compáralo con lo que dijimos que tenías que escribir y corrígelo
en donde te hayas equivocado al copiarlo. Ya que lo puedas ejecutar sin que
aparezca ningún mensaje de error debe aparecer esto en la pantalla:
de error en el Log al intentar ejecutarlo no te preocupes. Nada más revisa lo
que escribiste, compáralo con lo que dijimos que tenías que escribir y corrígelo
en donde te hayas equivocado al copiarlo. Ya que lo puedas ejecutar sin que
aparezca ningún mensaje de error debe aparecer esto en la pantalla:
Al ver el showAt la computadora sabe que lo que hay que hacer es desplegar
un mensaje. El mensaje es "Hola!", o más bien es Hola!, las comillas ("
son nada más para indicarle a la computadora en donde empieza y termina el
mensaje. Y hay que desplegar el mensaje empezando en la columna 13 del
renglón 6 (en simpleJ la pantalla puede desplegar 24 líneas de 32 caracteres
cada una) tal como se ve aquí:
un mensaje. El mensaje es "Hola!", o más bien es Hola!, las comillas ("
son nada más para indicarle a la computadora en donde empieza y termina el
mensaje. Y hay que desplegar el mensaje empezando en la columna 13 del
renglón 6 (en simpleJ la pantalla puede desplegar 24 líneas de 32 caracteres
cada una) tal como se ve aquí:
NOTA
La numeración empieza en cero en vez de uno. Las columnas están
numeradas del 0 al 31 y los renglones del 0 al 23.
Prueba hacerle unos cambios al programa. Cambia el mensaje que despliega
y la posición en la que aparece en la pantalla. ¿Puedes hacer que despliegue el
mensaje en la esquina superior izquierda? O algo un poco más difícil: ¿Puedes
colocar el mensaje en la esquina inferior derecha?
Con pause se pueden hacer pausas
Ahora modifica tu programa para que quede así:
showAt("Hola!", 13, 6);
pause(1.5);
showAt("Como estas?", 10, 9);
showAt("Hola!", 13, 6);
pause(1.5);
showAt("Como estas?", 10, 9);
Ahora haz click en el botón➘(Start) para ejecutar el programa. Al ejecutarse
primero despliega Hola!, después hace una pausa de segundo y medio antes
de desplegar Como estas?
primero despliega Hola!, después hace una pausa de segundo y medio antes
de desplegar Como estas?
Combinando el rojo, el verde y el azul obtienes todos los colores
En las pantallas de los televisores y las computadoras se obtienen todos los
colores por medio de combinaciones de rojo, verde y azul. Para que veas cómo
funciona esto, modifica tu programa para que quede así:
showAt("Hola!", 13, 6);
pause(1.5);
showAt("Como estas?", 10, 9);
pause(1);
setForeground(0, 0, 0);
pause(2);
setForeground(31, 0, 0);
pause(2);
setForeground(0, 31, 0);
pause(2);
6
Combinando el rojo, el verde y el azul obtienes todos
los coloressetForeground(0, 0, 31);
setBackground(0, 0, 0);
pause(2);
setForeground(31, 31, 31);
pause(1.5);
showAt("Como estas?", 10, 9);
pause(1);
setForeground(0, 0, 0);
pause(2);
setForeground(31, 0, 0);
pause(2);
setForeground(0, 31, 0);
pause(2);
6
Combinando el rojo, el verde y el azul obtienes todos
los coloressetForeground(0, 0, 31);
setBackground(0, 0, 0);
pause(2);
setForeground(31, 31, 31);
Y haz click en el botón➘(Start) para ejecutarlo y ver lo que hace. Primero
pone las letras en negro, después en rojo, en verde, en azul (y pone el fondo
en negro porque ¡letras azules sobre un fondo azul no serían visibles!), para
finalmente dejar las letras de color blanco
pone las letras en negro, después en rojo, en verde, en azul (y pone el fondo
en negro porque ¡letras azules sobre un fondo azul no serían visibles!), para
finalmente dejar las letras de color blanco
Tanto setForeground como setBackground necesitan tres números
que indican la cantidad de rojo, verde y azul respectivamente. Esos números
deben tener valores entre 0 y 31.
Un setForeground(0, 0, 31); indica que hay que mostrar las letras
con el valor máximo de azul y nada de rojo ni de verde, por lo tanto las letras
se ven azules. Mientras que un setForeground(31, 0, 0); pone las
letras rojas y un setForeground(0, 31, 0); pone las letras verdes.
Si pones cantidades iguales de rojo, verde y azul te da tonos que van del negro
hasta el blanco. Un setBackground(0, 0, 0); quiere decir que no hay
nada de rojo, ni verde, ni azul, y por lo tanto pone el fondo en negro. Un
setBackground(31, 31, 31); pone el rojo, verde y azul al máximo,
con lo cual el fondo queda de color blanco, y un setBackground(15,
15, 15); hace que el fondo se vea gris.
que indican la cantidad de rojo, verde y azul respectivamente. Esos números
deben tener valores entre 0 y 31.
Un setForeground(0, 0, 31); indica que hay que mostrar las letras
con el valor máximo de azul y nada de rojo ni de verde, por lo tanto las letras
se ven azules. Mientras que un setForeground(31, 0, 0); pone las
letras rojas y un setForeground(0, 31, 0); pone las letras verdes.
Si pones cantidades iguales de rojo, verde y azul te da tonos que van del negro
hasta el blanco. Un setBackground(0, 0, 0); quiere decir que no hay
nada de rojo, ni verde, ni azul, y por lo tanto pone el fondo en negro. Un
setBackground(31, 31, 31); pone el rojo, verde y azul al máximo,
con lo cual el fondo queda de color blanco, y un setBackground(15,
15, 15); hace que el fondo se vea gris.
Al emplear cantidades diferentes de rojo, verde y azul es como se obtienen los
otros colores. Por ejemplo, un setForeground(31, 31, 0); pone las
letras amarillas. Y un setForeground(31, 0, 31); las pone de color
magenta.
Hazle cambios a tu programa y experimenta con diferentes combinaciones de
rojo, verde y azul para que veas qué colores obtienes.
otros colores. Por ejemplo, un setForeground(31, 31, 0); pone las
letras amarillas. Y un setForeground(31, 0, 31); las pone de color
magenta.
Hazle cambios a tu programa y experimenta con diferentes combinaciones de
rojo, verde y azul para que veas qué colores obtienes.
NOTA:
Tal vez te parezca extraño que al combinar rojo con verde te dé amarillo. Eso no es lo que pasa cuando usas lápices de colores sobre una
hoja de papel. Esto se debe a que cuando usas lápices de colores estás
usando un modelo de color sustractivo, y las pantallas de televisión
o de computadora usan un modelo de color aditivo..
clear borra la pantalla
Modifica tu programa para que quede así:
showAt("Hola!", 13, 6);
pause(1.5);
showAt("Como estas?", 10, 9);
pause(1);
setForeground(0, 0, 0);
pause(2);
setForeground(31, 0, 0);
pause(2);
setForeground(0, 31, 0);
pause(2);
setForeground(0, 0, 31);
setBackground(0, 0, 0);
pause(2);
setForeground(31, 31, 31);
pause(2);
clear();
showAt("Hola!", 13, 6);
pause(1.5);
showAt("Como estas?", 10, 9);
pause(1);
setForeground(0, 0, 0);
pause(2);
setForeground(31, 0, 0);
pause(2);
setForeground(0, 31, 0);
pause(2);
setForeground(0, 0, 31);
setBackground(0, 0, 0);
pause(2);
setForeground(31, 31, 31);
pause(2);
clear();
Y haz click en el botón➘(Start) para ejecutarlo. Al final borra todas las letras
de la pantalla.
de la pantalla.
El clear es muy sencillo:
Haz click en el botón (Save as) para grabar tu programa a disco, ponle un
nombre como mi_programa (o algo así) y haz click en OK para que se grabe
Ahora haz click en el botón (Open), selecciona el archivo main.sj y haz
click en OK para verlo en el Editor
Ahora haz click en el botón (Open), selecciona el archivo main.sj y haz
click en OK para verlo en el Editor
También puedes ejecutar el programa paso por paso. Haz click en el botón
(Step). El área Program se divide en dos: ahora está en el modo de ejecución
paso por paso. En la parte superior está la vista del programa que estás ejecutando, con la línea que está a punto de ejecutarse resaltada con un fondo amarillo. En la parte inferior está la vista de la memoria de la computadora:
Las computadoras no piensan
Seguramente ya tuviste oportunidad de equivocarte al escribir algo y de ver
los mensajes de error que aparecen en el Log. Por ejemplo si te equivocas y
escribes esto (con un espacio entre show y At):
los mensajes de error que aparecen en el Log. Por ejemplo si te equivocas y
escribes esto (con un espacio entre show y At):
show At("Hola!", 13, 6);
Te aparece este mensaje de error en el Log:
Te aparece este mensaje de error en el Log:
Error:
Compiler error
expecting ':', found 'at' at line 1 in file <no name>
unexpected token: ( at line 1 in file <no name>
unexpected token: Hola! at line 1 in file <no name>
unexpected token: 13 at line 1 in file <no name>
unexpected token: 6 at line 1 in file <no name>
Compiler error
expecting ':', found 'at' at line 1 in file <no name>
unexpected token: ( at line 1 in file <no name>
unexpected token: Hola! at line 1 in file <no name>
unexpected token: 13 at line 1 in file <no name>
unexpected token: 6 at line 1 in file <no name>
Y si tu error es olvidarte de poner la A mayúscula en showAt y la escribes
con una minúscula:
showat("Hola!", 13, 6);
Entonces te aparece este mensaje de error:
con una minúscula:
showat("Hola!", 13, 6);
Entonces te aparece este mensaje de error:
Error:
No such variable showat at line 1 in file <no name>
No such variable showat at line 1 in file <no name>
Se pueden poner comentarios
Un programa le dice a la computadora paso a paso lo que debe hacer. Para que
un programa sea un buen programa no basta con que funcione correctamente,
además debe estar escrito de manera que otras personas que lo lean puedan
entender fácilmente como funciona. A veces ayuda poner dentro del programa
explicaciones para los lectores, que la computadora simplemente debe ignorar.
A estas explicaciones se les llama comentarios.
En simpleJ existen dos maneras de poner comentarios dentro de un programa.
Para un comentario corto se puede emplear // (2 barras inclinadas una junto
a la otra) que le indican a la computadora que ignore el resto de la línea. Por
ejemplo, si una línea del programa contiene:
setBackground(31, 31, 0); // Fondo amarillo
La computadora ejecuta el comando setBackground(31, 31, 0); e
ignora el // y todo lo que viene después en esa línea.
Para un comentario más largo, que ocupa varias líneas, puedes emplear /*
(barra inclinada seguida de asterisco) que le indica a la computadora que ignore
todo lo que sigue hasta que encuentre */ (asterisco seguido de barra inclinada).
Por ejemplo:
/*
Empezamos por poner el fondo de color negro
y desplegar unos mensajes de bienvenida.
Con unas pausas para que se vea mas interesante
*/
setBackground(0, 0, 0);
showAt("Hola!", 12, 4);
pause(1.0);
un programa sea un buen programa no basta con que funcione correctamente,
además debe estar escrito de manera que otras personas que lo lean puedan
entender fácilmente como funciona. A veces ayuda poner dentro del programa
explicaciones para los lectores, que la computadora simplemente debe ignorar.
A estas explicaciones se les llama comentarios.
En simpleJ existen dos maneras de poner comentarios dentro de un programa.
Para un comentario corto se puede emplear // (2 barras inclinadas una junto
a la otra) que le indican a la computadora que ignore el resto de la línea. Por
ejemplo, si una línea del programa contiene:
setBackground(31, 31, 0); // Fondo amarillo
La computadora ejecuta el comando setBackground(31, 31, 0); e
ignora el // y todo lo que viene después en esa línea.
Para un comentario más largo, que ocupa varias líneas, puedes emplear /*
(barra inclinada seguida de asterisco) que le indica a la computadora que ignore
todo lo que sigue hasta que encuentre */ (asterisco seguido de barra inclinada).
Por ejemplo:
/*
Empezamos por poner el fondo de color negro
y desplegar unos mensajes de bienvenida.
Con unas pausas para que se vea mas interesante
*/
setBackground(0, 0, 0);
showAt("Hola!", 12, 4);
pause(1.0);
showAt("Bienvenido a simpleJ", 5, 8);
pause(1.0);
showAt("Lo primero que vas a aprender", 1, 12);
showAt("es como desplegar mensajes en", 1, 13);
showAt("la pantalla.", 1, 14);
pause(4.0);
pause(1.0);
showAt("Lo primero que vas a aprender", 1, 12);
showAt("es como desplegar mensajes en", 1, 13);
showAt("la pantalla.", 1, 14);
pause(4.0);
Nivel 2:Variables y animaciones
Animaciones
Con lo que ya sabes podrías escribir un programa que haga todo esto. Para que
el texto desaparezca, basta con cambiarle el color a las letras para que tengan
el mismo color que el fondo y ya no se puedan ver (aunque siguen ahí). Para
que vuelvan a aparecer simplemente las devuelves a su color original. Si
quieres que desaparezcan gradualmente, les vas cambiando el color poco a
poco hasta que tengan el mismo color que el fondo. Y para que el texto se
mueva en la pantalla basta con irlo dibujando cada vez en una nueva posición
en la pantalla.
Es importante entender cómo funcionan porque es imposible hacer
un videojuego sin ellos.
Variables
Las computadoras tienen una memoria en la cual almacenan el programa que
están ejecutando y los datos sobre los cuales opera el programa. Los datos se
almacenan dentro de variables.
Una variable es como un cajón dentro del cual puedes guardar un valor. Este
valor puede ser un número, un texto o un procedimiento que le dice cómo hacer
algo
Cada variable tiene un nombre. Dentro de un programa usas ese nombre para
decirle a la computadora cuál es la variable que quieres emplear en un momento
dado. Imagínate que ese nombre es como una etiqueta que le pones a cada cajón
para saber qué es lo que tiene adentro. Tú escoges el nombre que le quieres
poner a cada variable. Por ejemplo, puedes tener una variable que se llama
vidas en la cual almacenas cuántas vidas le quedan al jugador y otra variable
que se llama puntos que contiene la puntuación a la que ha llegado en el
juego.
Las variables están agrupadas en ambientes. En cada momento la computadora
tiene una lista de ambientes visibles. Cuando trata de accesar el valor almacenado
en una variable recorre esta lista de ambientes hasta que encuentra un
ambiente que contiene una variable con ese nombre. El nombre de una variable
es único dentro del ambiente al que pertenece.
Global es el ambiente
en donde vas a crear muchas de las variables en tus programas.
NOTA
Existen reglas que indican cuales son los nombres válidos para una variable. En el Apéndice B, Expresiones, variables, constantes, tipos, operadores y prioridades están esas reglas, junto con más información acerca de todos los operadores aritméticos (suma, resta, multiplicación, etc.).
