Imprimir Página - [javascript] Crear un mapa alaeatorio (es para un juego)

Título: [javascript] Crear un mapa alaeatorio (es para un juego)
Publicado por: z3nth10n en 27 Junio 2012, 19:22 pm

Hola amigos. Bueno, lo que quiero hacer no es muy sencillo, lo que voy a hacer va a ser tan complejo como un motor de creación de mapas (tales como Minecraft, o Terraria), lo que quiero hacer, es que el usuario pueda crear un nuevo mapa. Y poder editarlo.... :silbar: (Claro y que se pueda guardar dentro de nuestro cliente), como esto lo voy a hacer en HTA, voy a poder mezclar de todo tipo de lenguajes, tales como ASP para el cliente, y PHP para el servidor, pero necesito saber como.

Bueno, por el juego no os preocupeis. Ya he encontrado una buena base, que es:

Gameeffect --- Contiene el Super Mario Bros 64, que de ahí, me puedo sacar bastante información. Tales como los bloques, el personaje, etc.
Box2D --- Que añade efectos de física, tales como ragdoll, cuerpos geométricos, etc.

El problema es que, necesito aprender algo de matemáticas dentro de lo que es javascript. Y bueno... necesito tutoriales.... Hice otro post, pero no me siento seguro, asi que posteo uno aquí.

Vale, os voy a contar lo que quiero hacer, el juego va atratar algo asi como de SandBox (va a ser tipo plataformas, por eso utilizo Super Mario, pero a la misma vez, el mundo va a ser aleatorio, y claro, se va a poder editar), y puñado de cosas más.

Lo que necesito, o que alguien en concreto se ponga en contacto, y me ayude a diseñar el juego. (No tengo money)
O que alguien me soporte público.

Vale, las cuestiones son las siguientes:

>> Creación de bloques tales como (Tierra, piedra, arena, madera, etc.) (Todo esto en una misma imagen)
>> Creación del personaje
>> Creación de un inventario
>> Creación aleatoria de un mundo.

PD: El mundo tiene que seguir unos patrones, que seria algo así como el de cielo y tierra, y dentro de estos, algo así como los biomas)

Bueno, esto es complicado, y espero que cada usuario que tenga conocimientos de JS me ayude y aporte su granito de arena.

Un saludo.

Título: Re: [javascript] Crear un mapa alaeatorio (es para un juego)
Publicado por: z3nth10n en 27 Junio 2012, 20:47 pm

He estado viendo acerca del generador de mundo, y he encontrado esto, una apliación llamada ValueNoise (http://sirisian.com/javascriptgame/tests/valuenoise2.html), no tengo ni idea de que es. Pero igual me sirve, solo tengo que saber como se maneja. Alguien que me heche una manita? :silbar:

Título: Re: [javascript] Crear un mapa alaeatorio (es para un juego)
Publicado por: z3nth10n en 27 Junio 2012, 20:58 pm

Vale ya se mas o menos lo que es, todo esta en ingles, alguien me lo puiede traducir al español, y ya de paso que me heche una manita para empezar a hacer codigo?

Título: Re: [javascript] Crear un mapa alaeatorio (es para un juego)
Publicado por: z3nth10n en 27 Junio 2012, 23:15 pm

He encontrado un tema en inglés de un tal Graham Weldon, y cuenta como hacer un mapa con JS y Canvas, lo malo es que no dice el código, a ver si alguien lo encuntra.

El tema es este (http://grahamweldon.com/posts/view/2d-terrain-generation-with-processing).

Un saludo.

Título: Re: [javascript] Crear un mapa alaeatorio (es para un juego)
Publicado por: z3nth10n en 28 Junio 2012, 11:44 am

He encontrado un nuevo código, este lo que hace es asignar una ID aleatoria a un DIV, http://www.preik.net/mapper.html

Código

<html>
 
<head><title>MAPPER</title></head>
 
<body>
 
<style type="text/css">
 
	.void {background-color:black;}
 
	.plains {background-color:#ccee88;}
 
	.hills {background-color:#85bb85;}
 
	.mountain {background-color:#aaaaaa;}
 
	.peaks {background-color:#eeffff;}
 
	.forest {background-color:22ff50;}
 
	.brush {background-color:#99ee50;}
 
	.swamp {background-color:#448810;}
 
	.desert {background-color:#ffff22;}
 
	.shore {background-color:#999955;}
 
	.ocean  {background-color:#0088ff;}
 
	.lake  {background-color:#0055ff;}
 
	.abyss  {background-color:#0066bb;}
 
	.settlement {background-color:#001000;color:#aa5515;}
 
	.player {background-color:#000000;color:#ffff00;}
 
	.mapEdge {background-color:#000000;color:#000000;}
 
</style>
 
<div style="font-family:Monospace,Courier,New;font-size:18pt;">
 
<center>
 
<script language=javascript>
 
	var nTerrainTypes=10;
 
	var terrainOrderStrength=4;
 
	var gameReady=false;
 
	function TerrainType(index,name,rep,style,matrix,passable){
 
		this.index=index;
 
		this.matrix=matrix;
 
		this.name=name;
 
		this.rep=rep;
 
		this.style=style;
 
		this.passable=passable;
 
	}
 
 
 
	var terrain=new Array();
 
	terrain.push(new TerrainType(0,"VOID","x","void",[1],false));
 
	terrain.push(new TerrainType(1,"PLAINS","&#38;#8801;","plains",[1,1,1,1,1,1,1,2,2,2,5,6,6,8,8],true));
 
	terrain.push(new TerrainType(2,"HILLS","~","hills",[2,2,2,1,1,5,4,3,3,3,3,7],true));
 
	terrain.push(new TerrainType(3,"MOUNTAIN","^","mountain",[2,2,3,3,3,3,11],true));
 
	terrain.push(new TerrainType(4,"FOREST","&#38;#8225;","forest",[2,5,5,5,4,4,4,4],true));
 
	terrain.push(new TerrainType(5,"BRUSH","&#38;#8224;","brush",[5,4,2,1],true));
 
	terrain.push(new TerrainType(6,"SWAMP","&#38;#926;","swamp",[10,6,6,6,1,1],true));
 
	terrain.push(new TerrainType(7,"DESERT","&#38;#8776;","desert",[2,3,7,7,7,7,7],true));
 
	terrain.push(new TerrainType(8,"SHORE",",","shore",[1,6,8,9,9],true));
 
	terrain.push(new TerrainType(9,"OCEAN","~","ocean",[8,9,9,9,12],false));
 
	terrain.push(new TerrainType(10,"LAKE","-","lake",[8,6,10,10],false));
 
	terrain.push(new TerrainType(11,"PEAK","^","peaks",[11,3,3,3],false));
 
	terrain.push(new TerrainType(12,"Octopus Spawning Grounds","@","abyss",[9],false));
 
	terrain.push(new TerrainType(13,"SETTLEMENT","&#38;#923;","settlement",[1],true));
 
 
 
	function Tile(){
 
		this.genCheck=false;
 
		this.genIndex=500000;
 
		this.terrain=0;
 
	}
 
	var map=new Array();
 
	var mapW=20;
 
	var mapH=20;
 
	for (hc=0;hc<mapH;hc++){
 
		for (wc=0;wc<mapW;wc++){
 
			map.push(new Tile());
 
		}
 
	}
 
	var mapComplete=false;
 
	var ic=0;
 
	var icMax=50000; //Just making sure the loop finishes at some point
 
	var center=mapW*mapH/2+mapW/2;
 
 
 
	map[center].genIndex=0;
 
	map[center].terrain=13;
 
	/*
 
	var seed2=Math.floor(Math.random(map.length));
 
	map[seed2].terrain=1;
 
	map[seed2].genIndex=0;
 
 
 
	var seed3=Math.floor(Math.random(map.length));
 
	map[seed3].terrain=9;
 
	map[seed3].genIndex=0;
 
	*/
 
	var nextTile=-1;
 
 
 
	while(!mapComplete && ic<icMax){
 
		ic++;
 
		if (nextTile!=-1){
 
			w=nextTile%mapW;
 
			h=Math.floor(nextTile/mapW);
 
			var c=1;
 
			var ter=map[nextTile].terrain;
 
			//north
 
				northRef=(mapW)*(h-1)+w;
 
				if (h<=0){northRef=(mapW)*(mapH-1)+w;}
 
				SetMap(northRef,c,ter);
 
				c=Math.floor(Math.random()*terrainOrderStrength);
 
			//east
 
				eastRef=(mapW)*h+w+1;
 
				if (!(w<mapW-1)){eastRef=(mapW)*h;}
 
				SetMap(eastRef,c,ter);
 
				c=Math.floor(Math.random()*terrainOrderStrength);
 
			//south
 
				southRef=(mapW)*(h+1)+w;
 
				if (!(h<mapH-1)){southRef=w;}
 
				SetMap(southRef,c,ter);
 
				c=Math.floor(Math.random()*terrainOrderStrength);
 
			//west
 
				westRef=(mapW)*h+w-1;
 
				if (!(w>0)){westRef=(mapW)*h+mapW-1;}
 
				SetMap(westRef,c,ter);
 
				c=Math.floor(Math.random()*terrainOrderStrength);
 
			map[nextTile].genCheck=true;
 
			nextTile=-1;
 
		}
 
		nextTile=GetNextTile();
 
		if (nextTile==-1){
 
			if (nextTile==-1){mapComplete=true;}
 
		}
 
 
 
	}
 
 
 
	function SetMap(ref,gI,ter){
 
		if (ref<map.length){
 
			//if (!map[ref].genCheck && map[ref].terrain==0){
 
			if (!map[ref].genCheck && (map[ref].terrain==0)){
 
				map[ref].terrain=GenTerrain(ter);
 
				map[ref].genIndex=map[nextTile].genIndex+gI;
 
			}
 
		}
 
		else {document.write('out of bounds');}
 
	}
 
 
 
	function GenTerrain(from){
 
		var to=1;
 
		t=terrain[from];
 
		s=t.matrix.length;
 
		to=t.matrix[Math.floor(Math.random()*s)];
 
		return to;
 
 
 
	}
 
 
 
	function DrawMap(){
 
		for (hc=-winSize;hc<=winSize;hc++){
 
			//document.write('<br>');
 
			for (wc=-winSize;wc<=winSize;wc++){
 
				var c=(mapW)*(hc+cY)+wc+cX;
 
				if (hc==0 && wc==0){
 
					StatusMessage(terrain[map[c].terrain].name);
 
				}
 
				else if ((wc+cX)>0 && (wc+cX)<mapW && (hc+cY)>0 && (hc+cY)<mapH){
 
					var l=document.getElementById(wc+'by'+hc);
 
					l.className=terrain[map[c].terrain].style;
 
					l.innerHTML=terrain[map[c].terrain].rep;
 
				}
 
				else {
 
					var l=document.getElementById(wc+'by'+hc);
 
					l.className="mapEdge";
 
 
 
				}
 
			}
 
		}
 
		//var c=(mapW)*(cY)+cX;
 
		//StatusMessage(terrain[map[c].terrain].name);
 
	}
 
 
 
	function StatusMessage(text){
 
		var s=document.getElementById("status");
 
		s.innerHTML=text;
 
	}
 
 
 
	function SetDrawMap(){
 
		for (hc=-winSize;hc<=winSize;hc++){
 
			document.write('<br>');
 
			for (wc=-winSize;wc<=winSize;wc++){
 
					document.write('<span id="'+wc+'by'+hc+'" class="player">&#38;#8734;</span>');
 
			}
 
		}
 
		document.write('<br><span id="status"></span>');
 
 
 
	}
 
 
 
	function GetNextTile(){
 
		var nt=-1;
 
		var nv=100000;
 
		for (cc=0;cc<map.length;cc++){
 
			if (map[cc].genIndex<nv && (!map[cc].genCheck || map[cc].terrain==0)){
 
				nt=cc;nv=map[cc].genIndex;
 
			}
 
		}
 
		return nt;
 
	}
 
 
 
	var cX=Math.floor(mapW/2);
 
	var cY=Math.floor(mapH/2);
 
	var nX=0;
 
	var nY=0;
 
	var winSize=3;
 
	var cycleDelay=500;
 
	SetDrawMap();
 
	DrawMap();
 
	gameReady=true;
 
 
 
	function KeyCheck(){
 
		if (gameReady){
 
			var KeyID = (window.event) ? event.keyCode : e.keyCode;
 
			if (KeyID==38){nY=cY-1;nX=cX;DoMove();}
 
			else if (KeyID==40){nY=cY+1;nX=cX;DoMove();}
 
			else if (KeyID==37){nX=cX-1;nY=cY;DoMove();}
 
			else if (KeyID==39){nX=cX+1;nY=cY;DoMove();}
 
			else if (KeyID==66){Build();}//'b'
 
		}
 
	}
 
 
 
	function Build(){
 
		var cc=(mapW)*(cY)+cX;
 
		if (map[cc].terrain!=13){
 
			map[cc].terrain=13;
 
			DrawMap();
 
		}
 
	}
 
 
 
	function DoMove(){
 
		var okay=true;
 
		if (nX<=1){nX=1;}
 
		else if (nX>=mapW){nX=mapW-1;}
 
		if (nY<=1){nY=1;}
 
		else if (nY>=mapH){nY=mapH-1;}
 
		if (nX==cX && nY==cY){okay=false;}
 
		else{
 
			var nc=(mapW)*(nY)+nX;
 
			var cc=(mapW)*(cY)+cX;
 
			if (nc<0 || nc>=map.length){StatusMessage("OUT OF BOUNDS ERROR");}
 
			else if (!terrain[map[nc].terrain].passable){
 
				okay=false;
 
				StatusMessage("BLOCKED BY "+terrain[map[nc].terrain].name);
 
			}
 
		}
 
		if (okay){cX=nX;cY=nY;DrawMap();}
 
	}
 
 
 
	document.onkeyup = KeyCheck; 
 
 
 
 
 
	//var t=setTimeout("cycle()",cycleDelay);	
 
 
 
</script>
 
</center>
 
</div>
 
</body>
 
</html>

Lo unico que hace es general un mapa de 7x7 bloques, yo necesito mas, y aparte, si voy a crear por ejemplo uno de 500x142, va air un poco lag el juego ya que tendra que cargar 71000 divs.

Necesito editarlo, para que parezca realistico el terreno. Ayuda.... :silbar:

Ya si os dejo algo mas concreto, no? :laugh:

Un saludo. :-*

Título: Re: [javascript] Crear un mapa alaeatorio (es para un juego)
Publicado por: Anvil en 30 Junio 2012, 20:46 pm

Minecraft utiliza una tecnología que se llama vóxeles, https://es.wikipedia.org/wiki/V%C3%B3xel mientras que en Terraria al ser 2D bien puedes seguir utilizando pixeles. ¿Tu videojuego es en 2D o en 3D?. Generar un terreno procedural tiene muchas especies de reglas, yo te recomiendo que vayas por lo más fácil, es decir hacer que primero tu terreno sea una isla, si ya puedes hacer que tu terreno sea una isla entonces prueba extender tu algoritmo de generación de islas para que puedas crear archipielagos en esta isla.

Título: Re: [javascript] Crear un mapa alaeatorio (es para un juego)
Publicado por: z3nth10n en 2 Julio 2012, 13:30 pm

Es un juego en 2D, y desde hace ya encontre un juego que se adecua a lo que yo estoy haciendo... Os dejo el quote de lo que escribí en forosdelweb.com:

Cita de: Seazoux;4223172

Bueno, ya he encontrado la solucion a mis dudas... He encontrado un juego de los 80, bastante parecido al mio. Solo que tengo una duda... El juego se llama: Chukie Egg, la verdad que es simple, pero es facil porque explica todo en comentarios.

Bueno, esa duda la he resuelto, porque este juego funciona a partir de arrays que crean el mapa...

Vale mi problema es el siguiente:

El juego utiliza dimensiones de 8x8 y yo las necesito de 16x16. Trasteando trasteando, encontre el motor del juego por así decirlo.. Y bueno, lo que me encontre fueron las texturas que utiliza y cosas de como se genera el mapa.

Ahora tengo ese codigo:

http://pastebin.com/ULhxPScw (http://pastebin.com/ULhxPScw)

El problema esta en los de negrita, ese 4, originalmente era un 3.
Este 3 me hacia que algunas imagenes (los grains, y egg), me los ponia metidos bajo el bloque de dirt. Si lo pongo a 4, se pone bien, pero miren como se ve el mapa.

(http://i.imgur.com/U6SMX.png)

----------------------------

Este es el juego original (descarga): http://marklomas.net/ch-egg/downloads/dhtml_ch-egg_source_code.zip (http://"http://marklomas.net/ch-egg/downloads/dhtml_ch-egg_source_code.zip")

Como veis mi super mario, tiene las coordenadas de 8x16, y no se ponerselas a 16x16...

Ahora diréis porque tengo, ese juego,:

Funcionan con arrays, que me sirven para guardar el juego con 0,1,2,3,4,5,6,7,8 segun la Id del bloque lo que hace que pese muchísimo menos. Ahora tengo que buscar un generador aleatorio de numeros, que siga un orden o algo...

Bueno, un saludo.

Título: Re: [javascript] Crear un mapa alaeatorio (es para un juego)
Publicado por: Anvil en 2 Julio 2012, 18:09 pm

Que bien, al parecer yo me lo estaba imaginando más complejo :huh: jejeje espero que pronto nos enseñes lo que estás haciendo

Título: Re: [javascript] Crear un mapa alaeatorio (es para un juego)
Publicado por: z3nth10n en 2 Julio 2012, 18:45 pm

Estoy empezando por lo mas basico, ya que estoy aprendiendo. :rolleyes:

Bueno, la verdad que es una jodida ***** bastante complicado, porque he podido arreglar ese error, pero ahora el personaje no se mueve y las aves azules van ~~a toda hostia, folladas vivas,~~ rapidísimo. Una screen:

(http://i.imgur.com/MimJ4.png)

No tengo ganas de hacer un vídeo, por lo que os dejo este link para que veais, opineis, y si quereis dar un fix. :silbar: :laugh:

http://www.mediafire.com/?6abwhruwfy6zude (http://www.mediafire.com/?6abwhruwfy6zude)

Ya puedes ver lo que hago, simplemente editar un juego, ya hecho. :laugh:

Foro de elhacker.net

Programación => Programación General => Mensaje iniciado por: z3nth10n en 27 Junio 2012, 19:22 pm