Jump to content

Search the Community

Showing results for tags 'maps'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 7 results

  1. How do you make isometric with phaser? I try to use isometric plugin, but it doesn't work good with big maps exported from Tiled editor. Can you give any examples or source code?
  2. Hi folks. Been messing around with Phaser again, and I've got a question. How do I grab both the directory AND file name FROM an ALREADY LOADED XHR file, OR the file name AND directory from a 404'd XHR? I want to use an asynchronous function to grab what's in the console XHR file tab and store it in either in an array or a string for later use. Thanks a ton! ~Mythros <3
  4. Let's say I have a material with the following properties: var ref = new BABYLON.CubeTexture("skybox", scene); var mat = new BABYLON.PBRMaterial("PBR", scene); mat.albedoTexture = new BABYLON.Texture("a.png", scene); mat.reflectionTexture = ref; mat.microSurface = .4; //mat.diffuseTexture = new BABYLON.Texture("s.png", scene); //mat.reflectivityColor = new BABYLON.Color3.FromHexString("#eeeeee"); //mat.albedoTexture.hasAlpha = true; //materialGloss.albedoColor = new BABYLON.Color3.FromHexString("#f00001"); Is it possible to have a texture on top of the reflecting surface? Preferably with an alpha channel. What about multiple textures layered on top of each other, like a dirt map on top of a logo?
  5. Hi there. So currently I have a single player open world game which I am in the process of developing multiplayer for. The current system of map gen is local, and done through a bunch of arrays lol. I chose this route LONG ago, and I know it wasn't the best option, but it was easier for me to throw this together than to learn how to used tiled and object layers etc. Using arrays seemed easier to me because I understood how I can respawn/kill dead objects from the array instead of having to learn tiled's object layer stuff. Anyway, my current system is as follows: At the top of my game basically I have something like this run PS: (The map is 2k x 2k TILES long, each tile is 32x32 so map is 64k x 64k pixels) var mapSize = 2000; var grid = new Array(mapSize).fill(0); for(var i = 0; i<mapSize+1; i++){ grid[i] = new Array(mapSize).fill(0); }; for(var i = 0; i<18000; i++){ var tempX = Math.round(Math.random()*(mapSize-1)); var tempY = Math.round(Math.random()*(mapSize-1)); if(grid[tempX][tempY] == 0){ grid[tempX][tempY] = 2; } } for(var i = 0; i<12000; i++){ var tempX = Math.round(Math.random()*(mapSize-1)); var tempY = Math.round(Math.random()*(mapSize-1)); if(grid[tempX][tempY] == 0){ grid[tempX][tempY] = 3; } } This is an example of how i am generating the map. Basically it creates a 2 dimensional array with values 0, 2, or 3 in this example. My rendering system is shown bellow, basically spawn any non 0 entry within 3k pixels of the person (or 91 tiles) by reading the map array from points based on the players current position: function mapGen(x1, y1, x2, y2){ if(x1<0){ x1 = 0; } else if(x2>(mapSize-1)){ x2 = mapSize-1; } if(y1<0){ y1 = 0; } else if(y2>(mapSize-1)){ y2 = mapSize-1; } for(var row = x1; row<x2; row++){ for(var col = y1; col<y2; col++){ if(grid[row][col]!=0){ temp = position(row, col); if(grid[row][col]==2){ createSprite = itemGroup.create(temp[0], temp[1], 'tree'); createSprite.scale.set(1.1, 1.1); } else if(grid[row][col]==3){ createSprite = itemGroup.create(temp[0], temp[1], 'boulder'); } createSprite.body.immovable = true; } }; }; } This is the render system that is called whenever a player ventures 3k pixels away from a position (The function variables are the corners of the 3k x 3k box around the player in tiles), when called, the position it's using as reference is changed to the current position of the player, so basically it just renders 3k pixels around the player until a player moves to far from that squares center and renders a new one, I do this bc the game cant handle more than a couple thousand sprites on the screen, and doing this lets me have like 200 rendered and have flawless performance. This system works fine for what I need, if there is a 0, leave it blank and the tilesprite background will show, if there is something there then spawn a tree or a rock or whatever said item is (This is just dummy code). For destroying sprites once a player destroys a sprite I get the pixel location of the now dead sprite and change it into tile position and set that tile position to 0. Which is why i chose this system over tiled, it seemed easier to me. Now finally, here is my problem: I have created a lot of the multiplayer aspect, and all the connections and player positions etc. However, the map is still different on every players screen due to the random gen that happens every time game loads. I can create the giant array on the server, however there is no way I can transfer it to the players. Creating the giant array only takes 300ms which is kinda a lot in terms of performance for my game, but if i render it once on the server and send it to every client my server crashes, i assume its because its wayyy too much data or takes too long. I tried writing it out to a file to read then from my clients but that's 11mb lol and I dont know where to smoothly read something like that. So basically, what are my options here. I would be open to switching to tiled, however i dont know how to randomly generate terrain there, and cant do it manually, as well as i like the system I have now bc how easily i can manipulate it. Another solution I have yet to try but I might, is instead of sending the entire map file, just write a file or a variable i could send through sockets with where all the non 0 items are around the array to cut down on space and increase performance. This was kinda poorly written, however I appreciate anyone who took the time to read this, I always chose bad times to write forum posts and right now Im in a rush so I didnt get a chance to re-read this and make myself not sound like I have the English skills of an 8 year old. So if anything needs clarifying let me know! Thanks again for the help.
  6. Hey guys, I'm having an odd issue. I'm trying to automatically generate a map. Here, I'm going to show the code, and then explain what happens when I run it: // This is another class and defines a room in the game Room: function(x, y, w, h) { this.x1 = x; this.y1 = y; this.x2 = x + w; this.y2 = y + h; }, // Used to create rooms (a rectangle of non-blocked tiles) on the map // SOMETHING HERE IS CRASHING createRoom: function(room) { for (var x = room.x1; x < room.x2; x=+32) { for (var y = room.y1; y < room.y2; y=+32){ // change the "true" to "false" after collision is worked out this.map.push(new this.Tile(x, y, true, true)); } } },(I'm sorry, I know this code isn't pretty) Okay, so, as you can see, a room is really just a coordinate-defined rectangle. The "map" is an array that stores "Tiles" which are coordinate-defined tiles. Whew, does that make sense? I need to go back to school for sure. Now, that for statement, I'm going to use an example: We'll assume that room.x1 = 32, ".x2 = 96, ".y1 = 32, ".y2 =96. Nice and easy. (1) In the first for statement: if 32 is less than 96; it is, so we change 32 to 64 and move on (2) In the 2nd for statement: if 32 is less than 96; it is, so we change 32 to 64 and move on (3) We append a tile to the map array with coords (64, 64), and go back to the beginning (5) In the next pass we append a tile with coords (96, 96), and go back to the beginning (6) The for statement no longer applies, so it stops. This should only run 3 times right? But it's running indefinitely and crashing my browser. Any ideas?
  • Create New...