Search the Community

Showing results for tags 'issue'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Found 48 results

  1. Phaser Blank White Screen

    I am trying to create my first game with phaser but Im running into the issue of a blank white screen. I dont see any issue with my code and Im running a local server with wamp. Their isnt any errors in the console, but no matter what I change the code nothing will appear on the screen. Thank you for your help. main.js index.html
  2. Hey there! I am using the latest Phaser.js from the official website. I am creating a game that is supposed to be 640x480 in size. var game = new Phaser.Game(640, 480, Phaser.AUTO, '', { preload: preload, create: create, update: update }); But the final canvas that is being rendered is 800x600 in size, which would be correct according to my Windows DPI settings of 125% (640*1.25=800, 480*1.25=600). A resolution of 1280x720 will get scaled up to 1600x900 and as a result, everything will look blurred. The website itself is not zoomed in or enlarged in any way using Chrome. How do I disable this "feature"? I want to be able to control the size of the game.
  3. For a day or two i have this weird issue that i can't fix. I am making a map with interactive trees. When i click tree i want it to change its texture to chopped trees. class Tree { constructor(sprite, deadTexture){ this.sprite = sprite; = 20; this.deadTexture = deadTexture; this.sprite.interactive = true; } chop(){ console.log("chop"); = 0; this.sprite.texture = this.deadTexture; } } let tree = new Tree( new PIXI.Sprite(textures.treesTexture), textures.choppedTreesTexture ); /*...*/ tree.sprite.on('click', () => { console.log("chop"); tree.sprite.texture = textures.choppedTreesTexture; }); this part works almost fine. I attached a gif that explains what is wrong. I don't know what to do and i can't find any help. What is causing such behaviour? if you need some more information about code, please let me know.
  4. Polygon collision does not work

    Hi Everyone! Hopefully someone can help with the issue I have faced. I am building a simple racing game and want to implement collision between car and other objects. I am using p2 physics. When I create primitive body objects (e.g. body.setRectangle) collision works fine, but when i use polygon (body.loadPolygon) i have created in PhysicsEditor the car just rides throw these objects without any collisions. I have tried building very simple objects to exclude "holes" in collide, creating collision groups but unfortunately any of these things helped. Attaching my code and a screenshot Car class: export default class extends Phaser.Sprite { constructor ({ game, x, y, asset }) { super(game, x, y, asset) game.physics.p2.enable(this, true) this.anchor.setTo(0.5) this.body.clearShapes() this.body.loadPolygon('physicsData', 'car') this.body.angle = -90 this.cursors = game.input.keyboard.createCursorKeys() this.velocity = 0 } Obstacle code: create () { = 0.8 =, 0, 2880, 1620, 'map'), 0, 8640, 4860), 3) this.mapAbove =, 0, 'race'), true) this.mapAbove.body.clearShapes() this.mapAbove.body.loadPolygon('physicsData', 'race') = new Car({ game:, x: 3800, y: 3750, asset: 'car' }) } Also i am using this stuff as skeleton - Could troubles be in incorrect packages? Looking forward for Your reply, Thanks!
  5. I am using masks for eyes in my game. I have a black background for the eye and a white pupil. The white pupil uses the black background as a mask so that when the character blinks the pupil is hidden. The issue is that my white pupil is rendered grey (if i disable the mask the pupil is rendered white which is correct). I have looked at the alpha and it is set to 1 so it does not seem to be a transparency issue. Just wondering if anyone else has had into this issue?
  6. Hi Guys, The issue I'm having at the moment is with zooming and pinching a web page (pinching on laptops) with my game in it - causes the game to zoom in and therefore change the UI of the game. A demo can be seen here of the issue, simply zoom/scroll to see various bugs appear throughout the game once a new game has started: I can't seem to find just one solution for disabling zoom and pinch altogether on all browsers - am I missing something here? Any clues or tips, the renderer is PixiJS. Thanks, Jammy.
  7. Video won't play on Chrome Android

    Hello, I'm doing a project with Phaser (v2.7.5) and I have some issues trying to play videos with Chrome on Android (58.0). I've tried with several different tablets, it does not seem the problem is related to the device. The same code is working on desktop (Chrome & Firefox) and on Firefox Android. This is basically my code : var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create}); function preload() {'videodemo', 'video/reward.mp4'); } function create() { var videodemo ='videodemo'); videodemo.addToWorld(game.height/2, game.width/2, 0.5, 0.5);; } I've tried the following workaround, which I found on another topic. The video plays on Android if I test the code with codepen but for some reason it doesn't if I upload it on my own server. Any ideas ? Thanks
  8. Hello, I'm creating a game composed by a map (created with Tiled) and, at the bottom, a menu with a list of building. The list of building is draggable horizontaly (to see all buildings). To drag all buildings at the same time I add all the buiding's sprite in a graphics component. I also put a black background with alpha to 0.25. Every component has a fixedOnCamera to true. Here is my BuildingMenu class TypeScript code: public static create(game: Phaser.Game) { let background =, 0); background.beginFill(0x000000, 0.25); background.drawRect(0, game.height - 64, game.width , 64); background.endFill(); background.fixedToCamera = true; let buildings = ["building1", "building1"....]; let bounds = new Phaser.Rectangle(-game.width / 2, game.height - 64, game.width, 64); this.buildingsGroup =, game.height - 64); buildings.forEach((building, index) => { let spriteBuilding = game.add.sprite(index * (64 + 2), 0, building.getName()); spriteBuilding.width = 64; spriteBuilding.height = 64; spriteBuilding.fixedToCamera = true; //this.buildingsGroup.addChild(spriteBuilding); }); this.buildingsGroup.width = game.width; this.buildingsGroup.height = 64; this.buildingsGroup.inputEnabled = true; this.buildingsGroup.input.allowHorizontalDrag = true; this.buildingsGroup.input.allowVerticalDrag = false; this.buildingsGroup.input.enableDrag(false, false, false, 100, bounds); this.buildingsGroup.fixedToCamera = true; } public static update(game: Phaser.Game) { += 1 } My problem is when I uncomment the line "this.buildingsGroup.addChild(spriteBuilding)" item are affected by the camera but can be dragged of course. The background is not affected.... I can't figure out why... Can anybody help?
  9. debug doesn't seem to work?

    I've recently been coding an infinite runner game in which the player is allowed to attack freely as they encounter obstacles and enemies. this being said, there is various objects that use collisions and physics bodies for collision detection and i have tried everything i have found to render the debug boxes to no avail. Attack = function() {, game, player.x + 15, player.y, 'Attack'); game.add.existing(this); game.physics.enable(this, Phaser.Physics.ARCADE); this.animations.add('attack');'attack', 8, false, true); this.body.setSize(50, 80, 30, 0); this.body.allowGravity = false; this.body.immovable = true; * attackSpeed, setAttack, this); curAtk = this; }; //these set the variable 'Objects' Attack.prototype = Object.create(Phaser.Sprite.prototype); Attack.prototype.constructor = Enemy; //this checks conditions specific for the Attack Object made through the class every update. Attack.prototype.update = function() { this.x = player.x + 15; this.y = player.y;; }; here is specifically the attacking object spawn which spawns the attack object, and on the last line of actual code i try to call the debug information to render. I'm not sure that this is the way to do it, but i have added the "render: render" to my game initialization and tried to call the code in that as well plus using the references within the examples as well and i cannot for the life of me figure out why the body's are not debugging allowing me to fine tune the desired collision areas. Any thoughts or ideas are welcome. if more code is needed of what i have i can upload my JS files. Also a quick note, there are no error messages. and everything runs as expected aside from the debugging aspect and proper hit-box areas.
  10. Help With localstorage api

    hey guys I'm currently after completing a tutorial at . I have been working on my knowledge with phaser. anyways, after finishing the tutorial i decided to polish the game. I am new to the localstorage api and was looking for some help. here is my code for the highscore. it currenly doesnt work with localstorage and im not sure why. Any help is much appreciated init: function(score) { var score = score || 0; localStorage.setItem("score", this.highestScore); this.highestScore = this.highestScore = localStorage.getItem("score"); this.highestScore = Math.max(score, this.highestScore); if(this.highestScore === null) { localStorage.setItem("score", "0") this.highestScore = localStorage.getItem("score"); } }, Here is the full file. Just incase its needed var SpaceHipster = SpaceHipster || {}; //title screen SpaceHipster.MainMenu = function(){}; SpaceHipster.MainMenu.prototype = { init: function(score) { var score = score || 0; localStorage.setItem("score", this.highestScore); this.highestScore = this.highestScore = localStorage.getItem("score"); this.highestScore = Math.max(score, this.highestScore); if(this.highestScore === null) { localStorage.setItem("score", "0") this.highestScore = localStorage.getItem("score"); } }, create: function() { //show the space tile, repeated this.background =, 0,,, 'space'); //give it speed in x this.background.autoScroll(0, 10); //start game text var text = "Tap to begin"; var style = { font: "30px Arial", fill: "#fff", align: "center" }; var t =,, text, style); t.anchor.set(0.5); //highest score text = "Highest score: "+this.highestScore; style = { font: "15px Arial", fill: "#fff", align: "center" }; var h =, + 50, text, style); h.anchor.set(0.5); }, update: function() { if( {'Game'); } } };
  11. I need help. I was following a tutorial online for the Phaser States, and I did everything right (I think), but obviously, I've made some changes myself to fit to what I kind of want. Here is the code: var loadState = { preload: function() { // Load the BG Images (Before so we can have an awesome looking loading screen) game.load.image('redPlanet', '././assets/images/redplanet.png'); game.load.image('spaceBG', '././assets/images/spaceBG.png'); // Preload the one character we need to look awesome! game.load.image('scavenger', '././assets/images/Scavenger.png'); // Add the loading label and the character, so the player doesn't think the game crashed. var background = game.add.sprite(0, 0, 'spaceBG'); background.scale.setTo(0.6); var character = game.add.sprite(80, 150, 'scavenger'); var loadingLabel = game.add.text(0, 0, 'Loading...', {font: '30px Courier', fill: '#fff'}); loadingLabel.alignTo(character, Phaser.RIGHT_CENTER, 16); // Load the Planet Images game.load.image('planet1', '././assets/images/Planet1.png'); game.load.image('planet2', '././assets/images/Planet2.png'); game.load.image('planet3', '././assets/images/Planet3.png'); game.load.image('planet4', '././assets/images/Planet4.png'); game.load.image('planet5', '././assets/images/Planet5.png'); game.load.image('planet6', '././assets/images/Planet6.png'); game.load.image('planet7', '././assets/images/Planet7.png'); game.load.image('planet8', '././assets/images/Planet8.png'); game.load.image('planet9', '././assets/images/Planet9.png'); game.load.image('planet10', '././assets/images/Planet10.png'); game.load.image('planet11', '././assets/images/Planet11.png'); game.load.image('planet12', '././assets/images/Planet12.png'); game.load.image('planet13', '././assets/images/Planet13.png'); game.load.image('planet14', '././assets/images/Planet14.png'); // Load the pause button game.load.image('pauseButton', '././assets/images/pauseButton.png'); } create: function() { game.state.start('menu'); } } And that is not all. Every single one of my state files has an error that says: Expected '}' to match '{' from line 1 and instead saw 'create'. Missing Semi-Colon. Unrecoverable Syntax Error (93% Scanned) Please help me, as this was going to be the way I made my game because I really like how organized states are!
  12. Hello, I just encountered the following issue. In two different games I am using two ways of updating the game time shown in the UI - a timer and a timed event. I've just discovered that changing the PC's clock by -1 hour (say it's 10:00 AM, I roll it back to 9:00 AM) causes the updating to stop. This issue is not present if I roll the clock forward (from 10:00 AM to 11:00 AM). I found a way around this by using setInterval and clearInterval, but I'd like to know if a Phaser internal fix or workaround exists, or maybe if I need to do something differently. Here is the case when using a timer: private startTimer(): void { this.gameTime = 0; this.timer =; this.timer.loop(Phaser.Timer.SECOND, () => { this.updateTime(); }, this); this.timer.start(); }; And here is the case when using a timed event in the second game: this.timeElapsed = 0;, () => { this.updateTimer(); }, this); Both calls are made in the play state's create function. This is on a Windows 10 PC.
  13. Brick-Bricker

    Hey I am currently polishing off my Breakout or Brick-Breaker game (whichever you prefer to call it). I am trying to add music to the game when the start button is pressed and then sound effects every time a brick is destroyed. Unfortunately Phaser keeps saying Key "Sample" is not found in cache. I have tried using Phasers examples and basing the music off that but to no avail. I am new to programming with Phaser and would really appreciate the help. When the game is finished i will post a link. Thanks in Advance Pheaset here is my code var game = new Phaser.Game(480, 320, Phaser.AUTO, null, { preload: preload, create: create, update: update }); var firework;; var music = Phaser.Sound; var lives = 1; var livesText; var lifeLostText; var ball; var paddle; var bricks; var newBrick; var brickInfo; var scoreText; var score = 0; var playing = false; var startButton; function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.stage.backgroundColor = '#eee'; game.load.image('ball', 'ball.png'); game.load.image('paddle','paddle.png'); game.load.image('brick', 'img/brick.png') game.load.spritesheet('ball', 'img/wobble.png', 20, 20); game.load.spritesheet('button','button.png', 120, 40);'Good-Riddance', 'Good-Riddance.mp3'); } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); startButton = game.add.button(*0.5,*0.5, 'button', startGame, this, 1, 0, 2); startButton.anchor.set(0.5); music ='Good-Riddance') ="Good-Riddance")["Good-Riddance"]); if(playing === true) { }else{ music.mute = false; }
  14. Cant add Child to background

    I cant figure out how i would be able to add a function as a child, the function spawns items at the top of the screen and then they fall to the bottom where they will be killed. But if i add a background the items spawn behind that background. i cant figure out how they will be able to spawn infront of the background any help would be greate! Here im trying to add the items as a child Potato.SpawnPotato = this.mainBackground.addChild(game.potato); And this is the code which holds game.potato Potato.item = { spawnPotato: function(game){ = false; game.physics.startSystem(Phaser.Physics.ARCADE) game.physics.arcade.gravity.y = 200; var dropPos = Math.floor(Math.random()*650); var dropOffSet = [-27, -36, -36, -38, -48]; var potatoType = Math.floor(Math.random()*5); var potato = game.add.sprite(dropPos, dropOffSet[potatoType], 'FallingPotato'); potato.animations.add('anim', [potatoType], 10, true);'amim'); game.physics.enable(potato, Phaser.Physics.ARCADE); potato.inputEnabled = false; potato.anchor.setTo(0.5, 0.5); potato.rotateMe = (Math.random()*4)-2; game._potatoGroup.add(potato); potato.checkWorldBounds = true;, this) }, removePotato: function(potato){ potato.kill(); } }
  15. Hi everyone. I'm creating a game with Phaser for a University project and I'm trying to use Flaxis'plugin slick-ui in my project ( I'm struggling since hours trying to get it to work. I initialized the variable slickUI, containing the plugin SlickUI, like this (following the code of a preview posted by Flaxis). In my script in index.html: window.onload = function(){ var game = new Phaser.Game(960, 640, Phaser.CANVAS,'', { preload: preload}); //adding slickUI plugin var slickUI; function preload() { slickUI = game.plugins.add(Phaser.Plugin.SlickUI); slickUI.load('assets/kenney/kenney.json'); //directory where I put kenney.json } //... } As I run this code I get no error in the console log. I thought that var slickUI, exactly as var game, was a global variable so I could be able to use it in any other .js file, but I guess I'm wrong. I tried to use slickUI variable in a file called MainMenu.js file (which is a game state, that is called after Boot.js and Preloader.js), to create a panel to be visible. My code is this: Game.MainMenu = function(game) //crea uno stato di Game { }; //prototype Game.MainMenu.prototype = { create:function(game){ var panel; slickUI.add(panel = new SlickUI.Element.Panel(8, 8, 150, game.height - 16)); //these two lines I took from the example on github }, //... } But when I try to use the variable I instantiated in the index file, that is slickUI, I get the error on console log that variable "slickUI is not defined". I tried to define and use that variable as "this.slickUI", "game.slickUI", "" but none of these worked. I also tried to instantiate the plugin directly in the MainMenu.js, but it didn't work either. So, my question is: how do I get to instantiate/call the global variable slickUI which contains the plugin, in order to be able to use it in every other .js file in the project? Your help would be so appreciated.
  16. Hi, I ran across an issue with the setTileIndexCallback method involving it triggerring multiple times. I have a health potion tile in my game and I would like for it to disappear when my player collides with it as well has add 1 to a variable storing the amount of health potions the player has collected. The problem is that the health potion doesn't disappear until my player's sprite actually collides with the health potion tile but the callback function triggers as long as part of my player is touching or inside the 32x32 box around the health potion, which is smaller than 32x32. Therefore, my variable the stores the amount of health potions collected increases infinitely as long as my player is in the 32x32 box but hasn't touched the health potion image. Here's my code relating to this issue: Inside the create function: var healthPotionCounter = 0; map.setTileIndexCallback(9, function(){this.collectHealthPotion(game)}, this); Inside this.collectHealthPotion(game) function: map.putTile(-1, layer1.getTileX(player.x), layer1.getTileY(player.y)); healthPotionCounter += 1; Help is much appreciated! Thank you!
  17. Hi people, I've recently just started using the Phaser framework 2 days ago and I am developing my first game, an RPG with phaser...I recently just ran into an issue in my character select state where my scope(this) becomes the window scope and does not recognize my internal functions. Any insight on my issue would be extremely helpful. thank you!!!
  18. I'm using GameMaker: Studio, and currently facing a problem with sound in Mobile Native HTML5 browser, Sound is Working in PC browsers, like FireFox, EDGE(Internet Explorer), but not working in Mobile Native Browsers, i have tested it in my Android and Windows Phone, Any help would be really Appreciated,
  19. How to export .babylon from unity steps
  20. Hello all, So I have been searching and I can't seem to figure this one out. I am trying to find out what the best way to end my game is? I can't seem to come across something such as scene.end() or something of that nature. What is the best practice for where I should put my winstate conditional in babylon.js? It seems like when I put it in my engine.runRenderLoop the game appears to freeze and I am unable to append anything to the page or break out of that runRenderLoop.
  21. I been having an issue while looping through 2 groups and got this error, what I think this means is one of the objects is undefined. Uncaught TypeError: Cannot read property 'width' of undefined This is code (which is in Typescript) that causes the error: for (var i = this.tris.children.length - 1; i >= 0; i--) { for (var s = this.squares.children.length - 1; s >= 0; s--) { if(Overlap(this.tris.children[i],this.squares.children[s])){ this.BreakTris(this.tris.children[i]); this.BreakSquare(this.squares.children[s]); } } } The error is given specifically for the Overlap function. Two loops which go through 2 groups in order to compare each sprite of both groups to each other and check for Overlap, which is as follows: function Overlap(spriteA, spriteB) { var boundsA = (spriteA instanceof Phaser.Sprite) ? spriteA.getBounds() : spriteA; var boundsB = (spriteB instanceof Phaser.Sprite) ? spriteB.getBounds() : spriteB; return Phaser.Rectangle.intersects(boundsA, boundsB); } I don't see what i'm doing wrong? Thanks for reading.
  22. I noticed that input.onUp is dispatched when the canvas event mouseout is fired. Phaser version 2.4.6. When mouseout is triggered on the canvas element, Phaser.Mouse.onMouseOut is called, which stops the mousePointer. Phaser.Pointer.stop then dispatches input.onUp. This is confusing because onUp can be dispatched even when the pointer is not actually released, but rather when the pointer simply leaves the canvas. Phaser.Pointer.Stop is also called when an active pointer leaves a touchscreen. It would make sense for onUp to be dispatched in this case because you can't tell whether the pointer was released at the edge of the screen or dragged off the screen completely. It doesn't make sense for a pointer that was never down to begin with. Thoughts? Is this an issue, or is this intentional? *Note: You can write around this strangeness without a problem. You are given the DOM event that triggered a Phaser event, so you can check to see if the event was a mouseout before taking action. I just want to make sure everything is behaving the way it should before writing around a problem. An example of a game that demonstrates this behavior. Note that the console will log the type of DOM event that triggered the onUp event. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create }); function create() { game.input.onUp.add(function(pointer, event) { console.log("Up!", event.type); }); }
  23. Got a game that plays sound as it should do on desktop, and iOS is pretty good too. However Chrome on Android is proving difficult. (Been testing primarily with a Galaxy S6 but the problem is common across a range of devices) The issue I am experiencing is that when the first sound tries to play there is a delay in the region of half to a whole minute before it eventually makes a noise. After the first sound plays the rest seem to work fine. We have a screen that needs user interaction to get through that is supposed to in the process unlock sound but for the purposes of this I've enabled the chrome://flags/#disable-gesture-requirement-for-media-playback so that it doesn't have any impact on the this issue. I can confirm that if I get the game to play a sound after it finishes the initial load with this flag enabled it will do so without user interaction, eventually - there is still the long delay. The game is using webAudio and sound spriting. All the sounds are added to phaser and spriting maps set up before any attempt to play sound is made. The sound file is being successfully loaded and is in ogg format to minimise decode time. If the game is left alone for a while before trying to play a sound the sound plays without delay. Does anyone recognise this problem? Any advice at trying to resolve it would be greatly appreciated.
  24. Hi guys, Help me please to improve my plugin! Codepen: GitHub: See the error: ( "if i scroll once in the canvas, then click anywhere outside, the canvas also scroll randomly" - Wagyl ) Thanks in advance and Merry Christmas! Nicholls
  25. Hi there, i'm facing a weird problem. I'm using a sprite to display an image (1280px * 80px). The available are to show the image is shorter than image. At this point, i compute ratio between image size and area size to get the initial scale factor for sprite. When i run the game on my computer with Chrome, in "tablet mode" with a screen size of 1024*575px (same size as my samsung tablet), the image is fully displayed. I'm happy (Droopy style) When i run the game on my tablet (Samsung galaxy Tab 3 7.0), the image is a bit bigger and is not fully displayed. I log all values (elements sizes, image/area ratio) and values are identical. I don't understand why image is rendered differently with same scale value. What did i miss? Can you help me, it's driving me crazy. Thx. Gauthier.