Search the Community

Showing results for tags 'container'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 49 results

  1. Hi, I am starting my first little game with Phaser and it's not going entirely smooth :D. I need to display a button with a word (dynamic text and size) , center it, and make it draggable. What I liked about Phaser is that there were tons of shortcuts and lab examples to do things quickly. So I tried to keep my code so concise as possible. These three problems took most of my time. Center the text in a button ( which is a graphic ) Putting these in a container and centering the container. Dragging the container. I would love to solve the first two simply by using setOrigin, or Phaser.Display.Align. But that wasn't so simple, it didn't work or I did not understand it enough. So I manually calculated those now. I was hoping someone could explain why the other attempts didn't work. But the remaining problem is now that only the left side of the button is draggable. Is this a phaser bug, or have I implemented this wrong. I made a fiddle with all my attempts. I commented the failed attempts. https://jsfiddle.net/mrklein/5verkbfg/52/ I hope the rest of the game will take less time, hopefully can someone point me what I did wrong so I can learn from this. kind regards.
  2. Hello, I am making a top down zombie shooter in Phaser 3. I am using the moveToObject function to make zombies follow the player. Now I want to make healthbars for the zombies. I have read that you can use containers to make the enemies and healthbars move together but I am having trouble to move the container with moveToObject. Is it possible to move a container with the moveToObject function or should I use something else instead?
  3. I have an enemy with a health bar. I want the health bar to move with the enemy. To do this I have made a container like this: var container = scene.add.container(x, y, [enemy, healthBar]); This work just as expected, the problem is when I try to move the container with moveToObject like this: scene.physics.moveToObject(container, player, speed); This does not work at all. How do I solve this?
  4. I've taken the SpaceInvaders example project and extended it - added different enemy types with animations, a different player, also with animations. I'm in the process of adding the three 'walls' or 'barriers' that were in the original game. I've set up each wall as a separate instance of a class that extends me.Container. Each container holds 4 rows of 12 images in a grid, similar to how the enemies are stored in a container with a grid. Currently all the walls are rendering properly, but it seems like the quad for each wall is offset to the midpoint of the wall (along the x axis). So when I fire, into visually what appears to be empty space, I'm actually hitting and removing a piece of the wall. See the attached gif to get an idea of what the issue is, I have debugging enabled so that you can see the boundaries for each piece of the wall and the walls themselves. The left edge of the collision quad for the wall container seems to be placed horizontally in the middle of the wall, instead of at the left edge. Am I missing something - a parameter for defining the left of the quad? Here's a snippet from play.js, the ScreenObject. onResetEvent: function() { ... var wallY = me.game.viewport.height - 140; console.log("Creating Left Wall"); this.leftWall = new game.Wall( 160, wallY, game.collisionTypes.LEFT_WALL ); this.leftWall.createWall(); me.game.world.addChild(this.leftWall, 2); console.log("Creating Middle Wall"); this.middleWall = new game.Wall( me.game.viewport.width / 2 - 16, wallY, game.collisionTypes.MIDDLE_WALL ); this.middleWall.createWall(); me.game.world.addChild(this.middleWall, 2); console.log("Creating Right Wall"); this.rightWall = new game.Wall( me.game.viewport.width - 192, wallY, game.collisionTypes.RIGHT_WALL ); ... } Here's the code for the Wall 'class': game.Wall = me.Container.extend({ init: function (left, top, collisionType) { // A Wall is composed of three sections, each representing // a different character. this.PREFIXES = ["wall_L_","wall_M_","wall_R_"]; // Each Character, or wall section, is cut up into a grid of // four rows and columns. this.COLS = 4; this.ROWS = 4; this.PIECE_WIDTH = 16; this.PIECE_HEIGHT = 16; // The width of an entire row (and the container itself), the width of each piece (cell) // or column in a wall section * the number of columns per wall section // * the number of wall sections this.wallWidth = this.PIECE_WIDTH * this.COLS * this.PREFIXES.length; this.wallHeight = this.PIECE_HEIGHT * this.ROWS; this._super(me.Container, "init", [left, top, this.wallWidth, this.wallHeight]); this.vel = 0; this.collisionType = collisionType; }, createWall: function () { // generate the entire wall, left to right, section by section, column by column for (var j = 0; j < this.ROWS; j++) { for (var c = 0; c < this.PREFIXES.length; c++ ) { for (var i = 0; i < this.COLS; i++) { // The name of the image var wallPiece = this.PREFIXES[c] + j + i; // The x and y coords for the wall piece var x = c * this.COLS * this.PIECE_WIDTH + i * this.PIECE_WIDTH; var y = j * this.PIECE_HEIGHT; // Add the piece as a child of the wall container. this.addChild(me.pool.pull("wall_piece", x, y, wallPiece, this.collisionType)); console.log("wall.createWall: (" + x + ", " + y + "); img: " + wallPiece); } } } this.updateChildBounds(); this.createdWall = true; }, onActivateEvent: function () { }, onDeactivateEvent: function () { }, removeChildNow: function (child) { this._super(me.Container, "removeChildNow", [child]); this.updateChildBounds(); }, update: function (dt) { this._super(me.Container, "update", [dt]); this.updateChildBounds(); } }); and, the onCollision method from laser.js (i've defined custom collision types) onCollision: function (res, other) { if (other.body.collisionType === me.collision.types.ENEMY_OBJECT) { me.game.world.removeChild(this); game.playScreen.enemyManager.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.LEFT_WALL) { me.game.world.removeChild(this); game.playScreen.leftWall.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.MIDDLE_WALL) { me.game.world.removeChild(this); game.playScreen.middleWall.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.RIGHT_WALL) { me.game.world.removeChild(this); game.playScreen.rightWall.removeChild(other); return false; } }
  5. Hi, I've added a particle manager to a container and created three emitters within it. The first emitter appears to inherit its position from the container as you'd expect, but the second and third emitters seem to be doing something weird in terms of positioning. I could try adding three managers each with one emitter, but was wondering if there was a reason why the three emitters in one manager doesn't work... Thanks, Gordon 'this' in the context below is the container. addEngines() { // create attached particle emitter this.particles = this.scene.add.particles('particleBlue') .setDepth(this.depth + 1); this.add(this.particles); this.emitterBottom = this.particles.createEmitter({ x: -19, y: 10, scale: { start: 0.5, end: 0 }, blendMode: 'ADD', frequency: 25, speed: 25, }); this.emitterTop = this.particles.createEmitter({ x: -19, y: -10, scale: { start: 0.5, end: 0 }, blendMode: 'ADD', frequency: 25, speed: 15, }); this.emitterFront = this.particles.createEmitter({ x: 20, y: -20, scale: { start: 0.5, end: 0 }, blendMode: 'ADD', frequency: 25, speed: 35, }); }
  6. Hi, I'm new to Pixi and couldn't find anyone with the same problem so here I am. I have a container full of black squares (drawn with Graphics) to hide parts of the map, like a fog of war. Some have their alpha set to 0 to reveal what's underneath (I know there are a million better ways to do that but MVP first, optimizations later). The problem is when I set cacheAsBitmap = true on the container, a weird diagonal line appears. This container can be very big and doesn't change much so it makes sense to cache it. Is there something I'm missing or is this a bug? I am literally doing nothing else to it, it'a at 0,0 of the parent container (the stage) and just contains Graphics objects. I'll try to reproduce the issue in a Codepen, thanks to anyone who can help.
  7. Hi, Can anyone tell me please what the best way to hide a "BETTING CONFIGURATION" container by clicking anywhere on the screen other than that container? Actually i'm detecting the mouse coordinates and comparing with the window / container coordinates, but it's good practice? public static isColliding(mouse: any, object: any): boolean { return !(mouse.x < object.x || mouse.x > (object.x + object.width) || mouse.y < object.y || mouse.y > (object.y + object.height)); } this.baseContainer.interactive = true; this.baseContainer.addListener('pointerdown', () => { if (Utils.isColliding(this.mouseCoord, betConfigUI)) { console.log('you are in window space'); } else { console.log('you are not in the window space'); } }) Thanks in advance!
  8. SamYan

    Doubt Container

    Hi. I just started in Pixi js. Can someone explain to me if a container is used to create different levels of game? Thanks in advance
  9. Hello everyone What is the most powerful and performance way to extends a PIXI class? Example from my side, I need the native PIXI.Container class but with more methods and properties, and here's how i proceed. PIXI.ContainerData = (function () { class ContainerData extends PIXI.Container { constructor() { super(); this.Sprites = {}; // others custom proprety for game obj }; get d() { return this.Sprites.d }; // return diffuse sprites get n() { return this.Sprites.n }; // return normals sprites //TODO: spine normal are arrays }; ContainerData.prototype.createJson = function(dataValues) { }; ContainerData.prototype.asignJson = function(dataValues) { }; //END return ContainerData; })(); I also know another way to extends functional prototyping. example: function ContainerData() { PIXI.Container.call(this); this.initialize(); }; ContainerData.prototype = Object.create(PIXI.Container.prototype); ContainerData.prototype.constructor = ContainerData; ContainerData.prototype.initialize = function () { this.Sprites = {}; }; I wondering about the cleanest and most efficient techniques to properly extend a class pixi? But especially on the most optimal way, knowing that JS need scan all the prototypes from the bottom to the top! The first technique worries me a little because in my console, Is look like that all the prototypes are cloned by reference and duplicate! So, i am interested in different techniques and advice. I am therefore looking for the most equitable approach between performance (speed) but also the readability for debugging. Thanks in advance.
  10. Hey all, I want to resize an element but not as often as I currently do it. Right now I have a project with an html element that gets resized on every frame and it runs on every update. game.gui.TextArea = me.Renderable.extend({ init: function() { this.textarea = document.createElement('textarea'); this.textarea.id = 'textHistory'; this.textarea.readOnly = "true"; this.textarea.disabled = "true"; me.video.getWrapper().appendChild(this.textarea); }, update: function() { videoPos = me.video.getPos(); this.textarea.style = 'width:' + (window.innerWidth - videoPos.width) + 'px; height:' + videoPos.height + 'px;'; } }); I'm concerned about this, this code will run way more often than it needs. Not sure about the performance impact but it only needs to run when the window size is updated. Is there a way I can piggyback on any melonjs functions that resize the canvas and only run it then?
  11. Hi guys, does anyone know how can I bring in front of all of my scene a container(popup) that was created in a previous scene? Is this possbile? Thanks.
  12. Hi guys, I'm trying to make some windows(pop-ups) that I will use in my game, these are for game over, game won or showing different text tips. Will contain text, buttons, sprites. What is the best way to achieve this? If I use a container, how can I show/hide it? This environment is new for me so I'm open to suggestions and ideas. Thank you!
  13. I am trying to get all the children of a container displayed inside a zone. var container = this.add.container(200, 200); var sprite0 = this.add.sprite(0, 0, 'box'); var sprite1 = this.add.sprite(0, 100, 'box'); container.add([ sprite0, sprite1 ]); var graphics = this.add.graphics(); var color = 0x00ffff; var thickness = 2; var alpha = 1; graphics.lineStyle(thickness, color, alpha); graphics.strokeRect(32, 32, 256, 256); graphics.fillStyle(color, 0); graphics.fillRect(32, 32, 256, 256); container.mask = new Phaser.Display.Masks.GeometryMask(this, graphics); However when they are outside and overlapping is seems like they are blending on each other? How should I proceed?
  14. When I extend a class, as shown here: export class AbstractType extends Phaser.GameObjects.Sprite and try to add a subclass of that type(AbstractType) into a container, symbols.add(symbol) I get the following error: TypeError: gameObject.once is not a function at Container.addHandler (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:57689:1) at Object.Add (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:100986:1) at Container.add (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:57790:1) at NumberBarController.addSymbol (/Users/schwarzj/Desktop/symphonymathhtml5/app/controllers/numberbar.controller.ts:807:12) at NumberBarController.layoutTask (/Users/schwarzj/Desktop/symphonymathhtml5/app/controllers/numberbar.controller.ts:481:12) at NumberBarController.onSoundsLoad (/Users/schwarzj/Desktop/symphonymathhtml5/app/controllers/numberbar.controller.ts:364:9) at EventEmitter.emit (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:1960:1) at Function.AudioController.sendAudioLoadComplete (/Users/schwarzj/Desktop/symphonymathhtml5/app/controllers/audio.controller.ts:300:44) at EventEmitter.AudioController.onSoundsLoaded (/Users/schwarzj/Desktop/symphonymathhtml5/app/controllers/audio.controller.ts:250:25) at EventEmitter.emit (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:1939:1) TypeError: child.setScrollFactor is not a function at ContainerWebGLRenderer [as renderWebGL] (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:135801:1) at WebGLRenderer.render (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:63279:1) at CameraManager.render (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:110694:1) at Systems.render (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:25617:1) at SceneManager.render (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:43412:1) at Game.step (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:105691:1) at TimeStep.step (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:102205:1) at step (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:64607:1) Any suggestions on how to move forward from here? Thank you!
  15. Hello, I am making an arena shooter multiplayer game with destroyable obstacles. You can see a pre-alpha here: http://mechsgame.s3-website.eu-west-2.amazonaws.com I have encountered a problem I'm not sure on how to proceed on and I surprisingly couldn't find any information on similar issues. My game will have tall walls and other obstacles which can potentially cover the player's character. I would like to make an effect similar to RTS games, where an outline or a shadow of the player is visible on top of the obstacle. See the below picture to get an idea of what I mean. My player container contains several sprites. I have a few ideas on how to do this, but I do not think they are optimal. One is rendering the player container to a texture and using that a mask for potential overlapping obstacles, along with a filter. Secondly is just placing a simple GUI marker that shows where the player character is. In both cases, I am unsure on how to detect overlapping sprites. Is there an established solution for such cases? Thanks!
  16. Hey guys, So I was fiddling around with Pixi's drag example on their website. I was wondering how can one drop the object in a container. For example I want to move and object and when it reaches near the container it attaches on top of it. I'm really scared of posting this since people might think I want someone to code it for me but I just want to understand the concept and the things I can use, so to say a guide. Would appreciate the help
  17. Hi all, I am trying to clone an PIXI Container so that it will have no relationship with the original one, except that they both should share the same prototypes - DisplayObject, EventEmitter, Object. But somehow I loose the original Container, see demo:
  18. Container and DisplayObject do not have their own size, its depends of its children, so If you add a Child and use anchor property and others properties related with size it will not work. What would be the best practice to do a simple layout like HEAD, BODY and FOOT? where I can define and limit the size of each "area" and all their children? I thinking in create a new class that inherit Container and overwrite the width and height properties to be static but I'm not sure it will be considered in the anchor logic. Any advice?, here an example how it does not work https://jsfiddle.net/fyt7zhvm/1/
  19. I was wondering what is the best way to handle shadow for a "character". I made a character and i want to put a shadow at the bottom a kind of "circle" with opacity, for convenience let's say it's gonna be a transparent PNG. The way i can think of : - (1) Just add the sprite to the game, this leads to duplicated calculations in the update part cause i have to update both the "character" sprite and his shadow; - (2) Add the shadow as a child sprite of the "character", this leads to having the shadow on top of the sprite instead of back to it; - (3) Add the "character" sprite as a child of the shadow sprite, this seems not logical, but it works somehow; - (4) Create a group and add both the shadow and the sprite, (havn't test it but most likely) this leads to define specific property to the group for the size, the position and the overflow boundaries for collision relative to the "character" sprite and the shadow; - (5) Using a filter (Shader) applied on the hole game, with my character position as uniform to render the shadow directly on the "groundLayer". What do you think please ? Is there a better way that i am missing ? Thanks.
  20. I'm fairly new to pixi.js and programming altogether. I am making a plugin that parses the xml save file of a sprite animation program and recreates the result in a game engine. The animation program uses bones for skeletal animations and the images (sprite parts) inherit the x, y, angle, scale_x, scale_y of the parent bone. The main idea would be to create sprites for the bones and the images, set up the bone inheritance to make the skeleton animation work correctly and then addChild the image sprites to the respective bone sprites. The only problem is that along with the aforementioned values, my image sprites also inherit the z_index of their container. The spriter does not limit the z hierarchy of the images to that of the parent bones, meaning that the user can change their z. I attempted to use worldTransform and worldAlpha for the parent bone values (keeping all the image sprites in a single container, thus controlling the z_index), but I am unable to get the parent bone's rotation. So, I either need to get all the values of the container and apply them correctly on the image sprites, or keep the image sprites inside the container and find a way to change their world z. Any suggestions would be appreciated and I thank you for your time.
  21. Hi there, first i'm more or less new to JS and Pixi (comming from php), so please be patient if i ask strange questions i want to write an relative huge game/app with many locations and animations (spine maybe) and want to realize it in an one page app. To keep the memory usage low i try to write an stage/container management class that only initialize the elements (sprites/animations/dom elements) on demand and dispose them afterwards. My question is now is there allready an solution for this hidden in pixi? Or does a best practise exist for this? Or does there exist maybe even a tutorial for such a thing? Like mentioned i tried allready to write an class, but this works only for better management, but not for less memory usage or performance (app.js) And till now only adding (dom)elements and displaying them works (with resize! ) but destroying or adding the sprites in the container wont work. so any suggestions or guiding directions how to solve the many locations issue?
  22. Hello there, What an amazing engine to render on webGL/Canvas! We are getting such a boost on performance thanks to this great library. Now, let's go to the point: We managed to partly migrate all our SVG animations to canvas using PixiJS. In order to do that, we had to parse our SVG so we could have a Container/Sprite/Textures structure that Pixi could manage and understand. We finally did it, and we have an Object like the onw you can see on the attached image: It is coming from the SVG you can find here: http://lab.pre.rtve.es/el-cuento/app/public/static/image/otto.svg So, what we have, is a lot of containers (what used to be groups in our SVG) and inside them, more Containers and finally Sprites containing Textures (what used to be paths). THE PROBLEM: We want to use Pixi's AnimatedSprite class so we can animate the mouth of our character, and when we do it, it works, but we lose the position of our Textures and they show at the upper left corner of our character. I can't see any position on this Sprites and Textures, so I guess they are just drawed where they are supposed to be and therefore when we try to animate them, we lose this relativeness to the parent and position. Any way to make them stay in place? Thank you very very much
  23. Hi ,is there some build in way to animate mesh and all its children together? Or I need to loop through all child meshes and apply animation separately? I have invisible mesh as container and I add children to it as I need group control. Works well for position changes but I need also to fade out children (opacity).
  24. When I first use PIXI.js I used to put every sprite onto the stage. Then I know that there is a Container class to hold the sprites. So I can add some sprites onto one container and other sprites to another container. After that I can add all the containers onto the stage and PIXI.js will handle the drawing for me. This is a very smart idea because I can use it to group sprites that I may want to scale together or delete together. But on some occasions I still have questions putting them together because I am afraid I may have a bad design. If deleting a container means it also delete everything inside the container, is it a good design to put sprites into a container if I want to delete them as a whole in the future? Does the computer need more resources if I use many levels of containers in my game? For example, if my player have several segments or several parts, like a plane with some shield or small added laser guns, is it better to group them into one container or just put them into the parent container? If I am building a train, is it better to put all the carriages of the train into a container as a whole, meaning the train is a container, or put them into the parent container? If robustness and efficiency are the main concern, what design rules should I follow?
  25. I am recently building a container / map with thousands of sprites in canvas. My player will be moving around among those sprites on a large map. But I find my game becomes very slow after I add too many (-about 5000+) units on the container. I think it may perform better if I only display units that are within the camera of my player as my player moves around on the map. But by doing this I will need to perform addChild / removeChild operation of pixi.Container many times during the game loop, because as my player moves new sprites come into sight and some sprites are out of sight. I am not sure if this is a good or bad decision. Maybe it’s too costly to do these operations in the ticker? But how can I draw as little in-sight sprites as possible otherwise?