Noticias

¡Ayuda a la Comunidad GM, haz una donación!

* 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!.

Autor Tema: Historias  (Leído 1750 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado dixon

en: Noviembre 22, 2021, 03:17:23 am
« Última modificación: Diciembre 02, 2021, 01:58:50 am por dixon »

Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.
 


No Tienes Permisos Para Dar Puntos
point 0 Puntos

Este tema no recibió puntos.


Desconectado dixon

Respuesta #1 en: Diciembre 02, 2021, 02:00:14 am
« Última modificación: Diciembre 02, 2021, 02:25:46 am por dixon »

Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.
 


Desconectado dixon

Respuesta #2 en: Marzo 20, 2022, 05:00:18 am
Hola gusto en saludarlos.


No es un juego solo es una historia corta sin game play en donde contaré un poco sobre mí  y los video juegos.




Más detalles:
El sistema en donde se presenta la historia fue creado con lo básico de Html, css y javascript. El código del index html es el siguiente:

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Crear Video Juegos</title>
</head>
<body onload="funcionPaginaCargada();">
<!..Código html..>
<h2 id="titulo"></h2>
<img id="imagen" src="imagenes/imagen00.jpg">
<p id="texto"></p>

<!..Código Css..>
<style>
body{
background: black;
color: white;
text-align: center;
margin: 2vw;
}

h2, img, p{
width: 40vw;
max-width: 80vh;
margin: 0px auto;
padding: 5px;
}

p{
font-size: 21px;
}

@media (orientation: portrait) {
h2, img, p{
width: 90vw;
}}

</style>

<!..Código JavaScript..>
<script src="textos.js"></script>


<script>
var diapositivas = textos.diapositivas;
var diapositivaActual = 0;
var titulo = document.getElementById("titulo");
titulo.innerHTML="Cargando...";
var texto = document.getElementById("texto");


var imagen=document.getElementById("imagen");
imagen.addEventListener("click", function() {
  funcionBoton();
});

//Precarga de imagenes
var img = [];
for(var i=0; i<=diapositivas; i+=1)
{
var numero = i;
var numeroString = numero+"";
if(numero<10){numeroString="0"+numeroString}
var urlString="imagenes/imagen"+numeroString+".jpg";
img[i] = new Image();
img[i].src = urlString;
}


//Página cargada
var paginaCargada = 0;
function funcionPaginaCargada(){
paginaCargada = 1;
titulo.innerHTML=textos.titulo;
texto.innerHTML=textos["texto00"];

}

function funcionBoton(){
if(paginaCargada==1)
{
diapositivaActual+=1;
if(diapositivaActual>diapositivas){diapositivaActual=0}
var numero = diapositivaActual;
var numeroString = numero+"";
if(numero<10){numeroString="0"+numeroString}
texto.innerHTML=textos["texto"+numeroString];
imagen.src=img[diapositivaActual].src;
}
}

</script>

</body>
</html>

Mi objetivo principal es comprender un poco sobre la presentación de contenido html5.  Estas son algunas características del sistema:
1.   Para facilitar la accesibilidad reduje el proyecto final a menos de 512Kb.
2.   La mayoría de las imágenes tiene resolución de 128x128.
3.   Puede ser modificado fácilmente para contar otra historia.

Editable html5:
https://drive.google.com/file/d/1FLFXs2xaRIuTEbTZlQcwCGgv9_OaTo79/view?usp=sharing

Para modificar el contenido y contar tu propia historia deberás hacer lo siguiente:
1.   Las imágenes que quieras mostrar deberán ser llamadas imagen00.jpg, imagen01.jpg. y se mostrarán una después de la otra en el orden correcto. Son imágenes JPG, por lo tanto no emplear PNG ni mucho menos BMP.
2.   Para agregar los textos deberás modificar el archivo textos.js.
3.   El archivo textos.js guarda un objeto javascript donde tendrás que modificar sus propiedades fácilmente para adaptarla a tu historia.

Las propiedades son las siguientes:
titulo: "Crear video juegos",
diapositivas: 30,
texto00: "Click en la imagen",

En título deberás colocar el título de tu juego.
En diapositivas deberás colocar la cantidad de imágenes de tu juego.
En texto00 colocar el texto que aparecerá debajo de la imagen.

Las imágenes y los textos van juntos por eso todos terminan en 00, 01, 02.
Recomendaciones:
Para acelerar la carga del sistema y evitar que los usuarios esperen mucho es recomendable emplear imágenes pequeñas y preferiblemente opacas las cuales no deben pesar más de 20Kb.
« Última modificación: Marzo 20, 2022, 02:22:41 pm por dixon »

Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.
 


Desconectado dixon

Respuesta #3 en: Marzo 20, 2022, 05:00:21 pm
Hola, ¡saludos camaradas!.

No es un juego por lo tanto no tiene game play, solo es un contenido muy corto sobre la carga de imágenes.



Más información:

El archivo index.html empleado contiene el siguiente código:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Crear Video Juegos</title>
</head>
<body onload="funcionPaginaCargada();">
<!..Código html..>
<h2 id="titulo"></h2>
<img id="imagen" src="imagenes/imagen00.jpg">
<p id="texto"></p>

<!..Código Css..>
<style>
body{
background: black;
color: white;
text-align: center;
margin: 2vw;
}

h2, img, p{
width: 40vw;
max-width: 80vh;
margin: 0px auto;
padding: 5px;
}

p{
font-size: 21px;
}

@media (orientation: portrait) {
h2, img, p{
width: 90vw;
}}

</style>

<!..Código JavaScript..>
<script src="textos.js"></script>


<script>

var diapositivas = textos.diapositivas;
var diapositivaActual = 0;
var titulo = document.getElementById("titulo");
titulo.innerHTML="Cargando...";
var texto = document.getElementById("texto");



var imagen=document.getElementById("imagen");
imagen.addEventListener("click", function() {
  funcionBoton();
});



//Precarga de imagenes
var img = [];
for(var i=0; i<=diapositivas; i+=1)
{
var numero = i;
var numeroString = numero+"";
if(numero<10){numeroString="0"+numeroString}
var urlString="imagenes/imagen"+numeroString+".jpg";
img[i] = new Image();
img[i].src = urlString;
}


//Página cargada
var paginaCargada = 0;
function funcionPaginaCargada(){
paginaCargada = 1;
titulo.innerHTML=textos.titulo;
texto.innerHTML=textos["texto00"];

}


function funcionBoton(){
if(paginaCargada==1)
{
diapositivaActual+=1;
if(diapositivaActual>diapositivas){diapositivaActual=0}
var numero = diapositivaActual;
var numeroString = numero+"";
if(numero<10){numeroString="0"+numeroString}
texto.innerHTML=textos["texto"+numeroString];
imagen.src=img[diapositivaActual].src;
}
}

</script>

</body>
</html>

El objetivo del proyecto es optimizar la presentación de contenidos. Esto pudiese ser aplicado a la hora de desarrollar juegos html5.
Aquí dejo el editable para que puedas modificarlo y crear tu propia historia.
https://drive.google.com/file/d/1TCYrV-_WbclsEdQqm7jyfEwQ7f7GB0JG/view?usp=sharing

Para publicarlo como página web solo tienes que subir la carpeta de tu proyecto a google drive y colocarlo dentro de una carpeta publica, luego tendrás que abrir la web drv.tw para obtener el enlace a tu proyecto web. Más información aquí: https://tecnolikeplus.com/tutoriales/como-obtener-alojamiento-gratis-para-tu-pagina-web-con-solo-5-clics-y-usando-google-drive/


« Última modificación: Marzo 28, 2022, 03:08:34 am por dixon »

Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.