Div Games en Html5 y Canvas

[AmakaSt]

Los videos tutoriales es una opción, aunque yo veo más acertado tener un sistema donde cada uno pueda ir mostrando sus propios tutoriales con código incluido, también  hecho en falta un juego simple tipo rebotes pero que incluya presión táctil para móvil, pues esto llama bastante la atención .es decir, hacer la página más dinámica de divgo,donde cada uno pueda contribuir a su mojo,pues por lo demás va progresando divgo y se agradece que no haya quedado en el olvido.una vez que acabe el motor de plataformas que va pa largo 😁 se podrá hacer juegos fácilmente.actualmente es el derivado de div mas fiel y que incluye nuevas características, aunque no te niego hokuto que si no tienes un ordenador actual,es lento para ciertos juegos y debes optimizar Bastante para superar tal traba

Hola oskarg,

Tengo pendiente una web de juegos desarrollados con DivGO y que cada desarrollador pueda tener su espacio donde subir sus juegos e indicar si quiere incluir código abierto en modo tutorial o solo disponible para jugar (con o sin publicidad), etc. Pero como todo se necesita tiempo para hacerlo posible... :P

Un saludo.

[hokuto40]

Hola hokuto40,

No creo que yo sea el más indicado para crear videotutoriales, soy bastante impaciente y los haría explicando rápido o no muy aclaratorios, aquí te paso unos enlaces a unos videotutoriales que están disponibles en YouTube creados por Profe NachoG:

https://www.youtube.com/watch?v=fOlkw1Pv2lI
https://www.youtube.com/watch?v=Lmeyq0c-ExQ
https://www.youtube.com/watch?v=8EdU4tVt6fo
https://www.youtube.com/watch?v=baWMhD9GSLg
https://www.youtube.com/watch?v=5S8lvxBSfT4

A decir verdad, es el que más provecho le está sacando a DivGO, tiene hasta una app comercial en Argentina.
Un saludo

Ya conocia este canal,son tutoriales demasiado basicos pero para el que no sabe nada esta bien,aunque solo son cinco y no hay mas,una pena que lo dejara.

Se me ha ocurrido que podrias hacer ejemplos a modo de tutorial de cosas especificas y con comentarios,podrias hacer ejemplos cortos como los ejemplos que tienes de cada funcion,estos ejemplos son cortitos y bastante claros.

Entonces podrias hacer ejemplos cortos y cada ejemplo esplicaria solo una cosa,estos ejemplos esplicarian cosas que tienen cada juego,por ejempo:

En un ejemplo puedes esplicar como se programa un salto,en otro como se hace una gravedad,en otro como parar un personaje al colisionar con una pared,en otro como hacer que un personaje parpadee,como hacer que dispare etc..

Hacer ejemplos de cosas que suelen llevar juegos de todo tipo,no se si me he explicado bien.Creo que en proximas versiones en vez de añadir nuevas funcionalidades podrias centrarte en hacer este tipo de ejemplos para aprender a usarlo bien.

[AmakaSt]

Buenas,

Ya está disponible para descargar la versión 1.26.0 de Div GO: http://www.amakasoft.com/herramientas/div-go.html

Un saludo.

[oskarg]

Hola Amakast,
No habia leido el ultimo post.....bajando la nueva beta y probando cosas a ver que tal,de antemano se agradece las mejoras ,sobretodo el control+z que me borraba todo el codigo y maldecia a un dios ,pero no precisamente al dios thor.... ;D

Dos cosas prefiero yo personalmente que se siga mejorando y añadiendo caracteristicas.Considero que hay ya bastante documentacion,es solo cuestion de mirar el codigo de los ejemplos y la explicacion de las funciones,pues en  casi todas incluyen un ejemplo.
Lo otro hotuko,cuando se pueda contribuir ,yo encantado de poner ejemplos de los que dices pero enteros,siempre he querido hacer juegos simples pero didacticos y completos,donde muestren como se hace.Desde su presentacion ,superacion de fase hasta su tabla de record... y como hace poco descubri que se puede separar el codigo,pues aun mejor...solo es cuestion de modificar ciertas cosas y el esqueleto del juego basicamente suele ser el mismo.
Otra cosa Amakast,no se si tienes pico-8.Yo tengo una version de pico-8 la forma como trata los graficos ,el scroll,etc...lo digo porque no se si has trasteado con el,pero tiene cosas muy interesantes que todos los derivados de div carece y tiene cosas muy buenas .
Por poner un ejemplo basico:
1.Un juego se graba en un imagen png.SI...guardas todo el codigo dentro del png y lo gracioso del caso es que sirve tambien para mostrar la caratula del juego.Esto es mega curioso...y claro solo aquel que tiene pico-8 puede cargan la imagen y ver su codigo y graficos..
2.Los graficos no son sprites separados ,es un gran mapa donde tu indicas que tal porcion de un rectangulo represente un sprite,fondo,enemigo..en cada frame se hace un borrado y entonces le vuelves a indicar que grafico quieres colocar en cierto sitio...es como si trabajara con tiles y de esta manera puedo hacer facilmente como te comente por ejemplo un mar en movimiento que ocupa toda la pantalla.
3.Puedes hacer cualquier cosa 3d,pues permite hacer un motor de relleno de triangulos o rectangulos y que estos se rellenen con un patron
4.El sistema de colisiones ,gracias a que divgo no tengo limitacion de lineas ,puedo implementarlo como actua en pico-8 ,mediante cajas.Solo una reflexion... cuando lo tenga te lo paso el juego de jet-se-willy ,pero el codigo es mega extenso y eso que lo estoy reescribiendo y eso que que cuando lo termine lo quiero reescribirlo otra vez ,para hacerlo mas reducido.Si alguien osa hacer esto,joe que se tome un par de tazas de cafe,pues es muy largo...aunque  una vez hecho,ya tenemos un motor para hacer cualquier plataformas en 2d.
5.No se si es optimo,pero a veces me gustaria que divgo tuviera un sistema de particulas como trae pico-8 o amulet y tambien poder hacer pitidos ,es decir los tipico sound de amstrad,no se si es por añoranza pero me gustaban una barbaridad ,al igual que los border  ;D que hacia parpadeando ;D
Por lo demas gracias Amakast ,pues en mi tiempo libre lo paso bien intentado hacer esos juegos que de renacuajo alucinaba con ellos en mi monitor fosforo verde y decia guau!! que graficos ,que calidad y era " tooo" VERDE ;D



Un saludo.

[oskarg]

Se me olvidaba ,el editor grafico,please permite poder hacer mas zoom,se me ha quedado absoleto y no veo nada....

[AmakaSt]

Ya conocia este canal,son tutoriales demasiado basicos pero para el que no sabe nada esta bien,aunque solo son cinco y no hay mas,una pena que lo dejara.

Se me ha ocurrido que podrias hacer ejemplos a modo de tutorial de cosas especificas y con comentarios,podrias hacer ejemplos cortos como los ejemplos que tienes de cada funcion,estos ejemplos son cortitos y bastante claros.

Entonces podrias hacer ejemplos cortos y cada ejemplo esplicaria solo una cosa,estos ejemplos esplicarian cosas que tienen cada juego,por ejempo:

En un ejemplo puedes esplicar como se programa un salto,en otro como se hace una gravedad,en otro como parar un personaje al colisionar con una pared,en otro como hacer que un personaje parpadee,como hacer que dispare etc..

Hacer ejemplos de cosas que suelen llevar juegos de todo tipo,no se si me he explicado bien.Creo que en proximas versiones en vez de añadir nuevas funcionalidades podrias centrarte en hacer este tipo de ejemplos para aprender a usarlo bien.

5.No se si es optimo,pero a veces me gustaria que divgo tuviera un sistema de particulas como trae pico-8 o amulet y tambien poder hacer pitidos ,es decir los tipico sound de amstrad,no se si es por añoranza pero me gustaban una barbaridad ,al igual que los border  ;D que hacia parpadeando ;D

Hola hokuto40 y oskarg,

Aquí os dejo un par de ejemplos:

Ejemplo sencillo de salto con impulso: https://www.divgo.net/c-954e95b2
Ejemplo distintos tipos de parpadeos (a lo CPC464): https://www.divgo.net/c-46c60132

Un saludo.

[hokuto40]

Hola Amakast.

Muchas gracias por los ejemplos,estos son los ejemplos que llevo pidiendo hace siglos y por fin alguien que me escucha("ALELUYA"). ;)

Me molan los dos ejemplos,cuando puedas haz mas ejemplos de estos para todo tipo de juegos y poder aprender mas.

Saludos. :)

[AmakaSt]

Hola hokuto40,

Me alegra que te hayan gustado los ejemplos, aquí dejo otro siguiendo el de los saltos pero esta vez con paredes u obstáculos: https://www.divgo.net/c-0519b6f1

Un saludo.

[hokuto40]

Hola hokuto40,

Me alegra que te hayan gustado los ejemplos, aquí dejo otro siguiendo el de los saltos pero esta vez con paredes u obstáculos: https://www.divgo.net/c-0519b6f1

Un saludo.

Muy bueno este tambien,me mola este tipo de ejemplos cortos. ;)

De momento los estoy entendiendo bien con un poco de estudio claro,sigue haciendo mas cuando te vaya apeteciendo.

Saludos. :)

[oskarg]

Curioso...como informacion
Si te va lento divgo con chrome,fire.......prueba el navegador Avant...la mejora es muy notable,en juegos tipo pacoman,se nota una mejora de fluidez sustancial   y es muy marcada en el juego de plataformas,este ultimo era injugable.
Lo que no entiendo por que en el juego de plataformas,este cambio tan radical y por que hay tanta diferencia segun que navegador utilices como de optimo maneja los procesos o los get_pixeles.

[AmakaSt]

Curioso...como informacion
Si te va lento divgo con chrome,fire.......prueba el navegador Avant...la mejora es muy notable,en juegos tipo pacoman,se nota una mejora de fluidez sustancial   y es muy marcada en el juego de plataformas,este ultimo era injugable.
Lo que no entiendo por que en el juego de plataformas,este cambio tan radical y por que hay tanta diferencia segun que navegador utilices como de optimo maneja los procesos o los get_pixeles.

Esto depende del motor de Javascript que tenga el navegador, cada navegador tiene un motor propio. El más común y de código abierto es el V8 (https://v8.dev/) que lo tienen casi todos los navegadores: Chrome, NodeJs, Opera y ahora Edge también. El de Avant estará mejor optimizado a la hora de trabajar con el renderizado del contexto 2d de canvas.

Aquí dejo otro ejemplo, este es para localizar al jugador opuesto u otro proceso: https://www.divgo.net/c-b2169c26

Un saludo.

[hokuto40]

Gracias por el ejemplo amakast. ;)

Aunque me los estoy descargando seria bueno que estos ejemplos que estas creando los incorpores en las proximas actualizaciones de divgo,seria bueno que añadieras una seccion de ejemplos de juegos en divgo,o meterlos en la mismas seccion de ejemplos.

[SplinterGU]

activen la acceleracion por hardware en los navegadores... (perdon por no leer todo, pero lei lentitud en los navegadores y respondi...)

[oskarg]

Sigo con el motor manic....
incluyo un simple ejemplo donde puedes subir por una rampa ,y saltar a una plataforma movil ...la escalera es como la rampa pero debo de quitar las lineas que he añadido para que actue igual que el juego original....
1.Ahora  que tengo ya el motor completo de manic... lo tengo que hacer flexible para otros juegos 2d,esto me obliga a hacer el motor de otra forma aunque se como hacerlo,en manic deja 2 pixeles de distancia cuando tocas tocho,esta tonteria ha complicado en exceso el codigo y cuando estas cayendo si en frente hay suelo lo pisas,para simular que lo has pisado de "puntillas".Supongo que por eso en el juego  original no aparece varios tochos de altura,como una caja,pues para que salte adecuadamente y encaje te las ves.....aqui funciona,pero si cuando el modulo x es == 0 no colisionara con nada el motor se hubiera simplificado bastante.Vamos que se complico el solito el programador.

2.Las plataformas moviles ,colisiones y la rampa no empleo get_pixel ...lo que hago es predefinir unos valores,si estoy en tal coordenada x e y...subo o bajo. etc..La plataforma movil la tengo que hacer aun mas eficiente,tengo en la tabla predefinido su recorrido,pues bien,lo tengo que hacer dinamico como el suelo que desaparece...y las colisiones con los tiles,que no hay en verdad,pues son valores de tablas lo tengo que hacer todavia de otra forma para que pueda incluir un scroll muy sencillo de manejar...Ahora estoy en esta fase que me da  pereza otra vez reescribir el motor.

3.Cuando lo acabe que aun queda... :P y corrija una par de  cosas raras ....entonces si hago un mini juego con fases.

4.Una vez realizado paso a la fase de hacer el motor con scroll...con un ejemplo a ver cuando lo acabo,pues esta tonteria por ejemplo en gdevelop son unas 20 lineas,acciones y aqui se multiplican facilmente por 100  ;D

[oskarg]

Hola AmakaST,
Estoy mirando cosas de divgo y la funcion de get_point no entiendo como funciona,entiendo su utilidad pero ahora que lo veo,no comprendo como funciona.
  get_point(file1, grafico, point, offset x_point, offset y_point);   
el get_point modifica el x_point y el y_point segun el point...?¿?¿?me lo puedes explicar en cristiano que operacion hace?¿?
o tambien el real point...
Un saludo.