31 - TAP - Cómo trabajar con Canvas para crear Gráficos(J2ME)

Summary

Este tutorial número 31 de la serie de tópicos avanzados de programación en Java 2 se enfoca en el manejo del canvas en Java 2 Micro Edition (J2ME), esencial para el desarrollo de gráficos en aplicaciones móviles. El instructor guía a los estudiantes a través del proceso de creación de un proyecto de aplicación móvil, donde se ilustra cómo dibujar en canvas utilizando diferentes métodos y herramientas. Se abordan conceptos básicos como la creación de un objeto Canvas, el establecimiento de colores y la realización de figuras geométricas como cuadros y círculos. Además, se explora la integración de texto y la manipulación de imágenes en el canvas. El tutorial es práctico y enfatiza la importancia del aprendizaje activo, animando a los estudiantes a experimentar y descubrir por sí mismos las posibilidades de diseño gráfico en el entorno de J2ME.

Takeaways

• 📚 Aprender a trabajar con canvas en Java 2 para dibujar gráficos en aplicaciones móviles.
• 🎨 Crear un proyecto básico llamado 'Mi Chamba' para entender el uso de canvas.
• 🖼️ Utilizar la clase Canvas para manejar gráficos y escuchar eventos de dibujo.
• 📐 Configurar un fondo azul para el canvas utilizando RGB para definir colores.
• 🟢 Dibujar un cuadrado relleno en la pantalla con el tamaño correspondiente a la pantalla del dispositivo.
• 😃 Crear una carita utilizando un círculo como base y añadir un ojo para darle vida.
• 👁️ Ajustar los colores y las dimensiones para que los elementos gráficos se muestren correctamente.
• 📏 Conocer las dimensiones del dispositivo usando `System.out.println` para medir la pantalla.
• 🖋️ Dibujar texto en la pantalla con diferentes colores y alineaciones.
• 🏞️ Incluir imágenes en la aplicación y manipular su posición y tamaño.
• 📁 Manejar recursos de imagen colocando los archivos en la carpeta 'src' y referenciando la ruta correcta.
• 🔲 Aprender sobre la alineación y el posicionamiento de elementos gráficos en el canvas.

Q & A

¿Qué es un canvas en Java 2 y para qué se utiliza?

Un canvas en Java 2 es una superficie en la que se pueden dibujar gráficos. Se utiliza principalmente para la creación de aplicaciones móviles que requieran de elementos visuales como juegos o interfaces gráficas simples.

¿Cómo se crea un proyecto para trabajar con canvas en Java 2?

Se inicia creando un nuevo proyecto de aplicación móvil, luego se selecciona la opción de crear un canvas y se le asigna un nombre, como 'MiCama', para luego continuar con la creación de la clase principal asociada.

¿Qué métodos son importantes en una clase que extiende de Canvas en Java 2?

Los métodos importantes en una clase que extiende de Canvas incluyen el constructor, el método para dibujar (`paint`), y el método para manejar eventos de entrada (`keyPressed`, `keyReleased`, etc.).

¿Cómo se asigna un color de fondo a un canvas en Java 2?

Se utiliza el método `setColor` para asignar un color de fondo a un canvas, especificando los valores de rojo, verde y azul (RGB). Por ejemplo, para un color azul se usaría 0 para rojo y verde y 255 para azul.

¿Cómo se dibuja un cuadrado relleno en un canvas en Java 2?

Para dibujar un cuadrado relleno se utiliza el método `fillRect`, el cual recibe cuatro parámetros: las coordenadas x e y del punto superior izquierdo y el ancho y el alto del cuadrado. Se obtiene el tamaño de la pantalla con `getScreenWidth` y `getScreenHeight` para que el cuadrado llene toda la pantalla.

¿Cómo se obtiene la información del tamaño de la pantalla en una aplicación de canvas en Java 2?

Se pueden utilizar los métodos `getScreenWidth()` y `getScreenHeight()` para obtener la información del tamaño de la pantalla en una aplicación de canvas en Java 2.

¿Cómo se dibuja un círculo en un canvas en Java 2?

Para dibujar un círculo se utiliza el método `fillArc`, que requiere los parámetros de la coordenada x e y, el ancho y el alto del círculo, el ángulo de inicio y el ángulo del arco. Para un círculo completo, el ángulo de inicio es 0 y el ángulo del arco es 360.

¿Cómo se asigna un color personalizado a un elemento gráfico en un canvas en Java 2?

Se utiliza el método `setColor` para asignar un color personalizado a un elemento gráfico, donde se especifican los valores RGB (rojo, verde, azul) para crear el color deseado.

¿Cómo se dibuja texto en un canvas en Java 2?

Para dibujar texto se utiliza el método `drawString`, que requiere la cadena de texto a dibujar, la coordenada x e y donde se desea que comience el texto y el tamaño de la fuente.

¿Cómo se carga y muestra una imagen en un canvas en Java 2?

Se debe crear un objeto de tipo `Image`, cargar la imagen usando el método `createImage` y luego dibujarla en el canvas con `drawImage`, especificando las coordenadas x e y donde se debe mostrar la imagen.

¿Cómo se posiciona una imagen en un canvas para que no se superpongan otros elementos gráficos?

Se debe ajustar las coordenadas x e y donde se llama al método `drawImage` para asegurarse de que la imagen se muestre en la posición deseada sin superponer otros elementos gráficos. Esto puede requerir pruebas y ajustes según el tamaño de la imagen y el diseño de la aplicación.

¿Qué tipo de aplicaciones móviles se pueden crear utilizando canvas en Java 2?

Con canvas en Java 2 se pueden crear aplicaciones móviles que requieran gráficos como juegos, relojes, interfaces de usuario gráficas, entre otros. El canvas permite la creación de elementos visuales simples y la manipulación de imágenes y texto.

Outlines

00:00

😀 Introducción a la programación con Canvas en Java 2

Este primer párrafo presenta el videotutorial número 31 de la serie de tópicos avanzados de programación. Se centra en el manejo del canvas en Java 2, esencial para dibujar gráficos en aplicaciones móviles, como juegos. Se menciona la creación de un proyecto llamado 'Mi Chamba' y se inicia la configuración de un canvas personalizado llamado 'Mi Cama', que hereda de la clase Canvas y implementa los métodos necesarios para manejar eventos y acciones.

05:01

🎨 Creación de un fondo azul y dibujado de un cuadrado

En el segundo párrafo, se aborda cómo establecer un color de fondo azul para la pantalla利用 el método setColor y los valores RGB. Luego, se explica cómo dibujar un cuadrado relleno que abarque toda la pantalla utilizando el método drawRect con las coordenadas adecuadas. Se destaca la importancia de conocer las dimensiones del dispositivo para que el cuadrado se muestre correctamente, y se muestra cómo obtener estas dimensiones mediante getDisplay().

10:02

🟡 Dibujo de un círculo y personalización con colores

Este párrafo se enfoca en el dibujo de un círculo利用 el método drawArc, que requiere parámetros como las coordenadas de inicio, el ancho, el alto y los ángulos de inicio y finalización. Se describe cómo elegir un color similar al carne para el círculo, supuestamente para representar una carita. A continuación, se muestra cómo ajustar el tamaño y la posición del círculo para crear una representación de un Pacman con un ojo verde adicional.

15:03

🔵 Dibujo de un rectángulo y exploración de opciones gráficas

En el cuarto párrafo, se continúa con la creación gráfica y se introduce el dibujo de un rectángulo utilizando el método drawRect. Se menciona la personalización del rectángulo con un color rojo y se ajusta su tamaño y posición. Además, se exploran otras posibilidades gráficas, como el dibujo de texto en diferentes colores y alineaciones utilizando el método setFont y drawString, y se sugiere su utilidad en juegos para mostrar la puntuación.

20:04

🖼️ Inclusión de imágenes en la aplicación con Canvas

El último párrafo se dedica a la inclusión de imágenes en la aplicación. Se describe el proceso de guardar una imagen en la carpeta src del proyecto y luego crear un objeto de tipo Image para manejarla. Se explica cómo cargar la imagen en el constructor de la clase Canvas y cómo mostrarla en la pantalla utilizando el método drawImage. Finalmente, se discute la necesidad de ajustar la posición de la imagen para que se muestre correctamente en el dispositivo, tomando en cuenta sus dimensiones.

Keywords

💡Canvas

Canvas en el contexto de la programación, especialmente en Java 2, se refiere a un área en la pantalla donde se pueden dibujar gráficos y elementos visuales. Es fundamental para el desarrollo de aplicaciones gráficas como juegos móviles. En el video, se utiliza Canvas para dibujar elementos como un cuadrado, un círculo y texto, mostrando su importancia en la creación de interfaces gráficas de usuario.

💡Java 2

Java 2 es una versión del lenguaje de programación Java que incluye mejoras y nuevas funcionalidades. En el video, se utiliza Java 2 para crear una aplicación móvil que utiliza gráficos y elementos visuales, destacando su capacidad para manejar aplicaciones avanzadas y gráficas.

💡Dibujo gráfico

El dibujo gráfico es el proceso de crear imágenes a través de programación en una pantalla. En el video, se abordan técnicas de dibujo gráfico como la creación de formas geométricas (cuadrado, círculo) y el uso de colores para dar vida a la interfaz de la aplicación.

💡Métodos de dibujo

Los métodos de dibujo son funciones específicas utilizadas para crear formas y elementos visuales en un canvas. En el video, se mencionan métodos como 'setColor', 'drawRect', 'drawCircle', y 'drawString', que se aplican para dibujar elementos como un cuadrado, un círculo y texto en la pantalla.

💡Colores RGB

RGB es un modelo de color utilizado en la representación de colores en la visualización de imágenes en televisores, monitores de computadora y otros dispositivos de salida. En el video, se describe cómo utilizar los valores RGB (rojo, verde, azul) para asignar colores a los elementos gráficos, como el fondo de pantalla y el texto.

💡Aplicaciones móviles

Las aplicaciones móviles son programas diseñados para funcionar en dispositivos móviles como teléfonos inteligentes y tabletas. En el video, se habla sobre el desarrollo de una aplicación móvil que utiliza canvas para dibujar elementos visuales, resaltando la relevancia de las habilidades gráficas en el desarrollo de aplicaciones móviles.

💡Clases y objetos

Las clases y objetos son conceptos fundamentales de la programación orientada a objetos. Una clase es una plantilla que define una estructura de datos y los métodos que pueden operar en esa estructura, mientras que un objeto es una instancia de una clase. En el video, se crea una clase 'MiCama' que extiende de Canvas y se utiliza para dibujar elementos en la pantalla.

💡Constructores

Los constructores son métodos especiales en programación orientada a objetos que se utilizan para inicializar objetos. En el video, se muestra cómo se utiliza un constructor en la clase 'MiCama' para crear una nueva instancia de un canvas y establecer sus propiedades iniciales.

💡Imagenes en aplicaciones

Las imágenes son un componente visual común en las aplicaciones gráficas y se utilizan para mejorar la experiencia del usuario. En el video, se discute cómo se pueden cargar y mostrar imágenes en una aplicación utilizando canvas, lo que se demuestra con la inclusión de una imagen de un pollo en la pantalla.

💡Diseño gráfico

El diseño gráfico es el proceso de creación visual de elementos en una interfaz gráfica de usuario. En el video, se aborda el diseño gráfico al combinar formas geométricas, colores y texto para crear una interfaz de usuario atractiva y funcional en una aplicación móvil.

💡Juegos móviles

Los juegos móviles son aplicaciones diseñadas para el entretenimiento que se ejecutan en dispositivos móviles. El video ofrece un ejemplo de cómo se pueden utilizar las capacidades gráficas de Canvas para desarrollar juegos móviles, destacando la importancia de la programación gráfica en la creación de juegos interactivos.

Highlights

Introducción a la serie de videotutoriales de tópicos avanzados de programación con Java 2.

Explicación de la utilidad de las canvas en J2ME para dibujar gráficos en aplicaciones móviles.

Creación de un proyecto de aplicación móvil y selección de las herramientas necesarias.

Proceso para crear una clase Canvas llamada 'MiCama' que extiende de la clase Canvas.

Implementación de métodos básicos en la clase 'MiCama' para manejar eventos y acciones.

Iniciación del método 'start' para crear un objeto de tipo 'MiCama' y asignarlo a la pantalla.

Uso de 'getDisplay()' para establecer la pantalla del dispositivo移动设备.

Dibujo de un cuadrado relleno de color azul para cubrir la pantalla.

Determinación de las dimensiones del dispositivo usando 'System.out.println'.

Selección de un color para dibujar una carita, supuestamente de color carne.

Dibujo de un círculo para representar la cara de un personaje, como un Pacman.

Adición de un ojo y ajuste de las coordenadas para mejorar la apariencia del Pacman.

Selección de un color y dibujo de un rectángulo para agregar detalles al Pacman.

Uso de métodos para dibujar texto en la pantalla con diferentes colores y alineaciones.

Inclusión de imágenes en la aplicación y manejo de su posición y tamaño en la pantalla.

Importancia de la visualización gráfica en el desarrollo de juegos móviles y aplicaciones.

Conclusión del tutorial con una breve aplicación que utiliza canvas para dibujar una carita de Pacman con un ojo verde.

Reflexión sobre la importancia del deseo de aprendizaje y el rol del docente como transmisor del conocimiento.

Transcripts

hola que tal bienvenidos al

videotutorial número 31 de la serie de

tópicos avanzados de programación

trabajando con java 2 en este vídeo

tutorial lo que vamos a ver es el manejo

o el trabajo de canvas en

en java 2000 para que nos sirven las

canvas en j2me sencillo para para

dibujar algo así como los gráficos de

nuestras aplicaciones móviles si

quisiéramos crear un jueguito pues es

obvio que vamos a necesitar canvas pues

el día de hoy vamos a ver un pequeño

ejemplo de canvas para poder manejar más

adelante cositas de esto vamos a

creernos un proyecto y por principio de

cuentas vamos a crear un llevo a mi

mobile application y lo vamos a poner

vamos a destilar estos de aquí y le

vamos a poner

mi chamba

mi cama ahí está así ni más ni menos

a este proyecto simple y sencillamente

vamos a darle clic en siguiente yo voy a

seleccionar este de aquí y le damos fin

es que vamos a necesitar vamos a

necesitar por principio de cuentas un

visual meet led y una cama entonces

primero vamos a crear nuestro nuestro

visual me late la cual le vamos a poner

principal

igual

ahí está

en él

para que te le vamos a poner mi cama

y le damos finish

ya tenemos ok aquí tenemos ya nuestro

miles visuales ahora dentro del paquete

vamos a crear

en una campa entonces para lo cual vamos

a hacer clic en o de error si ya lo

tuviéramos aquí pues desde a ir pero

como no lo tenemos

damos clic en mover y en esta parte de

aquí vamos a seleccionar unir canvas y

aquí la vamos a poner mi campo

mi cama

hoy está

finish y ya tenemos dos clases por

defecto mi cama como pueden ustedes ver

se extiende de canvas canvas es un acto

de manejar lo grave de eso efectivamente

de canvas y aparte implementar comandos

listener para manejar obras y acciones

tiene su constructor tiene sub-20 para

dibujar

tiene su presente que realizó que ir

todo el rollo no estudiado para por

defecto y mi clase principal está en el

sur pues tiene su respectivo código muy

bien

lo que vamos a hacer por principio de

cuentas es irnos al start en esta parte

de aquí y vamos a borrar esto que tiene

el start lo que vamos a hacer en el

start es crear un objeto del tipo mi

cama entonces poner mi cama perdón mi

cama

y es el ojo con esto es la clase no el

paquete porque le damos mi cama

igual bueno es más vamos a crear un

objeto que le vamos a poner mi canvas

cambita le vamos a poner capital

igualdad new

mi cama

y ahí está

y ya tenemos el objeto del tipo mi cama

y ahora lo que vamos a hacer es ya que

tenemos el objeto es más para ser más

exactos al negar de cambita de vamos a

poner pantalla

pantalla porque porque es nuestra

pantalla va a ser exactamente lo que

tenga la cama entonces vamos ahora

después de que ya tenemos el objeto del

tipo mi cama que se llama pantalla ahora

lo que lo que sigue pues es en general

el display entonces ponemos display

puntito de display y ésta dice hasta y

vamos bien y ahora le decimos quién

said current ya automáticamente en un 10

y sabes que el único que puedes asignar

es pantalla y ya está lo que acabamos de

hacer en este en el start que es el

realmente el método que inicializa en la

aplicación móvil es crear un objeto del

tipo camba que se llama pantalla después

simple y sencillamente obtengo el

display si le asignó la pantalla muy

bien si yo lo corro ahorita va a verse

algo medio raro pero pero ya va a tener

algo ahí esta hoja

chequen aquí lo que pasa en la parte de

alta ahí está no sé si alcanzan a ver

que hay como que se como que se monta

algo así como de texto es exactamente lo

que entienden lo que tiene en su país

el objeto o el objeto de la clase en mi

cama entonces dices ample text

si yo aquí le pongo más cosas pues se va

a ver más

veamos híjole ya de clic en otro lado

donde no está

ahí está ha sido alcanzan a ver que

estamos mandando llamar al

a la cama que acabamos de ver muy bien

pues esto no nos va a servir

absolutamente para nada simple y

sencillamente borramos vamos a trabajar

con nuestra cama lo primero que vamos a

hacer todo vamos a ver aquí en el país

que ustedes pueden crear sus propios

métodos si quieren este dibujar con

métodos pero lo va a hacer ahorita por

el momento que en el pan y lo primero

que vamos a hacer es poner un color de

color

y le vamos a poner que será una sura un

color azul de fondo

entonces ponemos aquí ojo con esto para

asignar colores vamos a ponerle aquí

el color ahí está de entrada me dice que

debo de recibir como parámetros red en

green y blue si lo alcanzan a ver aquí

está simple y sencillamente int

regling lo que vamos a utilizar este de

parámetros de 0 a 255 si queremos que

sea totalmente azul pase de 255 y así

sucesivamente vamos a verlo entonces en

esta parte como nosotros queremos un

color azul en rojo va a 0

en el hereje en green bay a 0 y be the

blue y si le ponemos 255 es lo que

estamos poniendo es un color azul pero

qué vamos a hacer vamos a dibujar un

cuadrado que nos rellene

la pantalla es de color azul entonces

vamos a poner igualito que como eran

mínimas y menos correcto aquí está que

recibe cuatro parámetros

en la coordenada de x la coordenada y el

tamaño en ancho y el tamaño en alto muy

bien ahí está como lo queremos que

inicie en 0 y 0 ahora como como sabemos

cuánto mide s es donde viene el problema

entonces ponemos get retweet y ya con

eso obtienes y va a llegar hasta ahí

estamos diciendo sabes que dibuja me de

color azul un cuadrado relleno que

comienza en la coordenada 0 y es x 0 y

es cero y en todo su ancho y en todos su

alto ahora vamos a probar a ver si

efectivamente lo hace

corremos

y tenemos nuestra aplicación más o menos

así ahí está ya está ya lo hace que por

lo menos eso sí lo hacen no está ok si

queremos salir pues no hay de otra más

que colgar y ahí está muy bien vamos por

buen camino ya logramos el ancho ahora

si tú quisieras saber cuánto mide pues

puedes poner un sistema

sistema punto out punto por interviene y

en esta parte de aquí le vamos a poner

the wind

y aquí le ponemos

es una o más es para saber cuánto miden

los puntitos

alto

james

ahí está si lo ejecutamos en esta parte

de nuestra consola va nos van a aparecer

las medidas de nuestro dispositivo

ahí están sido alcanzan a ver qué quiere

decir que mi dispositivo la pantalla y

está mi display como tal

mide 320 de ancho a 320 y en x perdón y

291 año hacia acá ok

pues aunque se vea otra cosa pero ese es

el dispositivo como tal aquí parece que

es un cuadrado perfecto no pero en

realidad es esto que está muy bien pues

a partir de estas coordenadas las zonas

que vamos a pegar nos vamos a utilizar

320 en x 291 en que va a ser lo máximo

que podamos utilizar muy bien ahora

vamos a comenzar a dibujar en nuestra

cama vamos a dibujar un círculo porque

por ejemplo una carita vamos a suponer

que queremos dibujar una carita

punto de color

y estar vamos a poner que la queremos de

color carne pero no sabemos cómo es la

carita de color carne simplemente vamos

aparente y en esta parte de aquí le

damos evitar dolores y buscamos algo que

se parezca el color carne no

supongamos eso y aquí vemos que es 192

ciento 179 121 190 y 279 192

102 79 y 129 pero si no mal recuerdo y

ahí está para lograr ese color que

tenemos sistemas o menos es el carmen

muy bien ya tenemos el color ahora vamos

a dibujar nuestro círculo g

punto field arq ahí está que necesitamos

para dibujar un círculo relleno de este

la variable x salvador en x en su ancho

su alto su ángulo de inicio y su ángulo

este del arco en este caso y su círculo

del ángulo sería 0 y acá 360 entonces

vamos a poner en x vamos a suponer que

ponemos

20

20 en x

20

30 de ancho

30 de alto ahora si el ángulo el ángulo

inicial que va a ser cero y cuántos

grados 360 ok ya lo tenemos entonces nos

debería de dibujar un círculo más o

menos que como qué color carnita a ver

si es cierto

y ahí lo tenemos ya lo vieron muy bien

pero ahora como que un circulito no se

ve muy bien estaría bien como que

dibujaremos algo así como como un pacman

no vamos a darle más para que sea más

grande vamos a ponerle 80 80 guardamos

y ahí está un poquito mejor mayor bien

pero ahora vamos a reducirle simple y

sencillamente le vamos a decir sabes que

si quiero que me dibuja es un círculo

termo relleno entonces vamos a poner por

ejemplo aquí 30 y aquí le vamos a poner

que será ver si latino 285 se pongamos

a ver qué sucede en esta es cuestión de

probando más o menos

y ya que le faltó un mojito en esta

parte de por aquí pues entonces si vamos

a poner un ojito vamos a ponerle un

color verde vamos a poner por la tan

verde por ejemplo

por ejemplo ese 32 230 47 copiamos esto

de aquí control 0

bueno es más nada más lo de acá para que

no vaya tanta bronca no control ver y es

32 230 47

32

230 47 para un color verde más o menos

como este y ahora le decimos que vamos a

utilizar un filo y el arq y lo vamos a

poner más o menos como que en la

coordenada 20 si teníamos 20 yo creo que

vamos a poner como por la 35

25 a ver qué pasa y ahora el de 5 de 5

es más de 10 un ojito de 10 por 10 y es

obvio que aquí va a tener 0 por espasa

en los círculos relleno totalmente 0 y

360 360 y está vamos a ver si la tiramos

seguramente va a ser difícil porque pues

esto es ir calculando coordenadas no

está no quedó donde era hay que arrimar

lo un poquito más hacia acá y un poquito

más hacia abajo un poquito en xy un

poquito inyectó en x lo ponemos por

ejemplo en 60

y lo ponemos en 30

vamos a ver

igual y perdemos un día aquí tratando de

atino alrededor de ahí está bien es algo

un poquito más bonito así que tenemos

una carita feliz de un pacman con su

ojito verde pues como ven pues es

facilísimo vamos a dibujar por acá ahora

un

puntos

color

y ponemos por ejemplo de color rojo

rgb 255 si lo queremos en rojo tenemos

250 y 500 y vamos a dibujar un

rectángulo ryan y restar y le decimos

que no queremos más o menos como por 100

quién tiene crisis y 2010 y lo queremos

de 30 por 30

en esto

y ya tenemos un cuadrito seguramente

ahí está el cuadrito muy bien vamos

entendiendo nos ahora no pueden ustedes

seguir este explorando todo lo que se

puede dibujar pero por ejemplo podemos

dibujar texto vamos a poner por ejemplo

texto en color

punto set color y lo vamos a poner rgb y

alto en azul rojo

vamos a ponerlo en blanco 255 si

queremos un blanco debe de estar en mano

vamos a poner en negro en 000 y vamos a

poner a punto los datos string ahí está

y tiene cuatro parámetros

la cadena que quiere dibujar la

coordenada x la coordenada i y su tamaño

pero ahora también en realidad del

tamaño ahorita les explicó de qué se

trata muy bien

vamos a poner en la cadena le vamos a

poner texto

ustedes y le ponemos esq

401 comida

402 muy bien y en la coordenada lo vamos

a poner más o menos en equis como en si

dijimos que media algo así como 300 y

tantos en equipo lo vamos a poner en 150

y lo vamos a poner en 150 también

y ahora en esta parte de aquí el

parámetro que bojan es a partir de ahí

realmente es la alineación en cómo

quieres que se alinea y para eso se

utiliza graphics punto top para que se

alinea arriba

y la respectiva pipe tita que lo

utilizamos para el ojo graphics

punto ok vamos a probar

corremos

y ahí lo tenemos aquí tenemos tres

hospitales podemos dibujar texto para

que pueden ir a miami para qué diablos

me va a servir dibujar texto

por ejemplo cuando hagas un jueguito y

le pongas un contador por ejemplo que

vaya encontrando puntos pues el texto va

a ser importantísimo para poder dibujar

la puntuación aire de tu jueguito pero

hay muchísimas cosas pero algo que nos

interesa también es que siempre nos

interesaría poner imágenes entonces lo

primero que vamos a hacer es irnos a

imágenes y vamos a poner caritas punto

png las png que son las más bonitas y

aquí hay muchos carritos por ejemplo

está este pollo lógicamente no debe

estar muy grandota porque si no pues si

nuestro nuestro esté nuestra camba bueno

nuestra cama nuestro display es de estar

es de 320 por 291 pues imagínense nada

más entonces vamos a bajar este de este

pollito félix

y vamos a abrirlo en otro lado y la

barba más

es más esta vamos a guardar por dar la

imagen común y vamos a buscarlo

en donde la guardaré yo le voy a poner

carita y la voy a guardar en la unidad

se ahí está y dice que no que barbaridad

no puede ser posible entonces la guardo

aquí pues que en la unidad de ahí está

guarda me voy a la parte en donde la

guarde que es en esta parte de aquí la

copió y dejó con esto me voy a dar un

tengo mis aplicaciones donde guardo mis

aplicaciones de netbook con bus con mi

proyecto como yo a mi proyecto me camba

entonces los proyectos están aquí busco

mi campo minimizando aquí está y a mi

imagen la voy a pegar en la carpeta src

dónde está mi carpeta de mi canal

ahí está pega ojalá hayamos entendido

nuevamente abro mi proyecto este es mi

proyecto mi chamba y en la carpeta de

crc ahí pego mi imagen

bien pero ahora necesito crearme una

imagen porque voy a manejar imágenes

entonces es como ya vas línea hay que

crearla no entonces me voy a esta parte

de aquí de en caso de que no tuviera

constructor hay que crearlo hay que

crear el constructor pero va a ser

difícil ya cuando trabajamos con la

audiencia existentes nos crea nuestro

nuestro constructor entonces aquí abajo

en donde regularmente se declaró las

imágenes vamos a declarar un objeto de

tipo image y le vamos a poner a mi

imagen le va a poner mi imagen ahí está

y ahora por acá abajo en el constructor

en esta parte de aquí del constructor

voy a crear mi imagen entonces voy a

ponerle mi imagen igualdad

y mes

punto craig imagen y ahí me pidió el

recurso ahí en el recurso lo que yo voy

a poner es exactamente él

el src es la carpeta como ya las la baja

del proceso lo único que tengo que poner

ahí es el nombre de mi imagen de le puse

carita punto png ahí está y ya con esta

línea de aquí estoy creando mi imagen

estoy salvando la vela tengo de donde de

mi carpeta es de rc si no la pongo

difícilmente la van contrario tendría

que poner toda la ruta en nuestra parte

de mí muy bien ya acabó de crear eso me

vengo a esta parte de acá ya no necesito

asignar color simplemente voy a poner

g.co image y arista y vemos cuántos

parámetros tiene 1 2 3 4 parámetros

porque primero el nombre de la imagen o

el objeto el segundo la coordenada x la

coordenada i y el ancho en realidad el

ancho va a ser algo parecido a lo que

hicimos con el texto exactamente en

donde quieres que se que se ubique

entonces ponemos y aquí ponemos mi

imagen automáticamente 10 y sabes que es

la única que tienes y vamos a ponerla

por ejemplo

y que será bueno

en 130 por ahí más o menos a ver si las

tenemos 130 en x y le ponemos en

150

y luego le aquí le decimos prácticamente

gratis punto todo

pero picks él está ahí está vamos a

probar a ver si aparece nuestra imagen

corremos

ahí está y ahí está nuestra imagen ya la

vieron ahora por ejemplo se pasa porque

vamos a suponer mi imagen

bueno vamos a suponer que la puse en ya

que fue 150 más lo que medía en realidad

era

aquí estado llevar mi de 200 imágenes de

150 200 son 350 cuando apenas tengo 291

entonces si estoy como quiera veis

necesito ponerle un poquito más

a la izquierda y más hacia arriba

entonces vamos a ponerla por ejemplo en

x en 30 bueno es más en 5

y en 50 ver que pasa todo sería cuestión

de ir viendo más o menos para que no

tapen la visibilidad de lo que creamos

también ahí está la más sería cuestión

de bajarla un poquito

70

no esperemos estar otro poquito vamos a

ponerle 80 90

bueno la intención es de salón como

diría el chapulín colorado' la intención

es estar ahí tengo mi imagen

y ya vimos cómo manejar ya tengo una

pequeña aplicación utilizando canvas es

algo sencillito y esto pues sería el

principio básico de los jueguitos

móviles gráfica lógicamente con gráficos

de gráficos que nos brindaba

y podemos hacer incluso manejar los

tristes sprints para ir moviendo esta

imagen con las pequeñas de aquí ahora de

nuestro teclado

de nuestro pompón bien pues hasta que

vamos a dejar este vídeo tutorial número

31 ojalá haya sido de su agrado si le

sirve que bueno y si no también porque

para eso es dicen por ahí queda labor

por

por enseñar puedo transmitir debe de ser

desinteresado y así es como yo hago

quien aprende aprender por sus méritos

que uno aprende aprende por porque así

lo quiere y quien aprende aprende porque

lo desea y nunca nos va nunca como

docentes nos debemos poner a pensar si

si este sí

vamos a lograr el aprendizaje 1 eso no

es verdad sí hay que pensarlo la labor

del docente es transmitir es la

finalidad y mi realidad es que ustedes

aprendan muy bien ya saben si les gusta

el vídeo de clic a la manita y si no les

gusta pues también tiene clic a la

manita

nos vemos en el próximo vídeo tutor

recuerden que de la vista nace el

conocimiento y el desarrollo master

hasta el próximo videoclip o