Moparscape - RSPS Community

General Interests & Hobbies => General Programming => Topic started by: 317guy on May 04, 2016, 07:49:11 AM

Title: (Array)Html5 Map? Is there any other way?
Post by: 317guy on May 04, 2016, 07:49:11 AM
Was just curious is there any other way to program a map in JavaScript
using a different method besides arrays, below is just a small way of how i am rendering my maps
however my map is now huge and it is very bothersome to find the area i wish too edit. I am also using the array elements for collision.
if anyone knows of a different method please share. or you can just flame me for my code.

(click to show/hide)
Title: Re: (Array)Html5 Map? Is there any other way?
Post by: Bowser jr on May 04, 2016, 09:04:39 AM
You probably want to generate the map from a mapdata file, and not hardcode stuff like this.
Title: Re: (Array)Html5 Map? Is there any other way?
Post by: 317guy on May 04, 2016, 09:20:10 AM
You probably want to generate the map from a mapdata file, and not hardcode stuff like this.
Do you think you could point me in the right direction? any information or website would be great  :)
Title: Re: (Array)Html5 Map? Is there any other way?
Post by: Bowser jr on May 04, 2016, 12:55:26 PM
Just look how other people implement their maps.
Title: Re: (Array)Html5 Map? Is there any other way?
Post by: Death Style on May 05, 2016, 10:29:54 AM
is this a static image?

using arrays is your best bet but you can make it easier

Code: Javascript
  1. var loadImage =(url)=>new Promise((resolve, reject)=>{
  2.   var img =new Image();
  3.   img.onload=()=> resolve(img);
  4.   img.onerror=(err)=> reject(err);
  5.   img.src= url;
  6. });
  7.  
  8. var loadImages =(imgUrls)=> Promise.all(imgUrls.map(loadImage));
  9.  
  10. var drawMap =(tiles, tileImgs, context)=>{
  11.   var tileHeight = tileImgs[0].height;
  12.   var tileWidth = tileImgs[0].width;
  13.   tiles.forEach((row, y)=> row.forEach((tileID, x)=> context.drawImage(tileImgs[tileID], x * tileWidth, y * tileHeight)));
  14. };
  15.  
  16. var imgUrls =[
  17.   'Grass.png',
  18.   'Rock.png',
  19.   'Sand.png'
  20. ];
  21.  
  22. var map =[
  23.   [0,0,0],
  24.   [1,1,1],
  25.   [2,2,2]
  26. ];
  27.  
  28. var context;// something...
  29.  
  30. loadImages(imgUrls).then(tileImgs => drawMap(map, tileImgs, context));
  31.  

the ID in your 2d map array correlates with the index in imgUrls, so you don't need to check each one individually

you'll get the first row of grass, then rock, then sand
Title: Re: (Array)Html5 Map? Is there any other way?
Post by: 317guy on May 05, 2016, 12:57:05 PM
is this a static image?

using arrays is your best bet but you can make it easier

Code: Javascript
  1. var loadImage =(url)=>new Promise((resolve, reject)=>{
  2.   var img =new Image();
  3.   img.onload=()=> resolve(img);
  4.   img.onerror=(err)=> reject(err);
  5.   img.src= url;
  6. });
  7.  
  8. var loadImages =(imgUrls)=> Promise.all(imgUrls.map(loadImage));
  9.  
  10. var drawMap =(tiles, tileImgs, context)=>{
  11.   var tileHeight = tileImgs[0].height;
  12.   var tileWidth = tileImgs[0].width;
  13.   tiles.forEach((row, y)=> row.forEach((tileID, x)=> context.drawImage(tileImgs[tileID], x * tileWidth, y * tileHeight)));
  14. };
  15.  
  16. var imgUrls =[
  17.   'Grass.png',
  18.   'Rock.png',
  19.   'Sand.png'
  20. ];
  21.  
  22. var map =[
  23.   [0,0,0],
  24.   [1,1,1],
  25.   [2,2,2]
  26. ];
  27.  
  28. var context;// something...
  29.  
  30. loadImages(imgUrls).then(tileImgs => drawMap(map, tileImgs, context));
  31.  

the ID in your 2d map array correlates with the index in imgUrls, so you don't need to check each one individually

you'll get the first row of grass, then rock, then sand
Thanks for the upgrade hahaha, Just wondering do you think it is possible to load the data from a image file so instead of  0 = grass, a pixel of green on the image file would represent the grass image?
Title: Re: (Array)Html5 Map? Is there any other way?
Post by: Death Style on May 06, 2016, 04:48:03 AM
you could map the image file of green/brown/tan to an array of 0/1/2 and then run it through that to get grass/rock/sand

you'd need to list the rgba values in the same order and map them over a Uint32Array view of the imagedata
Title: Re: (Array)Html5 Map? Is there any other way?
Post by: chillwitm888 on May 19, 2016, 06:09:41 AM
if you want to generate a map, why not just use google maps?
Google has their map Api open and you can use their placepicker API to plot ur points. Its fairly intuitive
No need to build something thats already been built
Title: Re: (Array)Html5 Map? Is there any other way?
Post by: justaguy on May 19, 2016, 09:14:54 AM
if you want to generate a map, why not just use google maps?
Google has their map Api open and you can use their placepicker API to plot ur points. Its fairly intuitive
No need to build something thats already been built

He wants to make a game world.
Title: Re: (Array)Html5 Map? Is there any other way?
Post by: 317guy on August 15, 2016, 03:56:37 AM
if you want to generate a map, why not just use google maps?
Google has their map Api open and you can use their placepicker API to plot ur points. Its fairly intuitive
No need to build something thats already been built

He wants to make a game world.
^
 |
Title: Re: (Array)Html5 Map? Is there any other way?
Post by: Kamnarce on August 10, 2019, 04:55:54 AM
will this copy career stats too, or just ratings?

and when I create a new league file, there is no free agent pool, so what am I copying over?