Search the Community

Hi everyone, I'm working on a javascript clone of superhexagon (https://www.superhexagon.com/) in order to learn to use Phaser 3. I was wondering what was the best way to generate the same shape multiple time with some rotation tweek and animate them. I need generate them, display them, once they display I need to be able to rotate them and scale them down. Once their scale <= 0 I need to hide and destroy them. I know I need to build a kind of Factory but I can't figure out how to do it with gameObj.add.arc Could you point a part of doc or source code I can dig in to find a solution? I created a pen here https://codepen.io/paulbonneau/pen/KGGbGO Thanks in advance ! Paul.

Hi there, I'd like to procedurally generate a height map in run time and don't want to save it to the image, as it costs in additional overhead. I'm looking for a way to use 2d array instead of image url (the array dimension may serve as a number of subdivisions). Obviously I don't want to rewrite the CreateGroundFromHeightMap function, because this function is works fine and there is no need at all to reinvent a wheel. What I'd expect for, is that CreateGroundFromHeightMap will consist of two functions - the basic one, which receives the two dimensional array, and the wrapper function which converts the image to the 2d array. I'm wondering how can I do it without changing the code of the framework (maybe I'm missing something), and why its's not done this way so far? P.s. If you will look at the implementation of CreateGroundFromHeightMap, you will notice that this is what actually happening there - first of all get the data from the image, and then build the height map. It's just not organized well (or, again, maybe I'm missing something).

Hi all, I'm trying to generate items randomly. For the moment it's ok, but I would like to add a little delay from every items. For exemple, I would like to find a way to generate them every 2scd. My code below : In the create() : emails = level2.add.group(); emails.enableBody = true; In update() function createEmails(mail) { var mail = emails.create(level2.world.randomX, 0, 'email'); mail.width = 50; mail.height = 40; // mail.name = 'mail' + x.toString() + y.toString(); // mail.checkWorldBounds = true; mail.events.onOutOfBounds.add(mailOut, this); var numY = Math.random() * 500 + 200; // Get a number between 200 and 500; mail.body.velocity.y = numY; var numX = Math.floor(Math.random() * 99) + 1; ; numX *= Math.floor(Math.random() * 2) == 1 ? 1 : -1; mail.body.velocity.x = numX; } function startGame(mail) { if (score >= 1000) { emails.destroy() } else if (scoreEnemy >= 1000) { emails.destroy() } else { createEmails(); } } Thanks by advance !

Hello! I'm creating infinite world arcade game with randomly generated levels ("Jetpack Joyride" style). P2 is used as physical engine. Level's floor and platforms are made from instantly generated sprite objects. Camera is static and I'm horisontally-moving sprites along the player. Right now I have some problems with level rendering: After some time of playing (around 30-40 seconds), discontinuities appears on the floor (something like 2-6 pixel spaces). There is an assumption that this is due to the fact that the coordinates of the sprite object specified in integer (eg, tile.x is 1696), and the coordinates of the sprite.body is float (eg tile.body.x is 1696.0000610351562). But these numbers do not differ by a few pixels. They are almost the same. Also, I've tried to do it with tilemaps (instead of sprite objects), but I can't find the way to make collisions with polygons (not the polylines). Thanks for help! var Level = { SETTINGS: { LINE_COUNT: 0, BLOCK_SIZE: 100, BLOCK_VELOCITY: -200, TEMP_FLOOR: {}, FLOORS_X: 0, FLOORS_Y: 1, BLOCKS_X: 0, BLOCKS_Y: 0, SEED: 0 }, createBlock: function(x, y, key, frame, collision) { this.blockElement = game.add.sprite(x, y, key, frame); this.blockElement.anchor.setTo(0.5); game.physics.p2.enable(this.blockElement, debug); this.blockElement.body.clearShapes(); this.blockElement.body.loadPolygon("Level_COLLISIONS", collision); this.blockElement.body.static = true; return this.blockElement; }, createFloorElement: function(Items) { Items.Settings.forEach(function(Item, Index) { Level.SETTINGS.TEMP_FLOOR = Level.createBlock( Item.x, Item.y, "Level", Item.frame, Item.collision ? Item.collision : Item.frame ); Items.Objects.push(Level.SETTINGS.TEMP_FLOOR); Items.Objects[Index].body.velocity.x = Level.SETTINGS.BLOCK_VELOCITY; if(Item.addedWidth) { Level.SETTINGS.FLOORS_X += Items.Objects[Index].width; } }); Items.Objects[Items.Objects.length - 1].createAfter = false; Items.Objects[Items.Objects.length - 1].update = function() { Level.updateFloorElement( Items.Objects[Items.Objects.length - 1], Items.Multiplier, Items.Objects ) }; return Level.SETTINGS.TEMP_FLOOR; }, updateFloorElement: function(element, multiplier, removeObjects) { if (element.body.x < -(Level.SETTINGS.BLOCK_SIZE/2) && !element.createAfter) { element.createAfter = true; removeObjects.forEach(function(object) { object.destroy(); }); Level.SETTINGS.FLOORS_X += -element.width * multiplier; Level.generateFloorElement(Math.random()); } }, generateFloorElement: function() { var FlatBlock = { Settings: [{ x: Level.SETTINGS.BLOCK_SIZE/2 + Level.SETTINGS.FLOORS_X, y: h - (Level.SETTINGS.BLOCK_SIZE/2), frame: "box", collision: "box", addedWidth: true }], Multiplier: 1, Objects: [] }; return this.createFloorElement(FlatBlock, true); }, init: function() { game.world.setBounds(0, 0, w, h); this.world = game.add.tileSprite(0, 0, w, h, 'Level_BG'); this.world.autoScroll(-150, 0); var floorWidth = Math.ceil(w/this.SETTINGS.BLOCK_SIZE) + 1; for(var i = 0; i <= floorWidth; i++) this.generateFloorElement(Math.random()); this.createLevelElement(Math.random()); }}

Ok, need some help/ guidance on what to do. What I have now is a sprite that is being generated randomly using simplex noise. I have successfully masked out the background so I'm left with just the terrain. I will be using this as my ground sprite for each level in my game. So my problem comes to collisions. If I am generating the level's terrain on the fly, how would I go about making player collide with it? I have found some fancy software that you can actually trace out the object and with a click it will generate a polygon shape .json file, but this only works if you have the image prior to using it - which I don't. Any guidance would be greatly appreciated.

Hi everyone, I'm developing a simple runner game, and I'm wondering what is the best way to implement endless landscape with curved track in Babylon.js. I've read a lot of articles about this, and figured out which techniques to use, but I still cannot figure out how to bring these things to work together. There are several main problems: 1. Generate the landscape 2. Generate the curved track 3. Hide the next landscape prefab so the player wont be aware of the generation process 4. Connect the generated prefab to the current landscape in way that will give a smooth transition. As I understand the best technique to use for the landscape generation is height map based on Perlin Noise generated texture. The question is how can I generate two ground meshes which can connect smoothly each to other. Is there any way to apply constraints on Perlin Noise algorithm? As for generating the track I thought about extrusion based on Bezier Curve points, but again, how can I generate it on the generated landscape? Finally I came to the conclusion that the best way to hide the generation of the next prefab is the turns along the track. I thought about track with hills next to both edges (in other words, the track should be a kind of canyon), and before the transition to the next prefab there should be a sharp turn which hides the prefab. Although a can think about "how it should be implemented" theoretically, a still cannot figure out how can I bring these things to work together. Any help would be appreciated!