Div Games en Html5 y Canvas

Started by AmakaSt, September 07, 2012, 03:28:01 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

AmakaSt

Hola,

Ya está disponible online la versión 0.58 y aquí os dejo la lista de novedades:

funciones:
   - region_wave(), region_zoom(), region_mask()
   - wave_in_map()
   - fade_in(), fade_out()


struct tilt: (solo funcional en dispositivos móviles o que incluyan acelerómetro)
   - x, y, z

bugs y mejoras:
   - [FIX] al ejecutar tu proyecto en chrome desde la ruta file:/// no se inicializaba, lo recomendable es ejecutar el proyecto en http:// porque algunas funcionalidades de javascript pueden dar error
   - [FIX] problema con set_mode al usar variables de resolución junto con valor de ampliación
   - [FIX] pequeña optimización en el dibujado del canvas
   - [ADD] cambios en la inicialización del programa para mejorar el contenido del html del proyecto empaquetado
   - [FIX] solucionado varios bugs
   - [ADD] nuevos menús, guía de usuario, más ejemplos y Tutoriales de Div Games Studio


Un saludo. :)

AmakaSt

Div GO 0.58 ya disponible para descargar en dos versiones: la normal (la que necesitas configurar localhost con Xampp, Wamp, Lamp...) y la versión ejecutable para Windows, mas sencilla y no requiere una configuración previa.  :)

Un saludo.

AmakaSt

Ya disponible online la versión 0.60 (para testear) y aquí las novedades:

variables:
  - math_pi, math_e, math_max, math_min

funciones:
  - isnan(), isfinite(), exp(), log()
  - hsl(), hsla(), explode(), implode()

bugs y mejoras:
  - [FIX] solucionado problema en el funcionamiento del touch en dispositivos Android
  - [FIX] mejorada la declaración de structs ahora el compilador no se lía cuando dos structs distintas tienen variables iguales
  - [FIX] varios bugs en el ide, el compilador y en el engine
  - [ADD] pequeña optimización en el dibujado de procesos y scrolls
  - [ADD] botones para minimizar ventanas de recursos de forma independiente
  - [ADD] visor de fuentes (ttf, otf, woff) y control de audio que se carga desde el código
  - [ADD] ahora la lista de procesos se colorea según el estado de cada proceso
  - [FIX] ha vuelto el botón de pausar proyecto en el listado de procesos

Un saludo.

AmakaSt

Desde ya, la versión 0.60 disponible para descargar, tanto en versión normal como en ejecutable para windows. :)

Un saludo.

AmakaSt

Aquí una pequeña demostración del funcionamiento de las variables tilt.x, tilt.y y tilt.z (solo apreciable con dispositivos móviles):  http://www.divgo.net/proyectos/prueba-tilt/

Y este es el código:
program ejemplo_tilt;
global
    id_txt;
       
begin
    /* pruebas con opciones de pantalla */
    set_mode(640, 400);
    screen_color(#ddd);

    set_fps(60, 0);
   
    text_color = #999;
    id_txt = write(0, 320, 90, 4, "Toca la pantalla para disparar");
    write_int(0, 0, 0,  0, &tilt.x);
    write_int(0, 0, 20, 0, &tilt.y);
    write_int(0, 0, 40, 0, &tilt.z);
   
    nave(320, 200);
end

process nave(px, py);
private
    disparado;
    angulo = 90000;
   
begin
    graph = 3;
    size  = 50;
    angle = angulo;
   
    write_int(0, 640, 0,  2, &x);
    write_int(0, 640, 20, 2, &y);
    write_int(0, 640, 40, 2, &angle);
   
    loop       
        x = px + (tilt.x * 2);
        y = py - (tilt.y * 2);
        angle = angulo - ((tilt.x * 1000) + (tilt.y * 1000))*2;

        if (mouse.left and disparado < 1)
            disparo(x, y, angle);
            disparado = 5; delete_text(id_txt);
        end
               
        disparado --; if (disparado < 0) disparado = 0; end
       
        frame;
    end
end

process disparo(x, y, angulo);
begin
    graph = 1;
    size  = 10;
    z      = 10;
    angle = angulo;
    advance(20);
   
    loop
        xadvance(angulo, 10);
        angle += 45000;
       
        if (out_region(id, 0)) break; end
       
        frame;
    end
end


Ahora que cada uno experimente para mejorar este código. ;)

Un saludo.

AmakaSt

Hola,

Durante esta semana subiré la versión 0.62, la primera del año, esta versión de Div GO incluye 3D como gran novedad. Esto implica la pérdida de compatibilidad con navegadores antiguos que no soporten WebGL (IE9). Y como va siendo habitual... aquí os dejo la lista de novedades:

funciones:
  - start_scene3d(), set_fog(), stop_scene3d()
  - object3d(), texture_in_object3d(), move_object3d(), modify_object3d(), delete_object3d()
  - light3d(), move_light3d(), delete_light3d()

variables:
  - c_scene3d, all_object3d, all_light3d

struct scene3d:
  - camera, light, terrain, alpha, visible;

struct camera3d:
  - focus, x, y, z, angle_x, angle_y, angle_z;

bugs y mejoras:
  - [ADD] libreria 3d Three.js para crear escenas, luces y objetos en 3d
  - [FIX] al pulsar en el listado de procesos, ahora te deja en la linea exacta del codigo donde se declara el proceso
  - [ADD] indicador que te muestra si tienes, o no tienes, control del teclado sobre el juego
  - [ADD] ejemplo de uso de las nuevas funciones 3d

Un saludo.

AmakaSt

Ya esta online la versión 0.62 con 3D. Este es el enlace al ejemplo de scene3D: http://www.divgo.net/index.php?ejemplo=5 (también está en la lista de ejemplos)  :)

Un saludo.

JaViS

Muy bueno che :) muy linda calidad de renderizado


podrias colgar un screenshot para publicar en las noticias del sitio?


gracias!
Working on Anarkade. A couch multiplayer 2D shooter.

AmakaSt

Quote from: JaViS on January 30, 2015, 01:20:23 PM
Muy bueno che :) muy linda calidad de renderizado


podrias colgar un screenshot para publicar en las noticias del sitio?


gracias!

Gracias JaViS.
Aquí te adjunto una captura a pantalla completa del ejemplo y una captura cogida del Facebook, así puedes elegir la que más te guste. :)



Un saludo.

l1nk3rn3l


AmakaSt

Quote from: l1nk3rn3l on January 31, 2015, 03:03:45 PM
EXCELENTE APORTE  ;D

Gracias. :)

Ya está disponible para descargar, en las 2 versiones: Desktop para Windows y la normal para configurar con localhost.

Un saludo.

AmakaSt

Ya disponible online la versión 0.64, aquí las novedades: :)

funciones:
  - load_object3d()

variables locales:
  - angle_x, angle_y, angle_z

struct scene3d:
  - focus, distance

bugs y mejoras:
  - [FIX] start_scene3d() ahora se puede crear varios scene3d en distintas regiones
  - [CHANGE] el quinto parámetro de la función object3d, pasa de ser el numero de región para ser el grosor de línea cellshading
  - [CHANGE] reescrito el mode7, ahora funciona similar a Div salvo por algún cambio como en el uso de las locales (y, z)
  - [FIX] las light3d al crear los objetos antes de las luces no se le aplicaba la luz
  - [FIX] al añadir textura con texture_in_object3d después de una luz, no se aplicaba la luz sobre dicha textura
  - [ADD] manejo de ángulos para mode7 y scene3d en las funciones advance() y xadvance()
  - [DEL] eliminada la struct camera3d
  - [CHANGE] start_scene3d() con dos parámetros menos, ahora el ancho y alto de las texturas es automático
  - [FIX] solucionado varios bugs del compilador
  - [ADD] carga de objetos 3d en los formatos .obj, .dae y .wrl

Un saludo.

AmakaSt

#192
Aquí dejo un código de ejemplo, que hace uso de angle_y y angle_z (angle) para manejar las vistas con el ratón y controles como son en los juegos en primera persona.


// Pruebas de compilador online Div GO
// Php + Html5 + Canvas + Javascript + Three.js lib
// by J. Manuel Habas Millán

program ejemplo_3d;
global
    tex, obj1, obj2, luz1, luz2;

private
    uz = 200, ang = 0, fig1, fig2;

begin
    tex = load_fpg("graficos/texturas");
   
    set_mode(640, 400);
    screen_color(#424);

    set_fps(60, 0);
   
    text_color = #ccc;
    text_size  = 50;
   
    write(0, 5, 10, 3, "CURSORES: moverte por el escenario");
    write(0, 5, 30, 3, "MOUSE: mover el punto de vista");

    //inicia scene3d sin esto no funcionaran las funciones object3d() ni light3d()
    start_scene3d(0, tex, 3, 0); //numero, file, graph, ancho, alto, region
   
    //crea objetos en escena
    obj1 = object3d(1, 1, #ff0, 100, 0, -100, 50, 200); //tipo, wireframe, color, alpha, trazado, x, y, z
    obj2 = object3d(2, 1, #000, 100, 1, 100, 50, 200);  //tipo, wireframe, color, alpha, trazado, x, y, z

    //carga y crea modelo 3d en escena
    fig2 = load_object3d("objetos3d/monster.dae", 0, #fff, 0, 0, 0);  //archivo, wireframe, color, x, y, z

    move_object3d(fig2, 0, 0, 200, 90000, 0, 0); //id, x, y, z, angle_x, angle_y, angle_z

    //aplica una textura a objeto
    texture_in_object3d(obj1, tex, 4); //id, file, graph
    texture_in_object3d(obj2, tex, 2); //id, file, graph
    texture_in_object3d(fig2, tex, 3); //id, file, graph

    //modifica el ancho, alto o largo de los objetos
    modify_object3d(fig2, 100, 1000, 1000, 1000);

    //crea luces en escena
    luz1 = light3d(100, rgb(200, 200, 255), 10000, 100, 100, -100); //intensidad, color, distancia, x, y, z
    luz2 = light3d(200, rgb(0, 255, 128), 1000, -100, 200, -100);
   
    jugador(0, 100, 200); //x, y, z
   
    scene3d.light = 0;
    scene3d.alpha = 0;
    scene3d.distance = 10;
   
    loop
        ang += 400;
       
        move_object3d(obj1, -100, 50, uz, 0, ang, 0); //id, x, y, z, angle_x, angle_y, angle_z
        move_light3d(luz2, 200, -100, 200, uz - 100); //id, intensidad, x, y, z
     
        if (key(_z)) delete_object3d(all_object3d); end
        if (key(_y)) object3d(rand(0, 4), rand(0, 1), rgb(rand(0,255), rand(0,255), rand(0,255)), rand(0, 100), 0, rand(-200, 200), rand(0, 250), rand(-200, 200)); end
       
        if (key(_esc)) exit("Amaka Soft 2015", 1); end
       
        frame;
    end
end

process jugador(x, y, z);
private
    reten = 0;
   
begin
    scene3d.camera = id;

    loop
        if (key(_left)) xadvance(angle + 90000, -10); end
        if (key(_right)) xadvance(angle + 90000, 10); end
        if (key(_up)) advance(10); end
        if (key(_down)) advance(-10); end
       
        //angle y angle_z funcionan igual
        angle += (mouse.x - 320) * 10; //¡AAAARGH, BUG LOCALIZADO con angle_z!
        angle_y -= (mouse.y - 200) * 10;

        if (angle_y > 20000) angle_y = 20000; end
        if (angle_y < -20000) angle_y = -20000; end
       
        if (mouse.left and reten == 0) disparo(x, y-20, z, angle); reten = 10; end

        reten--; if (reten < 0) reten = 0; end
       
        frame;
    end
end

process disparo(x, y, z, angle);   
begin
    graph = 2;
    size  = 20;
    ctype = c_scene3d;
   
    loop
        advance(25);
       
        flags++; if (flags > 3) flags = 0; end
        alpha--; if (alpha < 0) break; end
       
        frame;
    end
end


Un saludo. :)

panreyes

Holas AmakaSt :)


Primero de todo, agradecerte el curro que le estás dando. Nunca está de más nuevos engines DIV-like :)


Por ahora yo lo estoy utilizando para hacer ejemplos rápidos de códigos, y me viene bastante bien, aunque me gustaría pedirte un detalle:
¿Qué te parecería que se pudiera guardar los PRGs online? Es como el código que puse el otro día en Twitter. En vez de dar una URL de PasteBin y otra de DivGO, una URL de DivGO con un parámetro que identifique al PRG guardado en el servidor, o incluso un segundo parámetro para directamente ejecutar ese PRG enviado.


¿Qué te parece?


Un saludo

Yawin

Jo, pues yo no consigo que me vaya. No se qué puedo estar haciendo mal. Estoy ejecutando este código:
program demorl;
private
       i,j,k,l;
begin
    set_mode(640,480);
    set_fps(120,0);
   
    loop
        i++;
        l+=cos(i*1000)*4;
        if(k==0)
            if(j++>100)k=1; end
        else
            if(j--<50)k=0; end
        end

        cubo(l,j,j);
        frame;
    end
end

function cubo(stepe, _wi, _hi);
private
    i,j;
    vertices[5][4];
begin
    clear_screen();
    delete_draw(0);
    stepe*=1000;

    vertices[0][0]=320 + cos(stepe)*2*_wi;          vertices[0][1]=(240-_hi) + sin(stepe)*_wi;
    vertices[1][0]=320 + cos(stepe+1*70000) *2*_wi; vertices[1][1]=(240-_hi) + sin(stepe+1*70000)*_wi;
    vertices[2][0]=320 + cos(stepe+2*70000) *2*_wi; vertices[2][1]=(240-_hi) + sin(stepe+2*70000)*_wi;
    vertices[3][0]=320 + cos(stepe+3*70000)*2*_wi;  vertices[3][1]=(240-_hi) + sin(stepe+3*70000)*_wi;
    vertices[4][0]=320 + cos(stepe+4*70000)*2*_wi;  vertices[4][1]=(240-_hi) + sin(stepe+4*70000)*_wi;

    vertices[0][2]=320 + cos(stepe)*2*_wi;          vertices[0][3]=(240+_hi) + sin(stepe)*_wi;
    vertices[1][2]=320 + cos(stepe+1*70000) *2*_wi; vertices[1][3]=(240+_hi) + sin(stepe+1*70000)*_wi;
    vertices[2][2]=320 + cos(stepe+2*70000) *2*_wi; vertices[2][3]=(240+_hi) + sin(stepe+2*70000)*_wi;
    vertices[3][2]=320 + cos(stepe+3*70000)*2*_wi;  vertices[3][3]=(240+_hi) + sin(stepe+3*70000)*_wi;
    vertices[4][2]=320 + cos(stepe+4*70000)*2*_wi;  vertices[4][3]=(240+_hi) + sin(stepe+4*70000)*_wi;

    for(i=0;i<4;i++)
        draw(0,rgb(255,255,255),0,0,vertices[i][0],vertices[i][1],vertices[i+1][0],vertices[i+1][1]);
        draw(0,rgb(255,255,255),0,0,vertices[i][2],vertices[i][3],vertices[i+1][2],vertices[i+1][3]);
        draw(0,rgb(255,255,255),0,0,vertices[i][0],vertices[i][1],vertices[i][2],vertices[i][3]);
    end
    draw(0,rgb(255,255,255),0,0,vertices[0][0],vertices[0][1],vertices[i][0],vertices[i][1]);
    draw(0,rgb(255,255,255),0,0,vertices[0][2],vertices[0][3],vertices[i][2],vertices[i][3]);
    draw(0,rgb(255,255,255),0,0,vertices[i][0],vertices[i][1],vertices[i][2],vertices[i][3]);
end


Y, mientras que la versión en bennu se ve así https://www.youtube.com/watch?v=t1URE5YD4ag
En DIVgo me deja la ventana en negro.
Sigue el desarrollo de mi motor RPG: https://www.youtube.com/watch?v=TbsDq3RHU7g

process main()
       begin
           loop
               pedo();
               frame;
            end
       end