Noticias

Importante: ¡Si quieres publicar tu juego no olvides leer este tema!

* Sponsor

Comunidad Game Maker

Bienvenid@ a la comunidad hispana de Game Maker. Nuestro objetivo es crear videojuegos y dar soporte en castellano de GM. Para mejorar nuestro servicio hemos implantado, como adicion al reglamento general, algunas normas especificas en los subforos más comunes. ¡No olvides informarte antes de participar!.

Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Mensajes - dixon

Páginas: 1 2 3 ... 16
1
Hola saludos cordiales.

;D


Representan el orden de ejecución, es decir todos son ejecutados en cada paso, pero primero  BeginStep  luego step y finalmente EndStep, se emplean solo para ordenar el código segun mi parecer,  aunque pensandolo bien es posible que EndStep se ejecute después del evento Draw y el step antes del draw.

2
General / Juegos abandonados: pelea con bowser
« en: Ayer a las 01:26:00 am »
Nombre: Pelea Con Bowser

Tiempo aproximado que  se emplearía para su desarrollo de principio a fin por una sola persona: 1 mes para que quede calidad.

imagen:



Más detalles:

Este juego si lo cree por completo pero lo borré porque estaba afectando mis estudios, eso fue cuando estaba en la secundaria. Cree dos versiones del mismo una 2D y una 3D bastante llamativa recuerdo que publiqué un video en youtube y a muchos les gustó, en el video coloque el enlace de descarga pero luego el enlace se cayó y solicitaron que lo volviera a subir pero lamentablemente estaba pasando malos momentos en la secundaria y nunca logré subirlo y borré todas las copias, he intentado volverlo a programar pero pierdo la motivación.
El juego era un vicio para mí y mi hermano, consistía en ganar la mayor cantidad de puntos mientras se luchaba contra bowser. El score era increíble y la versión 3D me costó bastante lograrla, tuve que dominar las proyecciones 3D del antiguo game maker 6. Si lo creara denuevo con la misma calidad, de igual modo seria genial.

Interesados en participar en retomar el proyecto contactarme en el Facebook  https://m.facebook.com/reyes.davila.52459

3
General / Re: Juegos abandonados
« en: Enero 27, 2022, 10:22:16 pm »
Nombre: Kostra

Tiempo aproximado que  se emplearía para su desarrollo de principio a fin por una sola persona: 1 mes

imagen:



Más detalles:

Kostra es otro video juego que he abandonado por falta de motivación, la trama del juego era averiguar el paradero de nuestro amigo de la comunidad llamado Kostra, me iba a inventar una historia en donde por alguna causa nuestro administrador Johann y Black_kat tendrían que cumplir la misión de rescatarlo. El juego no fue pensado para molestar ni para hacer burlas sinó para demostrar el poder de la amistad y para verificar la gran influencia que ejercen los juegos cuya temática va dirigida a una comunidad específica y para saber realmente que pasó con kostra. Por alguna causa Black_kat tendría el cabello azul porque fue la primera imagen que se me vino a la cabeza y me pareció bastante genial.

Interesados en participar en el proyecto contactarme en el Facebook  https://m.facebook.com/reyes.davila.52459


4
General / Re: Juegos abandonados
« en: Enero 27, 2022, 08:56:35 pm »
Nombre: Mario 64x64

Tiempo aproximado que  se emplearía para su desarrollo de principio a fin por una sola persona: 2 meses.

imagen:



Más detalles:
Mario 64x64 es otro proyecto que inicie y abandoné, consistía en crear una versión de mario run con una pantalla de 64x64 pixeles la cual es estirada a tamaño normal. Fue pensado para ofrecer un juego gratuito donde el player solo tendría que saltar lo cual es ideal para todo tipo de jugadores inclusive los niños que están aprendiendo a usar el computador.

Interesados en participar en el proyecto contactarme en el Facebook  https://m.facebook.com/reyes.davila.52459

5
General / Juegos abandonados
« en: Enero 27, 2022, 07:16:18 pm »
Hola amigos espero que se encuentren bien en este magnifico dia.




Aquí en este post voy a ir colocando los video juegos que he abandonado.





Nombre: Under the Water.

Tiempo aproximado que  se emplearía para su desarrollo de principio a fin por una sola persona: 2 semanas aproximadamente, trabajando unas 5 horas diarias.

Más detalles:
Under the Water es un proyecto de juego inspirado en la música de Aurora Aksnes titulada , lo he abandonado porque actualmente no puedo alcanzar la calidad gráfica mínima  que me he exigido y además de eso la programación interna que requiere es algo exigente aunque el proyecto puede ser concretado en 2 semanas aproximadamente.

Cuando me propongo a crear un video juego lo hago con el objetivo principal de transmitir sentimientos y en este caso el sentimiento es de suspenso y miedo, realmente estoy seguro que si en algún momento logro concretar el proyecto el video juego resultante hará que algunos espectadores sientan una sensación de misterio que roza lo sobrenatural.

Interesados en participar en el proyecto contactarme en el Facebook  https://m.facebook.com/reyes.davila.52459

6
General / Re: Scripts en desarrollo
« en: Enero 25, 2022, 01:19:30 am »
Hola, saludos espero que esten bien.



Aquí les muestro la primera versión del sistema de comentario para video juegos y páginas webs, no usa base de datos porque se modifica a un archivo json directamente empleando php.

El problema de esta versión es que es vulnerable a sabotaje y un simple bot pudiese hacer que colapse mi servidor de alojamiento.

Todabia no conozco los posibles sistemas de seguridad para evitar sabotaje pero enlistaré algunos:

1.   Solicitud de captcha: para evitar los bots principalmente.
2.   Restriccion de ip: para evitar que un mismo ip haga multiples comentarios en un tiempo determinado.
3.   Sistema de bloqueo de palabras: Integrar el sistema que evita que los comentarios con palabras inadecuadas puedan ser publicados.

Si tienes alguna idea que me pueda ilustrar un poco seria de gran utilidad.

El objetivo es crear un sistema de comentario accesible para todos y fácil de implementar.
Aquí los dejo con la web.

https://dixonysusjuegoseducativos2.000webhostapp.com/practicaWeb/01_sistemaDeComentarios/ver01/index.php

En cuanto a los scripts empleados los tengo por separado pero pronto si Dios quiere lograré integrarlos en uno solo para su fácil implementación.

Los script tienen lenguaje: html, css, javascript y php:

index.php
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comentarios</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Código html-->





<div id="divContenedor">

<div id="divCabecera">
Comentarios públicos
</div>

<div id="divContenedorFormulario">
<input id="inputnombre" type="text" placeholder="Nombre:" maxlength=25>
</br>
<textarea id="idtextarea"name="textarea" placeholder="Tu comentario"></textarea>
</br>
<button id="idbutton" onclick="botonClick()">Enviar</button>
</div>

<div id="contenedorComentarios"></div>
</div>


<!--Código JavaScript-->













<?php
// comprobar si tenemos los parametros en la URL
if (isset($_GET["inputnombre"]) && isset($_GET["idtextarea"])) 
{
$idtextarea $_GET["idtextarea"];
$inputnombre $_GET["inputnombre"];
$ip_add $_SERVER['REMOTE_ADDR'];
$DateAndTime date('m-d-Y h:i:s a'time());

$nombreArchivo="comentarios.json";
if(!file_exists($nombreArchivo))
{
$file fopen($nombreArchivo"w");
fclose($file);
}

$data file_get_contents($nombreArchivo);
$products json_decode($datatrue);

$arrayCantidad count($products);
$arrayNuevo = array("ip"=>$ip_add,"fecha"=>$DateAndTime,"nombre"=>$inputnombre,"comentario"=>$idtextarea);

if($arrayCantidad==0)
{
$products=$arrayNuevo;
$stringJson json_encode($products);
$stringJson "[".$stringJson."]";
}
else
{
 
array_push($products,$arrayNuevo);
$stringJson json_encode($products);
}


$nombreArchivo="comentarios.json";
$file fopen($nombreArchivo"w");
fwrite($file,$stringJson);
fclose($file);
}

?>














<?php 
//Leer archivo Json
$nombreArchivo="comentarios.json";
if(!
file_exists($nombreArchivo))
{
$file fopen($nombreArchivo"w");
fclose($file);
}
$data file_get_contents($nombreArchivo);
$products json_decode($datatrue);
$stringJson json_encode($products);
?>



<script>

//Pasar Json a objeto
var textoJson =`<?php echo $data;?>`;
var comentarios = JSON.parse(textoJson);
</script>


<script src="main.js"></script>


<script>

function botonClick(){
var inputnombre = document.getElementById("inputnombre").value;

var idtextarea = document.getElementById("idtextarea").value;
var saltox = String.fromCodePoint(10);
idtextarea = idtextarea.replace(new RegExp(saltox,"g"), '<br/>');
idtextarea = idtextarea.replace(/"/g,"''");

var texto = JSON.stringify(comentarios);
window.location.href = window.location.href + `?inputnombre=${inputnombre}&&idtextarea=${idtextarea}`;
}

</script>


</body>
</html>



main.js
Código: [Seleccionar]
var contenedorComentarios = document.getElementById("contenedorComentarios");

var comentariosCantidad = Object.keys(comentarios).length;


for(var i=0; i<comentariosCantidad; i+=1)
{

var numero_ASD = ((comentariosCantidad-1)-i);
var propiedadString_ASD = ((comentariosCantidad-1)-i);
var propiedad_ASD = comentarios[propiedadString_ASD];
var nombre_ASD = propiedad_ASD.nombre;
var comentario_ASD = propiedad_ASD.comentario;
var fecha_ASD = propiedad_ASD.fecha;

contenedorComentarios.innerHTML += `
<div class="divCajaComentario">

<div class="divCabezaComentario">
<div class="divComentarioNombre">
${nombre_ASD}
</div>
<div class="divComentarioFecha">
${fecha_ASD}
</div>
</div>

<div class="divContenidoComentario">
${comentario_ASD}
</div>
</div>`;
}


styles.css
Código: [Seleccionar]
body{
background: black;
color: white;
}

#divVariables{
position: absolute;
bottom: 0px;
left: 0px;
background: red;
color: black;
width: 128px;
}


#divContenedor{
padding-bottom: 10px;
width: 90vw;
height: auto;
background: #192126;
margin: 0px auto;
border-radius: 5px;
}

#divCabecera{
padding: 5px;
font-size: 20px;
background: #151828;
text-align: center;
border-radius: 5px;
}

#divContenedorFormulario{
padding: 5px;
text-align: left;
height:  40%;
margin: 0px auto;
margin-top: 20px;
background: #293654;
border-radius: 5px;
width: 75%;
}

#inputnombre{
margin: 2px;
padding: 5px;
background: #384872;
border: 1px solid #293654;
border-radius: 5px;
color: white;
}

#idtextarea{
margin: 2px;
padding: 5px;
background: #384872;
border: 1px solid #293654;
border-radius: 5px;
color: white;
width: 95%;
height:  auto;
resize:none;
}

#idbutton{
    background: #347974;
    border: none;
    border-radius: 5px;
    margin: 2px;
    color: white;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

#idbutton:hover{
background: #399969;
}



.divCajaComentario{
margin: 0px auto;
margin-top: 20px;
width: 75%;
height: auto;
border-radius: 5px;
background: #384872;
padding: 5px;
}

.divCabezaComentario{
margin-bottom: 1px;
padding: 5px;
width: calc(100%-20px);
height: 20%;
background: #293654;
border-radius: 5px;

display: flex;
flex-direction: row;
}

.divComentarioNombre{
width: 60%;
}

.divComentarioFecha{
width: 40%;
display: inline-block;
text-align: right;
}

.divContenidoComentario{
width: calc(100%-20px);
height: 60%;
padding: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 5px;
}

@media (orientation: portrait) {
.divCajaComentario{
width: 90%;
}

#divContenedorFormulario{
width: 90%;
}


}



Visión a futuro:
Luego de concretar el sistema de comentarios para juegos html5 y páginas web tengo pensado crear un script para game maker que me permita editar y visualizar los comentarios dentro del juego y que pueda funcionar en todas las plataformas y módulos.

El objetivo principal de este proyecto es permitir que los jugadores de nuestros juegos puedan darnos su opinión directamente en el juego sin restricciones de login y de ningún tipo.


7
General / Mi galeria de imagenes
« en: Enero 25, 2022, 12:15:19 am »
Hola saludos, espero que estén muy bien.



Hoy solo quiero mostrarles una pequeña galería de imágenes las cuales he creado copiando, porque realmente no se dibujar pero quizás algún día tenga esa habilidad.


Citar





























8
Preguntas y respuestas / Re: Empezar de Cero
« en: Enero 21, 2022, 09:09:27 pm »

9
General / Re: Scripts en desarrollo
« en: Enero 15, 2022, 02:29:13 am »

10
Juegos completos / Re: La chica del campamento
« en: Enero 13, 2022, 04:28:32 pm »
Hola black_cat, saludos me alegra que estés de nuevo por aquí.




Disculpe que no le di una respuesta inmediata.

Game maker 4.3c (2003) es la última versión gratuita, mediante esta se pueden crear juegos de alta calidad e internacionalmente reconocidos tales como:




Game maker 4.3c (2003) solo exporta a .exe para Windows lamentablemente esto significa que los juegs creados con esta versión solo se podrán jugar en pc.

El proceso que uso para transformar un juego de game maker 4 a html5 es el siguiente:
1.   Creo mi juego en game maker 4.3c.
2.   Convierto el .gmd de GM4 a gmd de GM5. Mediante una herramienta de conversión llamada convert (Convertidor Game Maker 4 a 5 (Convertidor GM 4.x a GM 5.0))
3.   Luego abro game maker html5 o studio e importo el gmd como una versión vieja.
4.   Luego exporto a html5.
5.   Y finalmente le agrego los botones táctiles con el script javascript. Joystick táctiles para juegos html5

Ahora bien al parecer ya existe tecnología que nos permite ejecutar un .exe directamente dentro de un navegador web, esto quiere decir que nuestros antiguos juegos pueden revivir en plataformas como android y ser ejecutados directamente en navegadores.

Las paginas claves para lograr el objetivo son:
https://esgeeks.com/ejecutar-aplicaciones-en-navegador-web/
https://appetize.io/upload
https://www.cameyo.com/

También hay que tomar en cuenta otras cosas como:
1.   Un exe también puede ser transformado en un apk.
https://es.jf-oeiras.pt/how-convert-exe-apk

Es un abanico de posibildades y es necesario abarcar ese tema ya que mediante esto se pudiesen lograr muchas cosas más, las cuales aún no imaginamos.

11
Juegos completos / La chica del campamento
« en: Enero 11, 2022, 09:50:46 pm »

12
General / Re: Joystick táctiles para juegos html5 en proceso.
« en: Enero 05, 2022, 11:49:08 pm »
Hola, saludos, espero que esten muy bien.


Bueno, hoy les traigo una nueva actualización del script para los botones táctiles en juegos html5, ahora los botones tendrán una mejor imagen  “se ven geniales” XD, tambien se le ha corregido un error pero lamentablemente aun presenta otro error grave donde se quedan pegadas las teclas.

El nuevo código es este:

Código: [Seleccionar]

<div id="contenedorFlecha">
<div class="botones" id="botonLeft" onmousedown='funcionBoton(37,"pulsar")' onmouseup='funcionBoton(37,"soltar")' onmouseleave='funcionBoton(37,"soltar")'></div>
<div class="botones" id="botonUp" onmousedown='funcionBoton(38,"pulsar")' onmouseup='funcionBoton(38,"soltar")' onmouseleave='funcionBoton(38,"soltar")'></div>
<div class="botones" id="botonRight" onmousedown='funcionBoton(39,"pulsar")' onmouseup='funcionBoton(39,"soltar")' onmouseleave='funcionBoton(39,"soltar")'></div>
<div class="botones" id="botonDown" onmousedown='funcionBoton(40,"pulsar")' onmouseup='funcionBoton(40,"soltar")' onmouseleave='funcionBoton(40,"soltar")'></div>
</div>
<div id="contenedorBotones">
<div class="botones" id="botonA" onmousedown='funcionBoton(65,"pulsar")' onmouseup='funcionBoton(65,"soltar")' onmouseleave='funcionBoton(65,"soltar")'></div>
<div class="botones" id="botonW" onmousedown='funcionBoton(87,"pulsar")' onmouseup='funcionBoton(87,"soltar")' onmouseleave='funcionBoton(87,"soltar")'></div>
<div class="botones" id="botonS" onmousedown='funcionBoton(83,"pulsar")' onmouseup='funcionBoton(83,"soltar")' onmouseleave='funcionBoton(83,"soltar")'></div>
<div class="botones" id="botonD" onmousedown='funcionBoton(68,"pulsar")' onmouseup='funcionBoton(68,"soltar")' onmouseleave='funcionBoton(68,"soltar")'></div>
</div>

<div id="botonEnter" onmousedown='funcionBoton(13,"pulsar")' onmouseup='funcionBoton(13,"soltar")' onmouseleave='funcionBoton(13,"soltar")'></div>
<div id="botonScreen" onmousedown="toggleFullScreen()"></div>
<div id="botonReiniciar" onmousedown='funcionBoton(113,"pulsar")' onmouseup='funcionBoton(113,"soltar")' onmouseleave='funcionBoton(113,"soltar")'></div>


<style>
body{
text-align: center;
background: black;
}

#botonEnter,#botonScreen, #botonReiniciar{
background: brown;
background: transparent;
border: 1px solid red;
color: red;
width: 30px;
height:24px;
position: absolute;
left: 5vw;
}

#botonScreen{
top: 10px;
}

#botonReiniciar{
top: 55px;
}

#botonEnter{
top: 100px;
width: 60px;
}

canvas{
background: transparent;
border: 1px solid white;

width: 40vw;
max-height: 90vh;
position: absolute;
top: 5vh;
left: 30vw;
}

#contenedorFlecha{
background: navy;
background: transparent;
width: 20vw;
height: 35vh;
position: absolute;
bottom: 5vh;
left: 4vw;
}

#contenedorBotones{
background: navy;
background: transparent;
width: 20vw;
height: 35vh;
position: absolute;
bottom: 5vh;
right: 4vw;
}

.botones{
width: 30%;
height: 30%;
position: absolute;
}


#botonUp, #botonW{
background: brown;
background: transparent;
border: 1px solid white;
top: 0px;
left: 35%;
}

#botonLeft, #botonA{
background: green;
background: transparent;
border: 1px solid white;
bottom: 35%;
left: 0%;
}

#botonRight, #botonD{
background: purple;
background: transparent;
border: 1px solid white;
bottom: 35%;
right: 0px;
}

#botonDown, #botonS{
background: blue;
background: transparent;
border: 1px solid white;
bottom: 0%;
left: 35%;
}

@media (orientation: portrait) {

#botonEnter,#botonScreen, #botonReiniciar{
left: 40vw;
}

#botonScreen{
top: 70vh;
left: 5vw;
}

#botonReiniciar{
top: 70vh;
right: 5vw;
left: auto;
}

#botonEnter{
top: 70vh;
left: calc(50vw-30px);
}


canvas{
width: 90vw;
top: 2vh;
left: 5vw;
}

#contenedorBotones{
width: 38vw;
height: 20vh;
}

#contenedorFlecha{
width: 38vw;
height: 20vh;
}

}



#botonRight{
background-image: url("imagenes/botonRight_up.png");
}
#botonRight:active{
background-image: url("imagenes/botonRight_down.png");
}
#botonUp{
background-image: url("imagenes/botonUp_up.png");
}
#botonUp:active{
background-image: url("imagenes/botonUp_down.png");
}
#botonLeft{
background-image: url("imagenes/botonLeft_up.png");
}
#botonLeft:active{
background-image: url("imagenes/botonLeft_down.png");
}
#botonDown{
background-image: url("imagenes/botonDown_up.png");
}
#botonDown:active{
background-image: url("imagenes/botonDown_down.png");
}

#botonA{
background-image: url("imagenes/botonA_up.png");
}
#botonA:active{
background-image: url("imagenes/botonA_down.png");
}
#botonW{
background-image: url("imagenes/botonW_up.png");
}
#botonW:active{
background-image: url("imagenes/botonW_down.png");
}
#botonD{
background-image: url("imagenes/botonD_up.png");
}
#botonD:active{
background-image: url("imagenes/botonD_down.png");
}
#botonS{
background-image: url("imagenes/botonS_up.png");
}
#botonS:active{
background-image: url("imagenes/botonS_down.png");
}



#botonEnter{
background-image: url("imagenes/botonEnter_up.png");
}
#botonEnter:active{
background-image: url("imagenes/botonEnter_down.png");
}

#botonReiniciar{
background-image: url("imagenes/botonReiniciar_up.png");
}
#botonReiniciar:active{
background-image: url("imagenes/botonReiniciar_down.png");
}

#botonScreen{
background-image: url("imagenes/botonScreen_up.png");
}
#botonScreen:active{
background-image: url("imagenes/botonScreen_down.png");
}



#botonRight, #botonLeft, #botonUp, #botonDown, #botonA, #botonW, #botonD, #botonS, #botonEnter, #botonReiniciar, #botonScreen{
border: 0px;
background-size: 100% 100%;
}


</style>



<!-- Código JavaScript-->

<script>

/////////////////Funcion de botones
////////////////SIMULANDO TECLADO
////////////////////////////////////////////////////////////////////////////////
function funcionBoton(codigoBoton, accionBoton){
    //alert(codigoBoton);
var eventObj_izquierda = document.createEventObject ?
    document.createEventObject() : document.createEvent("Events");
eventObj_izquierda.keyCode = codigoBoton;
eventObj_izquierda.which = codigoBoton;
eventObj_izquierda.key=' ';
eventObj_izquierda.code='Space';
if(accionBoton == "pulsar")
{
if(eventObj_izquierda.initEvent){eventObj_izquierda.initEvent("keydown", true, true)}
document.dispatchEvent ? document.dispatchEvent(eventObj_izquierda) : document.fireEvent("onkeydown", eventObj_izquierda);
}
if(accionBoton == "soltar")
{
if(eventObj_izquierda.initEvent){eventObj_izquierda.initEvent("keyup", true, true)}
document.dispatchEvent ? document.dispatchEvent(eventObj_izquierda) : document.fireEvent("onkeyup", eventObj_izquierda);
}
}
//////////////////////////////////////////////////////////////////////////////////


///////////////FUNCION PANTALLA COMPLETA
////////////////////////////////////////////////////////////////////////////////
function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||   
    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) {
    document.documentElement.requestFullScreen();
    } else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}}}
/////////////////////////////////////////////////////////////////////////////////


/////////////Funcion para pantallas tactiles
//////////////////////////////////////////////////////////////////////////////////
//Detectando si existe pantalla tactil.
var touchDevice = ('ontouchstart' in document.documentElement);
var botonesId = ["botonLeft","botonUp","botonRight","botonDown","botonA","botonW","botonS","botonD","reiniciar","botonEnter"];
var botonesCodigos = [37,38,39,40,65,87,83,68,113,13];
    var botonId = "";
    var botonCodigo = 0;
    var numeroArray =[];
   
if(touchDevice == true)
{

//Analizando todos los botones contenidos en el array
//Recorriendo el array que contiene los nombres de los botones.

        numeroX=0;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[0],"pulsar");funcionBoton(botonesCodigos[2],"soltar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[0],"soltar");}, false);


        numeroX=1;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[1],"pulsar");funcionBoton(botonesCodigos[3],"soltar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[1],"soltar");}, false);

        numeroX=2;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[2],"pulsar");funcionBoton(botonesCodigos[0],"soltar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[2],"soltar");}, false);

    numeroX=3;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[3],"pulsar");funcionBoton(botonesCodigos[1],"soltar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[3],"soltar");}, false);

    numeroX=4;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[4],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[4],"soltar");}, false);

    numeroX=5;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[5],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[5],"soltar");}, false);


    numeroX=6;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[6],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[6],"soltar");}, false);

    numeroX=7;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[7],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[7],"soltar");}, false);


    numeroX=8;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[8],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[8],"soltar");}, false);

    numeroX=9;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[9],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[9],"soltar");}, false);
}
///////////////////////////////////////////////////////////////////////////////////////



</script>

El proceso para integrar los botones a tu juego “HTML5” es el siguiente:
1.   Crea tu juego html5 empleando las teclas del teclado:
Vk_left (código ascii 37);
Vk_up (código ascii 38);
Vk_rigth (código ascii 39);
 Vk_down (código ascii 40);
A (código ascii 65);
W (código ascii 87);
D (código ascii 68);
S (código ascii 83);
Enter (código ascii 13);
F12: para reiniciar el juego. (código ascii 113);

2.   Exporta tu juego html5.
3.   Copia el código para botones táctiles de este post.
4.   Abre con el block de notas el index.html  de tu juego.
5.   Pega el código al final del archivo justo por encima de la etiqueta de cierre </body> como se indica aquí abajo:



6. Descarga el paquete de imágenes de los botones “aquí”;
7.Crea una carpeta llamada imágenes la cual debe encontrarse en la misma carpeta de tu juego como se indica en la imagen:


8. En esa carpeta deberás pegar las imágenes que descargastes para que te quede algo como esto:


9. Listo eso es todo.

Si quieres ver cómo quedó el diseño puedes  acceder al juego “30pepas”.



Listo eso es todo, seguimos programando, nos vemos luego.



13
General / Re: Joystick táctiles para juegos html5 en proceso.
« en: Enero 04, 2022, 08:49:48 am »
Hola, saludos a todos espero que estén bien.


Aquí les traigo una nueva actualización del script que dota a los juegos html5 de botones táctiles permitiendo que los juegos puedan ser jugados desde cualquier plataforma. Ahora la implementación es muy fácil solo tendrán que copiar y pegar.

El código es el siguiente:
Código: [Seleccionar]

<div id="contenedorFlecha">
<div class="botones" id="botonLeft" onmousedown='funcionBoton(37,"pulsar")' onmouseup='funcionBoton(37,"soltar")' onmouseleave='funcionBoton(37,"soltar")'><</div>
<div class="botones" id="botonUp" onmousedown='funcionBoton(38,"pulsar")' onmouseup='funcionBoton(38,"soltar")' onmouseleave='funcionBoton(38,"soltar")'>^</div>
<div class="botones" id="botonRight" onmousedown='funcionBoton(39,"pulsar")' onmouseup='funcionBoton(39,"soltar")' onmouseleave='funcionBoton(39,"soltar")'>></div>
<div class="botones" id="botonDown" onmousedown='funcionBoton(40,"pulsar")' onmouseup='funcionBoton(40,"soltar")' onmouseleave='funcionBoton(40,"soltar")'>\/</div>
</div>
<div id="contenedorBotones">
<div class="botones" id="botonA" onmousedown='funcionBoton(65,"pulsar")' onmouseup='funcionBoton(65,"soltar")' onmouseleave='funcionBoton(65,"soltar")'>A</div>
<div class="botones" id="botonW" onmousedown='funcionBoton(87,"pulsar")' onmouseup='funcionBoton(87,"soltar")' onmouseleave='funcionBoton(87,"soltar")'>W</div>
<div class="botones" id="botonS" onmousedown='funcionBoton(83,"pulsar")' onmouseup='funcionBoton(83,"soltar")' onmouseleave='funcionBoton(83,"soltar")'>S</div>
<div class="botones" id="botonD" onmousedown='funcionBoton(68,"pulsar")' onmouseup='funcionBoton(68,"soltar")' onmouseleave='funcionBoton(68,"soltar")'>D</div>
</div>


<div id="botonEnter" onmousedown='funcionBoton(13,"pulsar")' onmouseup='funcionBoton(13,"soltar")' onmouseleave='funcionBoton(13,"soltar")'>Enter</div>
<div id="screen" onmousedown="toggleFullScreen()">Screen</div>
<div id="reiniciar" onmousedown='funcionBoton(113,"pulsar")' onmouseup='funcionBoton(113,"soltar")' onmouseleave='funcionBoton(113,"soltar")'>Restart</div>


<style>
body{
text-align: center;
background: black;
}

#botonEnter,#screen, #reiniciar{
background: brown;
background: transparent;
border: 1px solid red;
color: red;
width: 60px;
height:24px;
position: absolute;
left: 5vw;
}

#screen{
top: 10px;
}

#reiniciar{
top: 55px;
}

#botonEnter{
top: 100px;
}

canvas{
background: transparent;
border: 1px solid white;

width: 40vw;
max-height: 90vh;
position: absolute;
top: 5vh;
left: 30vw;
}

#contenedorFlecha{
background: navy;
background: transparent;
width: 20vw;
height: 35vh;
position: absolute;
bottom: 5vh;
left: 4vw;
}

#contenedorBotones{
background: navy;
background: transparent;
width: 20vw;
height: 35vh;
position: absolute;
bottom: 5vh;
right: 4vw;
}

.botones{
width: 30%;
height: 30%;
position: absolute;
}

#botonUp, #botonW{
background: brown;
background: transparent;
border: 1px solid white;
top: 0px;
left: 35%;
}

#botonLeft, #botonA{
background: green;
background: transparent;
border: 1px solid white;
bottom: 35%;
left: 0%;
}

#botonRight, #botonD{
background: purple;
background: transparent;
border: 1px solid white;
bottom: 35%;
right: 0px;
}

#botonDown, #botonS{
background: blue;
background: transparent;
border: 1px solid white;
bottom: 0%;
left: 35%;
}

@media (orientation: portrait) {

#botonEnter,#screen, #reiniciar{
left: 40vw;
}

#screen{
top: 70vh;
left: 5vw;
}

#reiniciar{
top: 70vh;
right: 5vw;
left: auto;
}

#botonEnter{
top: 70vh;
left: calc(50vw-30px);
}


canvas{
width: 90vw;
top: 2vh;
left: 5vw;
}

#contenedorBotones{
width: 38vw;
height: 20vh;
}

#contenedorFlecha{
width: 38vw;
height: 20vh;
}

}


</style>



<!-- Código JavaScript-->

<script>

/////////////////Funcion de botones
////////////////SIMULANDO TECLADO
////////////////////////////////////////////////////////////////////////////////
function funcionBoton(codigoBoton, accionBoton){
    //alert(codigoBoton);
var eventObj_izquierda = document.createEventObject ?
    document.createEventObject() : document.createEvent("Events");
eventObj_izquierda.keyCode = codigoBoton;
eventObj_izquierda.which = codigoBoton;
eventObj_izquierda.key=' ';
eventObj_izquierda.code='Space';
if(accionBoton == "pulsar")
{
if(eventObj_izquierda.initEvent){eventObj_izquierda.initEvent("keydown", true, true)}
document.dispatchEvent ? document.dispatchEvent(eventObj_izquierda) : document.fireEvent("onkeydown", eventObj_izquierda);
}
if(accionBoton == "soltar")
{
if(eventObj_izquierda.initEvent){eventObj_izquierda.initEvent("keyup", true, true)}
document.dispatchEvent ? document.dispatchEvent(eventObj_izquierda) : document.fireEvent("onkeyup", eventObj_izquierda);
}
}
//////////////////////////////////////////////////////////////////////////////////


///////////////FUNCION PANTALLA COMPLETA
////////////////////////////////////////////////////////////////////////////////
function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||   
    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) { 
    document.documentElement.requestFullScreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
document.documentElement.mozRequestFullScreen(); 
} else if (document.documentElement.webkitRequestFullScreen) { 
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 

} else { 
if (document.cancelFullScreen) { 
document.cancelFullScreen(); 
} else if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} else if (document.webkitCancelFullScreen) { 
document.webkitCancelFullScreen(); 
}}}
/////////////////////////////////////////////////////////////////////////////////


/////////////Funcion para pantallas tactiles
//////////////////////////////////////////////////////////////////////////////////
//Detectando si existe pantalla tactil.
var touchDevice = ('ontouchstart' in document.documentElement);
var botonesId = ["botonLeft","botonUp","botonRight","botonDown","botonA","botonW","botonS","botonD","reiniciar","botonEnter"];
var botonesCodigos = [37,38,39,40,65,87,83,68,113,13];
    var botonId = "";
    var botonCodigo = 0;
    var numeroArray =[];
   
if(touchDevice == true)
{

//Analizando todos los botones contenidos en el array
//Recorriendo el array que contiene los nombres de los botones.

        numeroX=0;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[0],"pulsar");funcionBoton(botonesCodigos[2],"soltar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[0],"soltar");}, false);


        numeroX=1;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[1],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[1],"soltar");}, false);

        numeroX=2;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[2],"pulsar");funcionBoton(botonesCodigos[0],"soltar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[2],"soltar");}, false);

    numeroX=3;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[3],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[3],"soltar");}, false);

    numeroX=4;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[4],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[4],"soltar");}, false);

    numeroX=5;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[5],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[5],"soltar");}, false);


    numeroX=6;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[6],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[6],"soltar");}, false);

    numeroX=7;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[7],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[7],"soltar");}, false);


    numeroX=8;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[8],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[8],"soltar");}, false);

    numeroX=9;
botonId = botonesId[numeroX];
var elementoTouch= document.getElementById(botonId);
elementoTouch.addEventListener('touchstart', function(event){
//Comprobamos si hay varios eventos del mismo tipo
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// con esto solo se procesa UN evento touch
funcionBoton(botonesCodigos[9],"pulsar");}}, false);
elementoTouch.addEventListener('touchend', function(event){
funcionBoton(botonesCodigos[9],"soltar");}, false);
}
///////////////////////////////////////////////////////////////////////////////////////



</script>



Este es un código que combina html, css y javascript y para implementarlo en sus juegos html5 tendrán que seguir estos sencillos pasos:

1.   Crea tu juego html5 empleando las siguientes teclas del teclado:
Vk_left (código ascii 37);
Vk_up (código ascii 38);
Vk_rigth (código ascii 39);
 Vk_down (código ascii 40);
A (código ascii 65);
W (código ascii 87);
D (código ascii 68);
S (código ascii 83);
Enter (código ascii 13);
F12: para reiniciar el juego. (código ascii 113);

2.   Exporta tu juego html5.
3.   Copia el código para botones táctiles de este post.
4.   Abre con el block de notas el index.html  de tu juego.
5.   Pega el código al final del archivo justo por encima de la etiqueta de cierre </body> como se indica aquí abajo:

6.   Listo.


Dudas y preguntas aquí.
Pueden ver este código funcionando  en el juego “30pepas” publicado recientemente.

Tengo planeado mejorar el código y darle una mejor apariencia a los botones, ya le he encontrado varios errores pero si Dios quiere pronto serán corregidos.

14
Juegos completos / 30pepas 😅
« en: Enero 04, 2022, 08:16:10 am »

15
Preguntas y respuestas / Re: Capturar texto dibujado en un objeto
« en: Enero 02, 2022, 08:40:59 pm »
Hola, saludos.



Quizás hiciste algo como esto:
Código: [Seleccionar]
draw_text(x,y,”Soy el objeto x”);

Lo adecuado es introducir el texto dentro de una variable y usar esa variable como el siguiente código:
Código: [Seleccionar]
variableTexto=”soy el objeto x”;
draw_text(x,y,variableTexto);

En el evento creación (CREATE) también deberás colocar:
Código: [Seleccionar]
variableTexto=”soy el objeto x”;
Ahora mencionas a un objeto que capturará el texto que contenga la instancia luego de colisionar con ella.

Para resolver eso debemos identificar a los objetos que intervienen en el proceso:

objetoTexto: objeto que contiene el texto, el cual tiene varias instancias.
objetoCapturador: objeto que capturará el texto de alguna instancia del objetoTexto.
Tambien debemos identificar las variables que intervendrán en el proceso:
variableTexto: es la variable del objetoTexto que contiene el texto del objeto la cual varía en cada instancia.
variableCaptura: es la variable del objetoCapturador la cual almacenará el texto que contenga la instancia con la cual colisione.
Entonces el proceso es el siguiente:
1.   El objetoCapturador colisiona con una instancia del objetoTexto.
2.   El objetoCapturador identifica a la instancia.
3.   El objetoCapturador toma el texto almacenado en la variableTexto del objetoTexto.
4.   El objetoCapturador almacena el texto capturado en su propia variableCaptura.

Códigos necesarios para el objetoCapturador:
   “OBJETOCAPTURADOR.”
1.   El objetoCapturador colisiona con una instancia del objetoTexto.
Supongo que estás usando un evento de colision o quizás estas usando place_empty o place_free o place_meeting, u otra técnica para interpretar una colision.

2.   El objetoCapturador identifica a la instancia:
En el evento de colisión deberás colocar:
Código: [Seleccionar]
nnn=instance_nearest(x,y,objectTexto);
variableCaptura = nnn.variableTexto;

   Listo, el objeto capturador tiene en su variableCaptura el valor de la variableTexto de la instancia con la cual ha colisionado.

¿Cómo funciona?
1.   La función instance nearest devuelve o retorna el id o identificador único de la instancia más cercana al punto indicado, en este cado los puntos son x,y los cuales hacen referencia a la posición del objetoCapturador.
2.   ¿Cómo es eso que devuelve? , Respuesta: Eso quiere decir que nos dará el nombre único de la instancia.
3.   ¿Qué es el nombre único? , Respuesta: Es el id, o el identificador único que tiene cada instancia, es su nombre.
4.   ¿Para qué quiero el identificador único? , Respuesta: Con el identificador único podemos acceder a cualquier variable interna de la instancia.
5.   ¿Cómo obtenemos una variable interna de la instancia? ,Respuesta:
a.   Primero almacenamos su identificador único en una variable, en este caso la llamaremos nnn.
Código: [Seleccionar]
nnn=instance_nearest(x,y,objetoTexto);
Esto quiere decir que ahora la variable nnn contiene el nombre único de la intancia.

b.   Luego le colocamos un punto seguido de la variable para acceder a cualquier otra variable interna de la instancia.
Código: [Seleccionar]
nnn.x
nnn.y
nnn.sprite_index
nnn.speed
nnn.hspeed
nnn.image_index
c.   Luego almacenamos en una variable el valor de la variable a obtener:
Código: [Seleccionar]
variableCapturadora = nnn.variableTexto;

Páginas: 1 2 3 ... 16