Autor Tema: [PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.  (Leído 1968 veces)

Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« en: 07 de Agosto de 2011, 04:56:21 am »

SHIN

SHIN planea ser un framework amigable que se enfoque al desarrollo de videojuegos para aparatos móviles, ya sean iOS, Android, Playbook u otras plataformas que soporten Adobe AIR.

Actualmente SHIN esta en pañales, las clases que existen son Shin, ShNucleo, ShNivel y ShObjeto.

ShNucleo es el núcleo donde se contendrán todos los parametro y objetos, es una especie de caja donde echas todos tus objetos, niveles y clases en general.

Shin es una especie de controlador de núcleo, que se encarga de manejar y entregar datos de este.

ShNivel sirve para crear niveles, estoy niveles son guardados dentro de ShNucleo.

ShObjeto es básicamente un objetos dentro de los niveles.

En el fondo, con SHIN, estoy intentando facilitar y reducir el tiempo de trabajo para desarrollar un juego para celulares. Planeo también incluir un GUI para darle un sentido mas de Drag & Drop.

En este ejemplo muestro lo que llevo hasta el momento, que es lo que mencione anteriormente:

Creo una clase Main.as que funcionara como nuestro Núcleo:
Código: [Seleccionar]
package
{
import org.shin.*;
/**
* ...
* @author Felipe Alfonso
*/
[SWF(width = "400", height = "400")]
public class Main extends ShNucleo
{
public function Main():void
{
super(400, 400, 0x000000);
nivelInicial(new Level1);
}
}
}

Como se ve en esta clase lo que hago es extenderla a ShNucleo y defino las propiedades básicas de este, como las dimensiones y el color de fondo además de el nivel inicial.

Ahora creo mi nivel inicial que lo llamare Level1.as
Código: [Seleccionar]
package 
{
import org.shin.*;
/**
* ...
* @author Felipe Alfonso
*/
public class Level1 extends ShNivel
{
private var obj:ShObjeto;

public function Level1()
{
obj = new ShObjeto(50, 50);
obj.y = Math.random() * Shin.alto;
obj.gravedadX = .1;
agregar(obj);

crearBucle();
}
override public function bucle():void
{
obj.loopObject();
if (obj.x > Shin.ancho && obj.x < Shin.ancho + 50)
{
detenerBucle();
Shin.cambiarNivel(new Level2);
}
}
}
}

Acá lo que hago es crear el primer nivel y dentro de este mismo creo un objeto llamado obj. A este objeto le indico que tenga una aceleración en el eje X y lo agrego, luego de eso creo el bucle y finalmente al bucle le pongo las instancias que quiero que se actualicen, como el bucle del mismo objeto y que si el objeto se sale de las dimensiones del nucleo se detenga el bucle y cambie de nivel con una función muy fácil, Shin.cambiarNivel().

Ahora creo el nivel 2 y le pongo Level2.as

Código: [Seleccionar]
package 
{
import org.shin.*;
/**
* ...
* @author Felipe Alfonso
*/

public class Level2 extends ShNivel
{
private var obj:ShObjeto;

public function Level2()
{

obj = new ShObjeto(10, 10);
obj.x = Math.random()*Shin.ancho;
obj.gravedadY = .1;
agregar(obj);
crearBucle();
}

override public function bucle():void
{
obj.loopObject();
if (obj.y > Shin.alto && obj.y<Shin.alto+50)
{
detenerBucle();
Shin.cambiarNivel(new Level1);
}
}
}
}

Esto es lo mismo que en Level1, solo que ahora el objeto tiene una aceleración en el eje Y.

Todo esto entrega esto:
http://ilovepixel.net/shin/wp-content/uploads/2011/08/Shin2.swf


En mi TO-DO List se encuentran las siguientes tareas:

  • Reducir la cantidad de lineas de código.
  • Crear un game loop decente, que funcione con un FPS interno.
  • Darle mas propiedades a los objetos.

Saludos, espero seguir avanzando con este proyecto y actualizar acá y en mi blog.

Blog de SHIN
« Última modificación: 07 de Agosto de 2011, 04:59:05 am por ilovepixel »

Comunidad PHPeros

[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« en: 07 de Agosto de 2011, 04:56:21 am »

Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
Re:[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« Respuesta #1 en: 08 de Agosto de 2011, 14:08:18 pm »
ACTUALIZACIÓN

En este poco tiempo que ha pasado desde el inicio del proyecto he avanzado bastante. Tome la decisión de dejar de lado el método que estaba ocupando, el cual básicamente se basaba en Crear objetos Sprites y almacenar la información dentro de ellos, y que estos funcionasen como especies de paquetes. pero esta forma estaba matando el frame rate así que elegí otro camino mucho mas eficiente.

Actualmente ya tengo construido una clase maestra que controlaría las funciones generales de un juego.
La clase Master  contiene algunas funciones fundamentales tales como crearCanvas(), la cual crearía un marco donde todos nuestros objetos se renderean luego otra function que es agregarObjeto() que sirve para añadir objeto con los cuales trabajar dentro del canvas, la función dibujar(), que hace exactamente eso mismo y por ultimo la función Correr() que se encarga del game loop.

El game loop corre con un frame rate independiente del frame rate de flash, mas que nada por eficiencia.
Acá se puede ver un simple demo, apretando la tecla 1 el objeto rebota constantemente y con el botón 2 el objeto sigue al mouse.

http://ilovepixel.net/shin/?p=63

Simplemente lo que tengo en mi clase Main es esto:

Código: [Seleccionar]
package
{
import org.shin.Master;

/**
* ...
* @author Felipe Alfonso
*/
[SWF(width = "400", height = "300")]
public class Main extends Master
{
[Embed(source = "logo.png")] private var shin:Class;
public function Main():void
{
crearCanvas(400, 300, 0x5a5a5a,60);

agregarObjeto(shin,Math.random()*ANCHO,Math.random()*ALTO);

init();
}

}

}

Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
Re:[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« Respuesta #2 en: 09 de Agosto de 2011, 06:14:55 am »
Actualización

Estoy aprovechando de avanzar mientras tengo tiempo. Este nuevo avance incluye la posibilidad de cambiar Canvas dentro de el Escenario: al hacer esto podremos crear niveles, menú, créditos, etc.
Una demostración de la nueva función:

cambiarCanvas().

Lo que ven aquí es el mismo nivel que estaba posteado antes pero, ahora tiene un timer que dura 10 seg. Cuando este timer termine, cambiará de nivel. Cuando el siguiente nivel se cargue, 1800 objetos serán cargados al canvas los que se moverán simultáneamente .

http://ilovepixel.net/shin/wp-content/uploads/2011/08/Shin45.swf

Ahora el codigo de esto:

Main.as:

Código: [Seleccionar]
package
{
import flash.text.TextField;
import org.shin.Escenario;
/**
* ...
* @author Felipe Alfonso
*/
[SWF(width = "400", height = "300")]
public class Main extends Escenario
{
public static var texto:TextField = new TextField();
public function Main():void
{
super(400, 300);
canvasInicial(new Canvas1);
esconderMouse(true);
 
texto = new TextField();
texto.text = "No Colisiona";
texto.textColor = 0xffffff;
STAGE.addChild(texto);
}
 
}
 
}

Canvas1.as

Código: [Seleccionar]
package 
{
import flash.events.TimerEvent;
import flash.utils.Timer;
import org.shin.*;
import flash.text.TextField;
/**
* ...
* @author Felipe Alfonso
*/
public class Canvas1 extends Canvas
{
[Embed(source = "logo.png")] private var shin:Class;
private var obj:Objeto;
private var obj2:Objeto;
private var vx:Number = 5;
private var vy:Number = 5;
private var texto:TextField;
 
private var tempo:Timer;
 
public function Canvas1()
{
crearCanvas(0x5a5a5a);
obj = new Objeto();
obj.cargarImagen(shin, 0, 0);
obj2 = new Objeto();
obj2.cargarImagen(shin, 20, 100);
agregar(obj);
agregar(obj2);
 
tempo = new Timer(1000, 10);
tempo.addEventListener(TimerEvent.TIMER_COMPLETE, cambiarNivel);
tempo.start();
 
}
 
private function cambiarNivel(e:TimerEvent):void
{
Escenario.cambiarCanvas(this, new C1);
e.target.stop();
tempo.removeEventListener(TimerEvent.TIMER_COMPLETE, cambiarNivel);
}
 
override public function loop():void
{
obj2.x = STAGE.mouseX-obj2.ancho/2;
obj2.y = STAGE.mouseY-obj2.alto/2;
 
obj.x += vx;
obj.y += vy;
 
if (obj.x > Escenario.ANCHO - obj.ancho || obj.x < 0)
{
vx *= -1;
}
 
if (obj.y > Escenario.ALTO -obj.alto || obj.y < 0)
{
vy *= -1;
}
 
if (detectarColision(obj, obj2))
{
Main.texto.text = "Colisiona";
}else { Main.texto.text = "No Colisiona";}
 
}
 
}
 
}

C1.as

Código: [Seleccionar]
package 
{
import org.shin.Canvas;
/**
* ...
* @author Felipe Alfonso
*/
public class C1 extends Canvas
{
public function C1()
{
crearCanvas(0xff0000);
for (var i:int = 0; i <1800; i++)
{
var s:MiShin = new MiShin();
agregar(s);
}
}
 
override public function loop():void
{
super.loop();
}
 
}
 
}

MiShin.as

Código: [Seleccionar]
package 
{
import org.shin.Objeto;
/**
* ...
* @author Felipe Alfonso
*/
public class MiShin extends Objeto
{
[Embed(source = "logo.png")] private var shin:Class;
private var ax:Number = Math.random()*5;
private var ay:Number = Math.random()*5;
 
public function MiShin()
{
cargarImagen(shin, 0, 0);
this.x = Math.random() * 350;
this.y = Math.random() * 250;
}
 
override public function loop():void
{
x += ax;
y += ay;
if (x > 400 - ancho || x < 0) ax *= -1;
if (y > 300 - alto || y < 0) ay *= -1;
super.loop();
}
}
 
}

Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
Re:[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« Respuesta #3 en: 11 de Agosto de 2011, 20:33:43 pm »
Actualización

Ayer me quede hasta tarde trabajando en la función que controlara las animaciones, las animaciones seran en base a sprite sheets (buscar sprite sheet en google). Las variables importantes de esta función son:

Alto >> El Alto de cada frame.
Ancho >> El Ancho de cada frame.
Frames >> Un Array que almacena los frames que quieres reproducir, por ejemplo [0,1,2,3,2,1].
Delay >> Cuanto retraso quieres que la animación tenga. Mientras mas alto es el numero mayor es el retraso.

Esta es una demostración ocupando el mismo ejemplo anterior pero con animaciones.

http://ilovepixel.net/shin/wp-content/uploads/2011/08/Shin46.swf

Para crear la animación se ocupan las siguientes funciones:

Código: [Seleccionar]
private var obj:Objeto;
[Embed(source="spriteSheet.png")] private var sSheet:Class;
public function Nivel1()
{
obj.cargarImagen(aSheet,true);
obj.crearAnim(20,20,[0,1,2,3,2,1],3);
agregar(obj);
}

La función cargarImagen se compone así:

Código: [Seleccionar]
/**
* Imagen equivale a la imagen o sprite sheet que deseas cargar.
* Animado es un boolean que indica si la imagen cargada va a ser utilizada como animación o como objeto inanimado.
*/
cargarImage(Imagen:Class, Animado:Boolean)

y la función crearAnim se compone así:

Código: [Seleccionar]
/**
* Ancho: El ancho del frame.
* Alto: Altura del frame.
* Frames: Array donde se almacenan los frames a reproducir.
* Delay: Valor que indica cuando retraso tendrá la animación, mientras mas alto mas retraso.
*/
crearAnim(Ancho:int, Alto:int, Frames:Array, Delay:int)

Desconectado Incompatible

  • PHPerit@
  • *
  • Mensajes: 34
  • Karma: 1
  • D9E4FC25
    • Ver Perfil
Re:[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« Respuesta #4 en: 11 de Agosto de 2011, 22:33:04 pm »

Enhorabuena Pixel,

Parece un proyecto sólido. La pena es que no tengo ni idea de actionscript (Algo que siempre he querido aprender, pero ya con HTML 5 y jQuery, está obsoleto, al menos, esa es mi opinión) si no te ayudaría con algo.

Tiene muy buena pinta, espero que esto no se cancele :)

Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
Re:[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« Respuesta #5 en: 12 de Agosto de 2011, 02:18:15 am »
Muchas gracias por el apoyo, no tengo ningún plan de cancelar este proyecto, ademas mi idea a futuro es crear un GUI que facilite aun mas el trabajo de crear juegos en Air,   que sea prácticamente un Drag and Drop.

Sobre de que actionscript esta muerto, personalmente no encuentro que así sea, de hecho adobe lo esta impulsando mucho implementando AIR a varias plataformas, ademas de poder correr como un programa en el escritorio. Coincido que las páginas web hechas con flash ya son cosa del pasado pero flash esta lejos de morir. Ademas hay que tener en cuenta de que ya se ha anunciado el Adobe AIR 3 que tendrá soporte 3D y aceleración por GPU, que estará soportado desde com*****dores hasta aparatos móviles.

Desconectado Incompatible

  • PHPerit@
  • *
  • Mensajes: 34
  • Karma: 1
  • D9E4FC25
    • Ver Perfil
Re:[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« Respuesta #6 en: 12 de Agosto de 2011, 13:26:30 pm »

Muchas gracias por el apoyo, no tengo ningún plan de cancelar este proyecto, ademas mi idea a futuro es crear un GUI que facilite aun mas el trabajo de crear juegos en Air,   que sea prácticamente un Drag and Drop.

Sobre de que actionscript esta muerto, personalmente no encuentro que así sea, de hecho adobe lo esta impulsando mucho implementando AIR a varias plataformas, ademas de poder correr como un programa en el escritorio. Coincido que las páginas web hechas con flash ya son cosa del pasado pero flash esta lejos de morir. Ademas hay que tener en cuenta de que ya se ha anunciado el Adobe AIR 3 que tendrá soporte 3D y aceleración por GPU, que estará soportado desde com*****dores hasta aparatos móviles.

Googlearé un poco para saber que es eso de AIR. Como ya te digo, no tengo ni idea de nada sobre el tema pero tal y como lo perfilas parece ser algo bastante bueno.

Respecto a lo de que Flash está muerto, es tu opinión que vale tanto como la mía. Asi que veremos en un futuro cercano que pasa con AS y si seguirá vivo o no.

Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
Re:[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« Respuesta #7 en: 13 de Agosto de 2011, 11:57:26 am »
Este nuevo avance consiste en el rendereado con angulos. En esta demostración se puede ver como funciona:
http://ilovepixel.net/shin/wp-content/uploads/2011/08/Shin47.swf

Esto se puede configurar así:
miObjeto.angulo = angulo

También se puede activar el suavizado simplemente por poniendolo en true.

Finalmente añadi una simple función que devuelve un verdadero numero random, ya que el de Math.random() no funciona tan bien. Esta función es rand(numero bajo, numero alto) , esto entrega un numero al azar entre los dos que indicas, como el de php.

Pd: perdón si tengo faltas ortograficas per estoy escrbiendo desde un celular, ya que no tengo internet en casa.

Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
Re:[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« Respuesta #8 en: 31 de Agosto de 2011, 19:32:28 pm »
Actualización

He estado experimentando y buscando la tecnología donde puede correr mejor Shin, en un comienzo elegí Adobe AIR, mas que nada por lo fácil de empaquetar y porque el lenguaje que ocupa es AS3, pero el unico problema es que necesita de un runtime para ejecutarse.

En esta busqueda encontre ELPIS (http://developer.openplug.com/), un framework que traduce AS3 a C++, por ende puede correr como una aplicación nativa. Así que he decidido que optimizare Shin para que corra con ELPIS, ya que tal cual está ahora no funciona. De todas formas hice un par de modificaciones en Shin y logre que corriese en Android.

Acá se encuentra un vídeo:

http://www.youtube.com/watch?feature=player_embedded&v=lwImQ3beu84

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« Respuesta #9 en: 31 de Agosto de 2011, 20:48:23 pm »

Simplemente, wow.... estoy anonadado.

Un saludo,
Siquillote.

#Fdo. Physlet

Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
Re:[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« Respuesta #10 en: 15 de Septiembre de 2011, 07:06:28 am »
Actualización

Shin5 es una nueva prueba o versión en la que estoy trabajando, todo esto gracias a haXe y Jeash. Ya que todos dicen que html5 pateara el trasero de Flash, cosa en la que no concuerdo pero de todas formas hay que estar al día.

No estoy planeando que esto sea la versión que corra para móviles, simplemente un proyecto aparte pero dentro del mismo framework.

Acá pueden ver la demo, es básicamente el mismo código que en Shin enfocado a móviles, solo con algunos detalles que lo diferencian.

Demo Shin5

Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
Re:[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« Respuesta #11 en: 20 de Septiembre de 2011, 04:41:51 am »
Actualización

He elegido ShinHX como el nuevo nombre del proyecto debido a que estará escrito con haXe, un lenguaje multi-plataforma.

Me dí cuenta en mi búsqueda que OpenPlug Studio (ELPIS) no funcionaba bien en cada aparato, y tendría que reescribir todo el código para cada uno y eso no es lo que yo quería.

Finalmente he publicado una versión bastante temprana de lo que es ShinHX, aun así planeo seguir trabajando y perfeccionandolo hasta que se transforme en algo decente.

Lo pueden descargar de ACÁ

Este es un video demostrando el funcionamiento de ShinHX:

Ver video en YouTube

En el video indico que aun no agrego colisiones, pero hoy en la tarde añadí la colisión de rectángulos.

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« Respuesta #12 en: 03 de Octubre de 2011, 08:21:31 am »
Actualización

He elegido ShinHX como el nuevo nombre del proyecto debido a que estará escrito con haXe, un lenguaje multi-plataforma.

Me dí cuenta en mi búsqueda que OpenPlug Studio (ELPIS) no funcionaba bien en cada aparato, y tendría que reescribir todo el código para cada uno y eso no es lo que yo quería.

Finalmente he publicado una versión bastante temprana de lo que es ShinHX, aun así planeo seguir trabajando y perfeccionandolo hasta que se transforme en algo decente.

Lo pueden descargar de ACÁ

Este es un video demostrando el funcionamiento de ShinHX:

Ver video en YouTube

En el video indico que aun no agrego colisiones, pero hoy en la tarde añadí la colisión de rectángulos.

Veo que te encanta utilizar haXe en todo xD
---
Referente al proyecto, el vídeo esta excelente aunque créeme que nadie de aquí lo terminara de ver sencillamente por los 23 minutos de duración que tiene. Seria mejor ahorrarse algunos pasos si es que este llega siendo el vídeo de presentación.

En si la idea de proyecto es muy buena y espero verlo terminado.
Saludos y suerte con tu proyecto!
Twitter: @JoakoM010



Desconectado ilovepixel

  • PHPer@ Fijo
  • ***
  • Mensajes: 149
  • Karma: 9
  • Sexo: Masculino
  • Game Artist & Developer
    • Ver Perfil
    • i ■ pixel
Re:[PROYECTO] SHIN, Framework de AS3 para desarrollo de juegos móviles.
« Respuesta #13 en: 18 de Octubre de 2011, 06:41:25 am »
Gracias SoyJoaquin :) hehe los siguientes vídeos los trataré de hacer mas cortos.

Actualización

Al fin logré que corriese bien en html5, me costo un poco ya que algunas cosas funcionan diferente para cada plataforma. También agregué una función que sirve para cambiar el canvas o escena, por ejemplo par cambios de niveles, menú, creditos, etc.

Creo que la siguiente semana podré probar en un ipod touch y ver que tal corre.

Acá hay un pequeño vídeo demostrando que por ahora corre bien en flash, html5 y C++.
http://www.youtube.com/watch?v=IC2p2Sm8C_0

Acá esta el demo corriendo en html5:
http://ilovepixel.net/shinhtml5/