jueves, 30 de abril de 2015

Fragments en Android


En esta ocasión realizaremos fragments en android, los fragments son mini activities que contienen sus propias vistas, los activities contienen 1 o mas miniactivities o fragments. Sin mas aquí los pasos.

1.- Crearemos un nuevo proyecto en android.

2.- Crearemos dos archivos xml nuevos que serán fragment1, fragment2 y también crearemos para estos xml sus respectivas activities que serán fragment1.java y fragment2.java es necesario que sean activities, aquí te mostrare la estructura de lo que te menciono.



3.- Ahora colocaremos el siguiente codigo para el fragment1.xml

fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:background="#00FFF0"
        >

    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Este es el fragment 1"
            android:textColor="#000000"
            android:textSize="45sp"
            />

</LinearLayout>



4.- Ahora colocaremos el siguiente codigo para el fragment2.xml

fragment2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:background="#EEFF00"
        >
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Este es el fragment 2"
            android:textColor="#000000"
            android:textSize="45sp"
            />
</LinearLayout>


5.- Para el main.xml introduciremos el siguiente codigo.

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >
    <fragment
            android:name="depredador1220.master.kenny.fragment1"
            android:id="@+id/fragment1"
            android:layout_weight="1"
            android:layout_width="0px"
            android:layout_height="match_parent"
            />

    <fragment
            android:name="depredador1220.master.kenny.fragment2"
            android:id="@+id/fragment2"
            android:layout_weight="1"
            android:layout_width="0px"
            android:layout_height="match_parent"
            />

</LinearLayout>




6.- Ya que hemos hecho nuestras GUI ahora toca el turno de programarlas, para el fragment1.java
     escribiremos lo siguiente.

fragment1.java

package depredador1220.master.kenny;

import android.app.Activity;
import android.os.Bundle;

//import para esta aplicacion
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class fragment1 extends Fragment {

    public View onCreateView(LayoutInflater layoutInflater, ViewGroup viewGroup, Bundle savedInstanceState) {
        //usamos el layout para este fragment
        return layoutInflater.inflate(R.layout.fragment1, viewGroup, false);
    }
}


7.- Ahora con el fragment2.java

fragment2.java

package depredador1220.master.kenny;

import android.app.Activity;
import android.os.Bundle;

//import para esta aplicacion
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class fragment2 extends Fragment {

    public View onCreateView(LayoutInflater layoutInflater, ViewGroup viewGroup, Bundle savedInstanceState) {
        //usamos el inflate layout para este fragment
        return layoutInflater.inflate(R.layout.fragment2, viewGroup, false);
    }
}


8.- Ya con esto hecho no sera necesario modificar nada al MyActivity.java, ejecutamos y observamos nuestro resultado.



martes, 28 de abril de 2015

Como usar el material del apartado de Box2D

Hola Visitante, mucho gusto y bienvenido a este espacio. Aquí explicare como puedes usar el material de este apartado.

  • Bien, para poder realizar estos tutoriales es necesario que sepas programación básica en C++ y un poco de Programación Orientada a Objetos.
  • Si encuentras confuso de momento este apartado te invito a que revises o inicies con los ejemplos de C++ para tener una noción y poder emprender a realizar estos tutoriales, así que no te desanimes, da de ti un extra por aprender veraz que no te decepcionaras.
  • Box2D es una motor para realizar física no se usa solo para videojuegos si no que tiene diferentes aplicaciones ya que se maneja con varios lenguajes de programación, en estos tutoriales yo decidí escoger C++ y efectuarlos con Visual Studio Express(Son gratis).

  • Lo primero que necesitas es instalar la librería en Visual Studio aquí te mando a la sección de visual studio para que lo descargues.
         enlace


  • Si por alguna razón no le llegaras a entender al material de instalación, puedes buscar otra que entiendas primero sera necesario instalar la librería de SFML que es con la que utilizo Box2D, aquí una liga a la explicación de esta librería y al inicio de los tutoriales de SFML.

  • Busca en google con la siguientes palabras, "setup Box2D in Visual Studio" o "Como instalar Box2D en Visual Studio" en lo personal coloque el vídeo con el que me sirvió a mi en su momento, pero no todos aprenden de la misma forma así que anímate e insiste lo necesitaras para emprender este nuevo reto.

  • Una vez que completes y pruebes satisfactoriamente la instalación y la librería funcione bien, te recomiendo que el paquete con el proyecto ya hecho le hagas copias, para cuando quieras probar hacer otro ejemplo nuevo, no repitas nuevamente los pasos, solo hacer una copia, y cargar la solución y borrar los archivos que utilizaste anteriormente y seguir probando los ejemplos, existe una manera de realizar esto pero es otra alternativa.



Como usar el material del apartado de Irrlicht

Hola Visitante, mucho gusto y bienvenido a este espacio. Aquí explicare como puedes usar el material de este apartado.

  • Bien, para poder realizar estos tutoriales es necesario que sepas programación básica en C++ y un poco de Programación Orientada a Objetos.
  • Si encuentras confuso de momento este apartado te invito a que revises o inicies con los ejemplos de C++ para tener una noción y poder emprender a realizar estos tutoriales, así que no te desanimes, da de ti un extra por aprender veraz que no te decepcionaras.
  • Irrlicht es una motor gráfico para realizar videojuegos 2D y 3D que se maneja con varios lenguajes de programación, en estos tutoriales yo decidí escoger C++ y efectuarlos con Visual Studio Express(Son gratis).

  • Lo primero que necesitas es instalar la librería en Visual Studio aquí te mando a la sección de visual studio para que lo descargues.

    enlace

lunes, 27 de abril de 2015

Como usar el material del apartado de SFML

Hola Visitante, mucho gusto y bienvenido a este espacio. Aquí explicare como puedes usar el material de este apartado.

  • Bien, para poder realizar estos tutoriales es necesario que sepas programación básica en C++ y un poco de Programación Orientada a Objetos.
  • Si encuentras confuso de momento este apartado te invito a que revises o inicies con los ejemplos de C++ para tener una noción y poder emprender a realizar estos tutoriales, así que no te desanimes, da de ti un extra por aprender veraz que no te decepcionaras.
  • SFML es una librería gráfica que se maneja con varios lenguajes de programación, en estos tutoriales yo decidí escoger C++ y efectuarlos con Visual Studio Express(Son gratis).

  • Lo primero que necesitas es instalar la librería en Visual Studio aquí te mando a la sección de visual studio para que lo descargues.
         enlace

domingo, 26 de abril de 2015

Escribiendo datos a un archivo XML en Irrlicht


#include <irrlicht.h>

//los namespace para definir funciones de irrlicht
using namespace irr;
using namespace core;
using namespace scene;
using namespace video;
using namespace io;
using namespace gui;

#ifdef _IRR_WINDOWS_
#pragma comment(lib, "Irrlicht.lib")
#endif


int main()
{
 //define un device para la pantalla
 IrrlichtDevice *device = createDevice(EDT_NULL, dimension2d<u32>(0, 0), 16, false);

 //en caso de error
 if (!device)
  return 1;

 //Para ponerle un titulo a la ventana
 device->setWindowCaption(L"Escribiendo datos a un archivo XML en Irrlicht");

 //Creamos el archivo
 IFileSystem *fileSystem = device->getFileSystem();

 //Creo objeto Writer para escribir en el archivo xml 
 IXMLWriter *xml = fileSystem->createXMLWriter("guardar.xml");

 //Declaro mis cadenas para enviar a mi xml
 stringw nombreJugador = "depredador1220";
 stringw nivel = "100";
 stringw salud = "50";
 stringw exp = "30";
 stringw mensaje = "Apoya al sitio dandole clic a la publicidad";

 // se escribira la cabecera con esta funcion <?xml version="1.0"?>
 xml->writeXMLHeader();

 //Escribimos el elemento del jugador que a su vez contendra el nombre
 xml->writeElement(L"jugador", false, L"nombre", nombreJugador.c_str());
 xml->writeLineBreak();

 //Ahora escribimos los siguientes elementos

 //Nivel
 xml->writeElement(L"nivel");
 xml->writeText(nivel.c_str());
 xml->writeClosingTag(L"nivel");
 xml->writeLineBreak();

 //Salud
 xml->writeElement(L"salud");
 xml->writeText(salud.c_str());
 xml->writeClosingTag(L"salud");
 xml->writeLineBreak();

 //Exp
 xml->writeElement(L"exp");
 xml->writeText(exp.c_str());
 xml->writeClosingTag(L"exp");
 xml->writeLineBreak();

 //Mensaje
 xml->writeElement(L"mensaje");
 xml->writeText(mensaje.c_str());
 xml->writeClosingTag(L"mensaje");
 xml->writeLineBreak();

 //Ahora cerraremos el Tag de Jugador
 xml->writeClosingTag(L"jugador");

 //elimino de la memoria mi xml creado
 delete xml;

 //cerrar device
 device->drop();

 system("pause");
 return 0;
}


Animacion de Sprite Sheet en Unity 5+

Ahora tocara el turno de realizar la animación del sprite sheet cortado con el Sprite Editor.

Descargar Assets para este proyecto


1.- Reviza como realizar los cortes de tu sprite sheet usando Sprite Editor en este tutorial

2.- Selecciona el sprite ya cortado y modificado por Sprite Editor y lo arrastraremos a la escena.



3.- Nos saldrá una ventana para que guardemos una animación con extensión .anim, le daremos un nombre en mi caso correr y guardamos.


Usando Sprite Editor en Unity 5+

En este tutorial usaremos sprite editor para poder separar por piezas nuestros Sprite Sheet o Atlas Sprite, para ello haremos uso de esta herramienta.

Descargar Assets para este proyecto


1.- Crea un nuevo proyecto en unity3D en el apartado 2D

2.- Crea una carpeta dándole clic derecho en Create > Folder


3.- Nombra a la carpeta Texturas y dale doble clic para entrar en la carpeta


4.- Pasa tu Sprite Sheet arrastrándola hasta la carpeta Texturas, para este ejemplo use un archivo .PNG


Asignando textura a un objeto 3D en unity 5+

Descargar Assets para este proyecto


1.- Creamos un objeto 3D en la escena dando en el menu superior GameObejct > 3D Object > cube



2.- Creara el cubo en la escena

Creando un Material para un objeto 3D en Unity 5+

1.- Creamos un objeto 3D, concretamente un cubo situándonos en la siguiente dirección del menú, GameObject > 3D Object > Cube




2.- Entonces se insertara el cubo en la escena


Insertando objetos 3D en Unity 5+

1.- Creamos un nuevo proyecto en unity de vista 3D

2.- Nos iremos al menú de arriba y le daremos clic en GameObject > 3D Object, aquí nos aparecerán los objetos 3D disponibles para su utilización


3.- Una vez situándonos ahí, le daremos clic al cubo, este aparecerá en la escena


sábado, 25 de abril de 2015

Mostrar datos de un archivo XML en irrlicht



1.- Creamos un archivo de texto y le cambiamos la extension y le ponemos .xml, ahora rellenaremos con los siguientes datos.



2.- Aqui el ejemplo de como mostrar los datos del XML
#include <irrlicht.h>
#include <iostream>

using namespace std;

//los namespace para definir funciones de irrlicht
using namespace irr;
using namespace core;
using namespace scene;
using namespace video;
using namespace io;
using namespace gui;

#ifdef _IRR_WINDOWS_
#pragma comment(lib, "Irrlicht.lib")
#endif


int main()
{
 //define un device para la pantalla
 IrrlichtDevice *device = createDevice(EDT_NULL, dimension2d<u32>(0, 0), 16, false);

 //en caso de error
 if (!device)
  return 1;

 //Para ponerle un titulo a la ventana
 device->setWindowCaption(L"Mostrando datos de un archivo XML en Irrlicht");

 //Creamos el archivo
 IFileSystem *fileSystem = device->getFileSystem();

 //Creo un lector de xml para poder leer el archivo XML
 IXMLReader *xml = fileSystem->createXMLReader("jugador.xml");

 //Declaro mis cadenas para mostrar los datos cargados del xml
 stringc nombreJugador = "Nombre: ";
 stringc nivel = "Nivel: ";
 stringc salud = "Salud: ";
 stringc exp = "EXP: ";
 stringc mensaje = "Mensaje: ";

 //Leera el xml
 while (xml && xml->read())
 {
  //Para obtener un tipo de nodo del xml
  switch (xml->getNodeType())
  {
  case EXN_ELEMENT:
  {
   //declaro un nombre de nodo para poder recoger los datos de mis nodos en mi xml
   stringc nombreNodo = xml->getNodeName();

   //si el nodo es igual al nodo de mi xml carga el valor del atributo de mi xml
   if (nombreNodo.equals_ignore_case("jugador"))
   {
    nombreJugador.append(xml->getAttributeValue(L"nombre"));
    cout << nombreJugador.c_str() << endl;
   }

   //si el nodo es igual al nodo de mi xml carga el valor del atributo de mi xml
   else if (nombreNodo.equals_ignore_case("nivel"))
   {
    xml->read();
    nivel.append(xml->getNodeData());
    cout << nivel.c_str() << endl;
   }

   //si el nodo es igual al nodo de mi xml carga el valor del atributo de mi xml
   else if (nombreNodo.equals_ignore_case("salud"))
   {
    xml->read();
    salud.append(xml->getNodeData());
    cout << salud.c_str() << endl;
   }

   //si el nodo es igual al nodo de mi xml carga el valor del atributo de mi xml
   else if (nombreNodo.equals_ignore_case("exp"))
   {
    xml->read();
    exp.append(xml->getNodeData());
    cout << exp.c_str() << endl;
   }

   //si el nodo es igual al nodo de mi xml carga el valor del atributo de mi xml
   else if (nombreNodo.equals_ignore_case("mensaje"))
   {
    xml->read();
    mensaje.append(xml->getNodeData());
    cout << mensaje.c_str() << endl;
   }
  }

  break;

  default:
   break;
  }
 }

 cout << endl;

 //elimino de la memoria mi xml creado
 delete xml;

 //cerrar device
 device->drop();

 system("pause");
 return 0;
}



Juego simple con figuras en SFML


#include SFML\Graphics.hpp

//declaramos una funcion donde iniciaremos las figuras, su posicion y su color
void iniciarFigura(sf::RectangleShape &figura, sf::Vector2f const &posicion, sf :: Color const &color);

int main()
{

 //########### MECANICAS DEL JUEGO ##############
 //Tendremos un jugador que sera el que controlemos, un obstaculo y un enemigo
 //moveremos el personaje solo de arriba y abajo, tendra un movimiento constante
 //si choca con el obstaculo se reiniciara
 //si choca con el enemigo ganamos y cerramos la aplicacion
 //##############################################

 //Creo mi ventana
 sf::RenderWindow window(sf::VideoMode(640 , 480), "Juego simple con figuras");
 window.setFramerateLimit(60);

 //establecemos la posicion inicial que tomara el jugador
 sf::Vector2f posicionInicial = sf::Vector2f(50, 50);

 //Creamos la figura que sera nuestro jugador
 sf::RectangleShape jugador(sf::Vector2f(50, 50));

 //mandamos a llamar a nuestra funcion para determinar la posicion y el color de nuestro jugador
 iniciarFigura(jugador, posicionInicial, sf::Color::Yellow);

 //Creamos la figura que sera nuestro enemigo
 sf::RectangleShape enemigo(sf::Vector2f(50, 50));

 //mandamos a llamar a nuestra funcion para determinar la posicion y el color de nuestro enemigo
 iniciarFigura(enemigo, sf::Vector2f(400, 50), sf::Color::Red);

 //Creamos la figura que sera nuestro obstaculo
 sf::RectangleShape obstaculo(sf::Vector2f(50, 100));

 //mandamos a llamar a nuestra funcion para determinar la posicion y el color de nuestro obstaculo
 iniciarFigura(obstaculo, sf::Vector2f(250, 50), sf::Color::Blue);

 //GameLoop
 while (window.isOpen())
 {
  window.clear();
  
  //Dibujamos en la escena nuestras figuras
  window.draw(jugador);
  window.draw(obstaculo);
  window.draw(enemigo);

  jugador.move(1, 0);

  //si mantienes presionada la tecla de direccion para abajo el personaje baja
  if (sf::Keyboard::isKeyPressed(sf::Keyboard::Down))
  {
   jugador.move(0, 1);
  }

  //si mantienes presionada la tecla de direccion para arriba el personaje sube
  if (sf::Keyboard::isKeyPressed(sf::Keyboard::Up))
  {
   jugador.move(0, -1);
  }

  //si chocamos o colisionamos con nuestro enemigo ganamos y salimos de la partida
  if (jugador.getGlobalBounds().intersects(enemigo.getGlobalBounds()))
  {
   window.close();
  }

  //si chocamos o colisionamos con nuestro obstaculo, regresamos a la posicion original
  if (jugador.getGlobalBounds().intersects(obstaculo.getGlobalBounds()))
  {
   jugador.setPosition(posicionInicial);
  }

  //Eventos
  sf::Event event;

  //Se manejan los eventos
  while (window.pollEvent(event))
  {
   //Creo una sentencia switch para controlar muchos eventos
   switch (event.type)
   {

   //Cierra la ventana
   case sf :: Event::EventType::Closed:
    window.close();
    break;

   default:
    break;
   }
  }

  window.display();
 }

 return 0;
}

//Realizamos nuestra funcion para inicializar nuestras figuras.
void iniciarFigura(sf::RectangleShape &figura, sf::Vector2f const &posicion, sf::Color const &color)
{
 figura.setFillColor(color);
 figura.setPosition(posicion);
 figura.setOrigin(figura.getSize() * 0.5f); //El centro del rectangulo
}


Pasando Datos Usando Objetos Intent en Android


Para este tutorial usaremos la estructura que maneje en un tutorial anterior. Aquí la liga


Una vez revizado esto tendremos que hacer algunas modificaciones a los archivos para poder realizar este tutorial.

1.- Modificaremos el archivo segundomain.xml.

segundomain.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >

<TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Esta es la segunda activity"
        />

    <Button
            android:id="@+id/btn_ActivityMain"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Regresar al ActivityMain"
            android:onClick="onClick"
            />

</LinearLayout>



2.- Tambien modificaremos el archivo Activity2.java para agregar la nueva funcionalidad

Activity2.java

package kenny.master.kenny;

import android.app.Activity;
import android.os.Bundle;

//librerias para este ejemplo
import android.content.Intent;
import android.net.Uri;
import android.view.View;
import android.widget.Toast;


public class Activity2 extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //Agregamos el archivo xml de la segundomain
        setContentView(R.layout.segundomain);

        //Obtener los datos pasados de tipo string usando getStringExtra()
        Toast.makeText(this, getIntent().getStringExtra("str1"),
                Toast.LENGTH_SHORT).show();

        //Obtener el objeto Bundle
        Bundle bundle = getIntent().getExtras();

        //obtenemos los datos de tipo string usando getString()
        Toast.makeText(this, bundle.getString("str2"),
                Toast.LENGTH_SHORT).show();
    }

    //Creo mi evento onClick
    public void onClick(View v )
    {
        //Usamos un objeto intent para regresar los datos
        Intent intent = new Intent();

        //Usamos el metodo setData() para regresar algun valor
        intent.setData(Uri.parse("Aqui casual programando en Android"));

        //Establece el resultado con OK y le paso mi intent
        setResult(RESULT_OK, intent);

        //Cierro la activity
        finish();
    }

}


3.- Modificaremos el MyActivity.java para agregar la nueva funcionalidad.

MyActivity.java

package kenny.master.kenny;

import android.app.Activity;
import android.os.Bundle;

//librerias a utilizar
import android.content.Intent;
import android.view.View;
import android.widget.Toast;

public class MyActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

    //Creamos nuestros evento onClick
    public void onClick( View v )
    {
        Intent intent = new Intent("kenny.master.Activity2");

        //Uso putExtra() para agregar valores
        intent.putExtra("str1", "Yo soy el depredador1220");

        //Uso un objeto bundle para agregar valores
        Bundle extras = new Bundle();
        extras.putString("str2", "Apoyame dando clic a la publicidad");

        //Adjunto el objeto bundle  dentro del intent
        intent.putExtras(extras);

        //comienza la activity a obtener el resultado
        startActivityForResult(intent, 1);
    }

    //Si la peticion que pedimos fue correcta, entonces mostrara el dato de la anterior activy
    //y la mostrara en esta activy
    public void onActivityResult( int requestCode, int resultCode, Intent data)
    {
        if( requestCode == 1 )
        {
            if(resultCode == RESULT_OK )
            {
                //obtenemos el resultado usando getData()
                Toast.makeText(this, data.getData().toString(),
                        Toast.LENGTH_SHORT).show();
            }
        }
    }
}




4.- Los archivos main.xml y Manifest.xml se mantendran igual.





Importando archivos de imagenes en Unity 5+

En este tutorial agregaremos algunos tipos de imágenes, estas imágenes tienes diferentes formatos como lo son, .GIF, .PNG, .JPG, .BMP, .PSD, unity maneja mas formatos pero para este tutorial implementaremos estos.

Descargar Assets para este proyecto


1.- Crea un nuevo proyecto en unity 5 y seleccionar la pestaña de 2D.

2.- Creamos una carpeta, en donde se encuentra los Assets dándole clic derecho y la ruta create / Folder y la cambiaremos el nombre a Texturas y le daremos clic para entrar a la carpeta.



3.-  Ahora nos colocamos en la carpeta donde tendremos los tipos de formato de imagen que utilizaremos en este ejemplo.



4.- Ahora arrastraremos una por una para poder identificar las propiedades en el inspector seleccionado la imagen, empezaremos con la imagen de formato PNG.



Guardando texto en un archivo en Irrlicht


#include <irrlicht.h>

//los namespace para definir funciones de irrlicht
using namespace irr;
using namespace core;
using namespace scene;
using namespace video;
using namespace io;
using namespace gui;

#ifdef _IRR_WINDOWS_
#pragma comment(lib, "Irrlicht.lib")
#endif


int main()
{
 //define un device para la pantalla y cambiamos los valores a true para activar la sombra
 IrrlichtDevice *device = createDevice(EDT_NULL, dimension2d<u32>(0, 0), 16, false);

 //en caso de error
 if (!device)
  return 1;

 //Para ponerle un titulo a la ventana
 device->setWindowCaption(L"Guardando texto en un archivo en Irrlicht");

 //Creo el nombre del archivo donde guardare mi texto
 char *filename = "kawaii.txt";

 //Creamos el archivo
 IFileSystem *fileSystem = device->getFileSystem();

 //Creo un arhivo de escritura el cual le parsare el nombre del archivo,lo crea
 IWriteFile *writeFile = fileSystem->createAndWriteFile(filename, fileSystem->existFile(filename));

 //Si existe salimos
 if (!writeFile)
 {
  return 1;
 }

 //texto que guardaremos en el archivo
 stringc data = "La paciencia y la determinacion es lo que necesitas para lograr tus metas";

 //escribe el texto que le pasamos y determina el tamaño
 writeFile->write(data.c_str(), data.size());

 //cerrar device
 device->drop();

 system("pause");
 return 0;
}


Animacion simple con figuras en SFML


#include <SFML\Graphics.hpp>

int main()
{
 //Creo mi ventana
 sf::RenderWindow window(sf::VideoMode(640 , 480), "Animacion con figuras");
 window.setFramerateLimit(60);

 //Creo una cuadrado y le coloco propiedades como color, origen y la posicion
 sf::RectangleShape rect(sf::Vector2f(50, 50));
 rect.setFillColor(sf::Color::Red);
 rect.setOrigin(sf::Vector2f(25, 25));
 rect.setPosition(sf::Vector2f(50, 50));

 //GameLoop
 while (window.isOpen())
 {
  window.clear();
  
  //Eventos
  sf::Event event;

  //Creo una pequeña animacion con mi figura
  rect.rotate(1.5f);
  rect.move(sf::Vector2f(1, 0));

  //dibujo en mi escena
  window.draw(rect);

  //Se manejan los eventos
  while (window.pollEvent(event))
  {
   //Creo una sentencia switch para controlar muchos eventos
   switch (event.type)
   {

   //Cierra la ventana
   case sf :: Event::EventType::Closed:
    window.close();
    break;

   default:
    break;
   }
  }

  window.display();
 }

 return 0;
}


viernes, 24 de abril de 2015

Exportar un modelo de Blender en Unity 5+

En este tutorial aprenderemos a insertar modelados que diseñamos en blender y que podemos usar en unity, para ello realizaremos los pasos para poder hacer esta exportación.

Descargar Assets para este proyecto


1.- Iniciamos el programa de blender, crearemos un modelado en este programa y una vez terminado lo guardamos.



2.- Ahora con el modelado listo necesitaremos exportarlo, para ello en blender nos vamos a file, export y los exportaremos como Autodesk FBX(.fbx)



Evento TextEntered en SFML


#include <SFML\Graphics.hpp>

int main()
{
 //Creo mi ventana
 sf::RenderWindow window(sf::VideoMode(640 , 480), "Evento TextEntered");
 window.setFramerateLimit(60);

 //Creo un cadena para almacenarla en el buffer
 sf::String buffer;

 //GameLoop
 while (window.isOpen())
 {
  window.clear();
  
  //Eventos
  sf::Event event;

  //Se manejan los eventos
  while (window.pollEvent(event))
  {
   //Creo una sentencia switch para controlar muchos eventos
   switch (event.type)
   {

   //Cierra la ventana
   case sf :: Event::EventType::Closed:
    window.close();
    break;

   //Escribimos un texto en la pantalla, y lo guardara en el buffer
   case sf::Event::TextEntered:
    buffer += event.text.unicode;
    break;

   //Cuando introducimos un texto le daremos Enter y se cambiara el texto de 
   //la ventana, si introducimos otro texto automaticamente cambiara porque
   //le indicamos que el buffer se borre
   case sf::Event::EventType::KeyReleased:
    if (event.key.code == sf::Keyboard::Key::Return)
    {
     window.setTitle(buffer);
     buffer.clear();
    }

    break;

   default:
    break;
   }
  }

  window.display();
 }

 return 0;
}



Creando un proyecto en Unity 5

Una vez instalado unity podremos empezar a realizar ejemplos y probar este excelente motor de videojuegos para ello realizaremos en primera instancia la creación de un nuevo proyecto a continuación les indicare como.

1.- Iniciamos unity3D, nos saldrá la pantalla donde estará cargando los recursos unity, así que esperamos a que cargue.



2.- Cuando termina la parte de cargar, nos aparecerá la parte inicial para poder crear ya nuestro proyecto, podemos observar que en la primera parte donde dice project no aparece nada porque no hemos realizado proyectos, pero mas adelante nos aparecerá aquí los proyectos recientes que hemos realizado.



Cargando archivo en Irrlicht


#include <irrlicht.h>
#include <iostream>

using namespace std;

//los namespace para definir funciones de irrlicht
using namespace irr;
using namespace core;
using namespace scene;
using namespace video;
using namespace io;
using namespace gui;

#ifdef _IRR_WINDOWS_
#pragma comment(lib, "Irrlicht.lib")
#endif


int main()
{
 //define un device para la pantalla 
 IrrlichtDevice *device = createDevice(EDT_NULL, dimension2d<u32>(0, 0), 16, false);

 //en caso de error
 if (!device)
  return 1;

 //Para ponerle un titulo a la ventana
 device->setWindowCaption(L"Cargando un archivo en Irrlicht");

 //Asignamos el nombre del archivo que queremos mostrar
 //tendremos que crear un archivo de texto y colocar algo de texto
 char *filename = "depredador1220.txt";

 //Creamos el archivo
 IFileSystem *fileSystem = device->getFileSystem();

 //si no existe el archivo salimos
 if (!fileSystem->existFile(filename))
 {
  return 1;
 }

 //Leemos el archivo
 IReadFile *readFile = fileSystem->createAndOpenFile(filename);

 //en caso de error
 if (!readFile)
 {
  return 1;
 }

 char ch;

 //Escribe cada palabra del archivo creado.
 while (0 != readFile->read(&ch, 1))
 {
  cout << ch;
 }

 //cerrar archivo
 readFile->drop();

 //cerrar device
 device->drop();

 system("pause");
 return 0;
}


Obteniendo datos de otro Activity en Android

Para este ejemplo sera necesario usar la misma estructura que manejamos en este tutorial

ir al tutorial

Una vez que completamos los intents y nos movemos por ventanas ahora necesitaremos recuperar los datos que se encuentran en un Activity y poderlo mostrar en otro activity para ello realizaremos cambios en algunos de los archivos que utilizamos en el anterior tutorial para poder realizarlo con exito.

1.- Primero modificaremos el segundomain.xml para agregarle un texto y podramos capturarlo y depues mostrarlo en otro Activity.

segundomain.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >

<TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Esta es la segunda activity"
        />

    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Introduce tu poderoso nombre:"
            />

    <EditText
            android:id="@+id/nombre"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            />

    <Button
            android:id="@+id/btn_OK"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Aceptar"
            android:onClick="onClick"
            />

</LinearLayout>



2.- Lo siguiente sera modificar el Activity2.java para poder agregarle la nueva funcionalidad que necesitara para pasar los datos.

Activity2.java

package kenny.master.kenny;

import android.app.Activity;
import android.os.Bundle;

//librerias para este ejemplo
import android.content.Intent;
import android.net.Uri;
import android.view.View;
import android.widget.EditText;


public class Activity2 extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //Agregamos el archivo xml de la segundomain
        setContentView( R.layout.segundomain );
    }

    //Creo mi evento onClick
    public void onClick(View v )
    {
        Intent data = new Intent();

        //Obtengo el valor del editText
        EditText nombre = (EditText) findViewById(R.id.nombre);

        //Establesco los datos para poderlos pasar.
        data.setData(Uri.parse(nombre.getText().toString()));

        setResult(RESULT_OK, data);

        //Cierro la activity
        finish();
    }

}

3.- Finalmente modificaremos el MyActivity.java para mostrar los datos introducidos y recuperados del anterior activity que es Activity2 y mostrar el resultado.

MyActivity.java

package kenny.master.kenny;

import android.app.Activity;
import android.os.Bundle;

//librerias a utilizar
import android.content.Intent;
import android.view.View;
import android.widget.Toast;

public class MyActivity extends Activity {

    //una bandera que nos servira para verificar que estamos mandando bien el uri
    int request_code = 1;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

    //Creamos nuestros evento onClick
    public void onClick( View v )
    {
        //le pasaremos el intent y codigo de respuesta
        startActivityForResult(new Intent("kenny.master.Activity2"), request_code);
    }

    //Si la peticion que pedimos fue correcta, entonces mostrara el dato de la anterior activy
    //y la mostrara en esta activy
    public void onActivityResult( int requestCode, int resultCode, Intent data)
    {
        if( requestCode == request_code )
        {
            if(resultCode == RESULT_OK )
            {
                Toast.makeText(this, data.getData().toString(), Toast.LENGTH_SHORT).show();
            }
        }
    }
}







Manejando multiples eventos en SFML


#include <SFML\Graphics.hpp>

int main()
{
 //Creo mi ventana
 sf::RenderWindow window(sf::VideoMode(640 , 480), "Manejando Multiples Eventos");
 window.setFramerateLimit(60);

 //GameLoop
 while (window.isOpen())
 {
  window.clear();
  
  //Eventos
  sf::Event event;

  while (window.pollEvent(event))
  {
   //Creo una sentencia switch para controlar muchos eventos
   switch (event.type)
   {

   //Cierra la ventana
   case sf :: Event::EventType::Closed:
    window.close();
    break;

   //Cuando presiones y mantienes la barra espaciadora cambiara de titulo de la ventana
   case sf :: Event::EventType::KeyPressed:
    if (event.key.code == sf::Keyboard::Space)
    {
     window.setTitle("Presionaste la barra espaciadora");
    }

    break;

   //Cuando sueltes la barra espaciadora cambiara de texto nuevamente
   case sf::Event::EventType::KeyReleased:
    if (event.key.code == sf::Keyboard::Space)
    {
     window.setTitle("Soltaste la barra espaciadora");
    }

    //Si presionas y sueltas Escape se cerrara la ventana
    else if (event.key.code == sf::Keyboard::Escape)
    {
     window.close();
    }

    break;

   default:
    break;
   }
  }

  window.display();
 }

 return 0;
}






miércoles, 22 de abril de 2015

Animacion de Sprites Esqueleticos en Spriter - Creando Armature

En este tutorial empezaremos a crear el armature para nuestro personaje, usaremos la siguiente metodología para poder crear nuestro armature con éxito, bien usaremos el emparentamiento, que es establecer una jerarquía padre - hijo, un ejemplo de esto seria que tenemos dos objetos al primer objeto sera el objeto padre y el otro objeto el hijo, si nosotros moviéramos de lugar al hijo se movería esta pieza, pero si movemos el padre se moverá junto con el hijo, así que usaremos estos términos, también iremos asignando a cada hueso la pieza del sprite correspondiente para poder manipular su movimiento con el hueso, el proceso sera el siguiente serán 3 huesos en cada pierna, 3 huesos para el brazo derecho, 2 huesos para el brazo izquierdo 1 hueso para el cuerpo, 1 hueso para la capa, 1 hueso para la cabeza.

NOTA: Cuando creamos el armature por lo regular se establece en ocasiones un emparentamiento de huesos, complicando el proceso de animación del personaje, siempre verificar que no estén unidos los huesos con otros huesos, te darás cuenta porque hay una lineas rojas, moradas y grises que atraviesan de un lado a otro estas lineas no se deben atravesar si lo vez así es que te toparas con este detalle aquí te pongo un ejemplo de ello y otro ejemplo de lo que puede ocurrirte si no te percatas de ello, arruinando completamente tu creación en la animación ya que te moverá los sprites y tu armature en ambas direcciones que no deseas.