Search the Community

Showing results for tags 'isometric'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 77 results

  1. Hi all, I have been trying to follow this tutorial here: https://developer.tizen.org/community/tip-tech/using-easystar.js-implement-pathfinding-tizen-game-projects However, it mentions about a 2D array and right away I'm lost. I have a game in Phaser Isometric but I don't use a 2D array at all. I just have a tile and a loop to add to a tile group. spawnTiles: function () { var tile; for (var xx = 0; xx < 400; xx += 38) { for (var yy = 0; yy < 400; yy += 38) { // Create a tile using the new game.add.isoSprite factory method at the specified position. // The last parameter is the group you want to add it to (just like game.add.sprite) tile = game.add.isoSprite(xx, yy, 0, 'tile', 0, tileGroup); tile.anchor.set(0.5, 0); } } } How do I get a 2D array for Easystar to use?
  2. Hi, I am developing a game with babylon.js, and I use an isometric view (so z coordinate, is actually pointing top left of the screen, and x bottom left) : var zoom = 2; var cameraPosition = new BABYLON.Vector3(5*zoom, 4.1*zoom, 5*zoom); var scene = new BABYLON.Scene(engine); var camera = new BABYLON.TargetCamera("camera1", cameraPosition, scene); camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA; camera.orthoTop = 2.5 * zoom; camera.orthoBottom = -2.5 * zoom; camera.orthoLeft = -5 * zoom; camera.orthoRight = 5 * zoom; Therefore, when the player wants to go up (velocity.top), the controlled mesh should increment both z, and x, which results in the following equations : if (player.velocity.top !== 0 && player.velocity.left !== 0) var d = 0.7071; // Cos(45°) else var d = 1; player.position.z += Math.sign(player.velocity.top - player.velocity.left) * d * t; player.position.x += Math.sign(player.velocity.top + player.velocity.left) * d * t; All this seems to be working fine. Now, I would like the orthographic camera to follow the player when he is moving. I can't make the camera target the player, as it breaks the isometric view : the camera doesn't move to follow the player, it rotates, and as the angle of the camera changes, the isometric view breaks. Instead, I think I need to move the bounding box of the orthographic camera to be centered on the player position. But because the camera is orthographic, the bounding box doesn't seem to be related to the same coordinates as the player : the same way position.z is an arbitrary combination of velocity.top and veloctiy.left, orthoTop should be the inverse combination of position.z and position.x. So instead, my idea was to increment the bounding box by the same amount the player moves (as the velocity is in the same direction than the bounding box). By tweaking the values, I came up with this approximate solution, which I have a hard time to understand. if (player.velocity.top !== 0 && player.velocity.left !== 0) var d = 0.35; // Cos(45°)³ else var d = 1; camera.orthoTop -= Math.sign(player.velocity.top) * d * t * .7; camera.orthoBottom -= Math.sign(player.velocity.top) * d * t * .7; camera.orthoLeft -= Math.sign(player.velocity.left) * d * t * 1.4; camera.orthoRight -= Math.sign(player.velocity.left) * d * t * 1.4; It is approximate, because it only minimizes the error of movement between the camera and the mesh. But if the player goes one direction long enough, it will eventually go out of the screen. I am pretty sure there is an explanation for all this, but can't find it. What is the correct way to make an orthographic camera follow a target in an Isometric view ? Thanks,
  3. Hey all, So I recently switched my entire game over to Phaser Isometric by @lewster32 and now I keep running into an issue with collision. With just spawning a sprite in and not chaning any of its body properties, collision happens when the TOP of my player's body box reaches the TOP of the sprite's body box. This is a problem because it allows me to just walk through the sprite diagonally, which is not what I want. In fact, what I want is for collision to happen when the BOTTOM of the body boxes touch. (Sidenote: when I say body box I'm referring to the the 3d body shown through a body debug). Here is an example of how it works with no changes made to the body of either sprite. This is collision happening with no modifications: image - side note I am moving up and to the left in this picture, not down and to the left. This is after some changes to the body, the same thing happens too but it more closely represents what I *want* to happen, except it's still happening only with the top of the player sprite and tree sprite. image 2 Similarly, when I go to the top right side of the tree and move down into it, my body will go through the body box until the top of the body box hits the tree's box. When I mess with the Z values it all breaks and no collision will happen either. On top of that, changing the sprites anchors PAST (.5, .49999) also breaks something. Collision will happen at an anchor of (.5, .4999) but not at (.5, .5), it's very strange. Edit: Also, if i set the anchor to greater than (.5, .5) AFTER I enable isoPhysics on the body, the sprite's position gets moved thousands away and sometimes into the negative's. Here is my code to spawn the sprite and player. There is much more that goes into spawning the sprites, but this is anything that could even be related to the issue at hand. player1 = game.add.isoSprite(1000, 1000, 0, 'person'); game.physics.isoArcade.enable(player1); game.physics.isoArcade.collide(player1, itemGroup, null, null, this); createSprite = game.add.isoSprite(1250, 1250, 0, itemGet(chunks.chunks[i][slot]), null, itemGroup); //the anchor and body.setSize code here draws what you see in image 2. With these lines commented out, it outputs image 1. createSprite.anchor.setTo(.5, .49); game.physics.isoArcade.enable(createSprite); createSprite.body.setSize(40, 40, 0, 27, 27); createSprite.body.immovable = true; Any help is GREATLY appreciated. Ive been trying to fix this for a few days now, nothing I do works.
  4. I am somewhat new to Phaser and have a goal of making a game with similar gameplay to the first Navyfield. One concept I am having trouble with is how Navyfield managed to do projectiles with 3D positions using 2D sprites. What steps do I have to take to have a cannon fire a projectile up in the air and possibly at an angle towards or away from the "camera"? If possible, could I get some psuedo code or even better an example using Phaser? Here is an example of the projectile system used in Navyfield (might be a bit loud):
  5. Hey everyone, I am currently following the format of this tutorial to try to create a structured Phaser project, where the code is split up. Everything seems to go well, except from the fact that I can't seem to add the Isometric plugin I am using. This is the code I'm using: Main.js window.onload = function(){ var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-canvas', null, true, false); game.state.add('Boot', Boot); game.state.add('Preload', Preload); game.state.add('Menu', Menu); game.state.add('Start', Start); game.state.start('Boot'); } Preload.js var Preload = function(game){ }; Preload.prototype = { preload: function(){ this.time.advancedTiming = true; this.plugins.add(new Phaser.Plugin.Isometric(this)); this.iso.anchor.setTo(0.5, 0.2); this.load.spritesheet('basic_ground', 'img/spritesheet/basic_ground_tiles.png', 128, 128); }, create: function(){ this.state.start('Start'); } } This is the error I am getting when running: Uncaught TypeError: Cannot read property 'add' of undefined at Preload.preload (Preload.js:8) at c.StateManager.preUpdate (phaser.min.js:10) at c.Game.updateLogic (phaser.min.js:12) at c.Game.update (phaser.min.js:12) at c.RequestAnimationFrame.updateRAF (phaser.min.js:18) at window.requestAnimationFrame.forceSetTimeOut._onLoop (phaser.min.js:18) Any help?
  6. Hello, all. I'm wondering if anyone knows a way of placing a large image in the background of a game made using the Phaser Isometric Plugin. Is sorting within groups the only way of layering objects? Is it possible to place an object behind all others, regardless of position? This may be something of a silly newbie question. I've been using the plugin for about three days. Thank you very much for reading and considering. Any input is very much appreciated. -JStan
  7. Arkona (working title) is an isometric retro rpg in a style you may remember if you played pc games in the 90s. :-) I'm looking for people who are just into this stuff. The game is in a relatively early stage and is meant as a hobby project only. I could use help with: - music/sound fx (there are none so far) - 3d artist: is toon-shaded creature animation your thing? - pixel artist: see screenshot below for reference - coder: phaser+es6+webpack, there is a lot to do (combat, inventory, pathfinding, etc.) - other: want to write conversations, design levels, etc? Get the source here: https://github.com/uzudil/arkona Thanks for considering! --U
  8. I am having issues working with the isometric plugin without using world bounds. As an example, gravity will cause my sprite to continue to move when providing a velocity on z for jumping because it never hits the ground. I think I have a partial solution to this by checking if z is < 0 then set it to 0. This seems to work, but I now think that collision is not working right, or the sorting depth is not working. If my player character jumps, he will be in front of all other objects. Has anyone worked with the isometric plugin without using world bounds? If so, do you have any tips? Thanks.
  9. I've spent the last week or so putting together a fairly comprehensive plug-in for Phaser in the form of an isometric (axonometric and dimetric to be precise) renderer for Phaser. Not wanting to stop there, I decided to go the whole hog and port over Phaser.Physics.Arcade to the new renderer by adding in an extra dimension. You can get the plug-in here: http://rotates.org/phaser/iso/ - the page also contains a working example so feel free to view the source to get a feel for how it works. I'll be creating several more examples in the coming days and weeks, as well as improving the plug-in, fixing bugs and so on. As of yet, I am undecided as to whether to embark on trying to create an isometric equivalent to TileMap (with Tiled importer) but if there's enough interest I may see what I can do. Enjoy, and I'm looking forward to seeing what you do with it!
  10. Hello. I am searching for a good html5 isometric game engine. It can't be restricted to AABB collision. Need more complex collisions. What would you recommend? I found this MelonJs example that didn't seem bad. (not sure if it meets the requirements though). So Melon.js? I know phaser has an isometric plugin but I think the collisions are rather simple since it is based on arcade physics which are only AABB, @Milton? http://jsiso.com/? https://www.isogenicengine.com/ ? seems quite simple... idk http://jdan.github.io/isomer/ same I have a dought also. Those games like Diablo, are they grid-fixed?
  11. Hi, I'm starting with Phaser + Isometric plugin and is pretty cool. I think it has what I need for now, but now I'm stuck with some tests... I'm trying to detect when a srpite is hidden by another sprite in the isometric map. Something similar to? https://phaser.io/examples/v2/sprites/overlap-without-physics I tried with intersects without results, I think this is because colliding avoid intersections. I tried also with overlap, but I have results only when collides, and I want to know it without colliding. Scene A: Blue cube is not colliding but has a hidden part because of isometric ordering. That is what I need to detect. Scene B: Blue cube is not hidden on any part, so I don't mind... Any ideas? Thank you all in advance!
  12. DEMO: http://silashatfield.com/game/ I've been grinding away with all of my free time getting dragon bones to work in phaser and creating an isometric concept. It's been a HUGE learning curve for me but I wanted to share what I have so far. Also, big thanks for http://rotates.org/phaser/iso/
  13. Hello, I am running into an issue where I have an empty sprite and add lots of children items to it. When I debug this item, my frame box to show my sprite is very tiny. If I use body.setSize I can make the empty sprite get bigger, but I haven't been able to figure out how to do this programmatically because whenever I try to use width it gives me the scale size .3. If the empty sprite has no size the depth sorting does not work so it makes my sprite always behind everything, like the ground. If I try to use other functions like LocalBounds I get the x, y, .3, .3. I want to get the actual pixel size of what the sprite and its children make up even if the parent sprite is an empty sprite. Is this possible? I am also using the isometric plugin if that helps. Here is probably the most relevant code to get the idea. this.model is an isometric sprite. (<any>this.game.physics).isoArcade.enable(this.model); this.model.body.collideWorldBounds = true; this.model.body.x = this.game.world.width * 0.5; this.model.body.y = this.game.world.height * 0.5; this.model.anchor.set(0.5); this.model.scale.set(0.3, 0.3); this.model.body.setSize(150, 150, 300, 0); //i want to set the size to be the entire size of the empty sprite + it's children this.model.width is scale size .3, but it looks like setSize requires pixels? this.game.debug.body(this.model, 'rgba(189, 221, 235, 0.6)', false);
  14. down vote favorite I am working with Phaser and its isometric plugin. I have a sprite with this physical body ( as shown in blue). As you can see the physics body doesn't match the actually visible body. I think I would need to rotate the body in order to properly match the visible body. Because the sprite is an iso sprite but its position is not "isometric". I have no idea on how to do that and if there is another solution. Can someone help me?
  15. Hello. I have created a function that instances a sprite giving attributes such as phyisics and size , etc. In the end of the function I kill the sprite. I put a keyboard input that when clicked resets that sprite to the given coordinates. I am using the isometric plugin. However the reset happens the sprite image doesn't appear. I see the body if I debug it. However no collision is happening as well. I only see the cube. If I spawned it normally the image sprite image would appear and I could collide with it. Any idea my sprite has no image and seems to don't collide with anything? Probably it is something related to phaser in general and not with the iso plugin
  16. Hello. I created a empty iso sprite in order to make an hitbox. However I am not being able to set its body to collide with world elements. This is my code: hitboxes = game.add.group(); hitbox1 = game.add.isoSprite(0,0,0,null,0,hitboxes); game.physics.isoArcade.enable(hitbox1); hitbox1.body.collideWorldBounds = true; hitbox1.body.setSize(300,300,100,0,0,0); dude.addChild(hitbox1); I see the hitbox but it doesn't collide with anything. Why is that?
  17. Hello. I have been messing around with phaser again for the last couple of hours and I am trying to make a normal sprite collide with a isoSprite. I don't know if that is actually possible and if that should be even done since depth is missing for the normal sprite ... I think there was a problem with adding hitboxes in isometric because there was a "bug" when you add a isometric sprite to another sprite as a child ( the hitbox position doesn't get fixed to the parent). (I had discussed this already in here: http://www.html5gamedevs.com/topic/25092-phaser-create-hitboxes-in-isometric/). Well I am not sure if the problem was fixed or not. I tried fixing it myself but my knowledge is still very limited... Basically I am trying to do this hitbox strategy: http://www.html5gamedevs.com/topic/14840-separate-hitboxes-for-attack-animations/ in isometric. Probably having and isoSprite colliding with a normal sprite isn't a viable option at all so I believe the only solution is adapting the hitbox to isometric. I am also quite curious on how this game was made http://test.playwildterra.com/. It was made with phaser and I belive it was isometric... They must have found a solution. Well I am also trying babylon and it is also very cool. However I would like to get this problem solved just to try some things with phaser on a next level.
  18. Hello, dear Forum. Recently, I was toying with an idea for an intricate real time strategy game for use on maps provided Google Maps, particularly when utilising their road, building and traffic information: A police tactics simulator, much in the style of both the Police Quest and Emergency series, and further inspired by things like the Class 3 Outbreak Simulator, Prison Architect and Sim City. Much like in an Emergency game, you get to choose a building HQ on a designated coordinates of (preferably urban) terrain, from which you can patrol the streets on foot, car and air, respond to call-outs, execute warrants, organise raids and searches, handle hostage takings and public threats, surround buildings, cordon off areas, evacuate areas, participate in chases (both on roads and through pedestrian zones), set up road blocks, divert traffic, set up checkpoints, surveill and/or protect sensible locations, implement security zones, organise convoys and secure transports, police the traffic, police demonstrations, control large crowds, commence manhunts and rescue search operations, and even do some serious investigative detective work. All of it randomly spawned, all of it playable anywhere in the word on real life locations. The possibilities are - quite - endless in gameplay regards. The game would be designed to be either birds-eye view or (better yet) isometric; it would be 2- (or 2.5-) dimensional, with units, characters and effects consisting of 2d-sprites (themselves probably flash-based). There would be both a wide array of emergency units and civilian units randomly moving around the map on the roads and paths. Personally, I'd be really excited if such a complete game ever came out. There is one vital problem, however - I have little to no game development or coding experience. I don't know how to implement games like those on Google Maps (again, think of Class 3 Outbreak), nor do I know what game engines I could utilise to lay a basis for this kind of game. That's why I've decided to ask here: Can this sort of gaming concept popular? Could it take off? In how far would this be a sensible choice? And what engines or programmes can be used to make such a game a reality? How did other games implement Google Maps as a basis for their gameplay? Has this idea already crossed somebody's mind? Is anyone even remotely intrigued by this concept? Are there any games like this one out there already? Are there any in development? Thanks in advance for any tips, opinions and stimuli!
  19. Hello. I am having an hard time on defining the bounds of my isometric world. I have tried so many things but it just doesn't get any good. I couldn't find a way to debug the bounds and actually see them. I think that the setBounds(x, y, width, height) is on screen coordinates. I am not sure anymore? Can someone clarifiy me this and help me ? EDIT: In the docs of the isometric plugin http://udof.org/phaser/iso/doc/Phaser.Plugin.Isometric.Arcade.html I noticed there is a setbounds for isometric. However I cannot work with it correctly what am I doing wrong? @lewster32 It just bugs the whole thing game.plugins.add(new Phaser.Plugin.Isometric(game)); game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE); game.time.advancedTiming = true; game.iso.anchor.set(0.5,0.2); game.world.setBounds(0, 0, 0, 10000, 10000, 10000);
  20. Hello. I was able to create a hitbox on non-isometric as so: hitboxes = game.add.group(); hitboxes.enableBody = true; var new_dude = game.add.sprite(250,150,"walking_dude"); new_dude.scale.x = 2; new_dude.scale.y = 2; new_dude.addChild(hitboxes); hitbox1 = hitboxes.create(0,0,null); hitbox1.body.setSize(65,70,77,5); // basically a no-image sprite with physics body fixed to a character I can't translate this using isometric plugin because the cube doesn't get fixed to the character as it should. It falls to the ground. What is the actual difference between the two codes? Why does the first gets fixed to character and the second doesn't? I am on this mistery for hours hitboxes = game.add.group(); new_dude = game.add.isoSprite(30, 30, 0, 'walking_dude',0); new_dude.scale.x = 2; new_dude.scale.y = 2; new_dude.addChild(hitboxes); hitbox1 = game.add.isoSprite(30,30,0,null,0,hitboxes); game.physics.isoArcade.enable(hitboxes); hitbox1.body.setSize(300,300,300); The isometric plugins http://udof.org/phaser/iso/doc/Phaser.Plugin.Isometric.html
  21. Hello. I am trying to create isoSprites instead of normal sprites. I saw this on the phaser docs: Then I assume I can't add a Phaser.isoSprite using just game.create(). group_example = game.add.group(); group_example.classType = Phaser.isoSprite; group_example.create(3,3,"tree"); // in the console it shows an error in one phaser.js lines "var child = new this.classType(this.game, x, y, key, frame);" //"This object doesn't alllow this action" How can I do it then?
  22. Hello. I have included character movement in my phaser isometric game. This is the code that allows the character to move: // INSIDE CREATE // this.cursors = game.input.keyboard.createCursorKeys(); this.game.input.keyboard.addKeyCapture([ Phaser.Keyboard.LEFT, Phaser.Keyboard.RIGHT, Phaser.Keyboard.UP, Phaser.Keyboard.DOWN, ]); // INSIDE UPDATE // var speed = 100; if (this.cursors.up.isDown) { dude.body.velocity.y = -speed; dude.body.velocity.x = -speed; } else if (this.cursors.down.isDown) { dude.body.velocity.y = speed; dude.body.velocity.x = speed; } else { dude.body.velocity.y = 0; dude.body.velocity.x = 0; } if (this.cursors.left.isDown) { dude.body.velocity.x = -speed; dude.body.velocity.y = speed; } else if (this.cursors.right.isDown) { dude.body.velocity.x = speed; dude.body.velocity.y = -speed; } I can actually move my character, but two problems happen: The response time is not that good. I notice that when I click one of the arrow keys my character doesn't move exactly when I click it. Not like in this example: http://rotates.org/phaser/iso/examples/character.htm . Sometimes, when I just click one of the arrows and release it the character continues to move continously. I want my character not to be fixed to the isometric grid like in the example. That is why I have those extra commands in relation to the example I showed. Any help with this? Thank you
  23. Hello. I would like to know how a game such as street fighter or any kind of action fighting game could be made in phaser. I have lots of doughts related to this... How do you detect for collision between two characters? I mean collision between each other "actual body" and not the rect/square that composes the whole png? I am quite ignorant in realation to gaming development especially this... Can someone give my some ideas / tutorials on how to develop this kind of real time fighting games? Thank you.
  24. Greetings. I am using phaser isometric plugin. I generated a tilemap. I used this for loop for that ( similar to one the examples on the plugin examples): for (var xx = 0; xx < 500; xx += 38) { for (var yy = 0; yy < 500; yy += 38) { tile = game.add.isoSprite(xx, yy, 0, 'tile', 0, tiles_group); tile.anchor.set(0.5, 0); } } I would like to know how can I generate differente types of tiles having that tilemap as base: + something like this for the floor ( maybe even spawning randomly and replacing some the basic tiles); + to add walls and make buildings (basically tiles on top of over tiles); For adding different types of tiles that replace the grass ones and to add tiles on top of others, do I have to use the for loop method as the one above? If so how is that? Aren't there easier ways? Thank you
  25. Hey folks, wanted to share my upcoming Free HTML5 experimental game project GATHER you can now Follow On GameJolt! Discover the world, lead your minions, learn their language, and harvest sacrifice for the Gods. Free isometric adventure and exploration game set in an esoteric land. You control a Wraith sent to the idyllic land and must learn the rules of the world on your own. Powerless to affect the material realm, you must find arcane words to command and grow your minions, gather various items and discovering their use. The Krewski god demands sacrifice - but of what kind? And how will you appease them? Release Date: August 13