Search the Community

Showing results for tags 'background'.

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 42 results

  1. sending to back not working?

    I have a background image that takes up my whole window. It renders in front of my text, even when all in a group, and using sendToBack isn't working. It renders behind my graphics, which is good, but why isn't my text coming forward as well? create: function(){ this.titles =; //background,0, 'bg'); this.titles.add(;; //logo this.logo =, -200, 'logo'); this.logo.anchor.setTo(0.5); this.titles.add(this.logo); //text for instructions = {font: "26px Arial", fill: '#fff'}; this.text1,, 'Instructions: blah de blah de blah.',, this.titles); this.text1.anchor.setTo(0.5); this.titles.add(this.text1); //start button,,'start',this.startGame,this,1,0,1); this.startbtn.anchor.set(0.5); this.titles.add(this.startbtn); }
  2. Help with scales?

    So I've been following along with a tutorial to make my first game in Phaser. I'm trying to understand everything the tutorial is saying, but I can't find an explanation for everything. For example, the background image being used in the game is 400x32. However, the tutorial says the following: // Scale it to fit the width of the game (the original sprite is 400x32 in size) ground.scale.setTo(2, 2); My question is this; if the original size is 400x32, then why does seting the ground scale to 2, 2 work out? The game made in the tutorial works, and the ground does fit the width, but wouldn't the ground have to be 400x2 or something like that to have the proper width? I'll attach the tutorial file to this post so you can see the whole thing. I attached the tutorial text itself, and "part9.html" is the completed code that came with the tutorial. I don't think my code is needed to answer my question because I'm just following along with the tutorial, and it's just a less completed version of part9.html. I also have one more question regarding the ground. The tutorial says this: // Here we create the ground. var ground = platforms.create(0, - 64, 'ground'); Again, if the size is 400x32, then why does -64 work to put the ground at the bottom? What does 64 do in this code? I guess I'm just looking for an explanation of why the code I posted works. I understand the rest of the code in the file, just these 2 lines are what confuse me the most. I'd greatly appreciate any help I can get, thanks! Edit: I realize now that in the first line of code I pasted here, the 400x32 is talking about the size of the platform itself, not the whole background. Still, how does the (2, 2) scale a 400x32 platform to fit the whole background? tutorial.html part9.html
  3. Hi all, for example we have 3 type of images(400x600px) for background. and we have the game size (400x600px too). how to better realize the progressively selecting 3 types (or more) of images with auto-scrolling? 1) create 2 images and move their Y-coordinate, then just switching the nameFrame. I think that this decision will slow down the performance of the game. to move so big images. 2) create via tileSprite object and move tilePosition.y, create the bitmap of back1 + back2, scroll them. then re-create the bitmap... and etc. any ideas?
  4. Same background image in all states

    Hello, I'm new to the Phaser framework and I'm trying to have a single backgound and logo througout all the states in a phaser game. I add the background image in the very first state but when I start the next state using:"State2"); the background image disappears. Do I have to load the background image in every state? Thanks
  5. Adding gradient background

    Hi, I'm having issues trying to add a gradient to the background of my platformer game. I have worked out that, due to the WebGL renderer, the images used need to be either square or width = height x 2. My issue is that the stage is width = height x 4. I thought I could just add two image layers and align them next to each other with the "repeat" property set to "no-repeat" but this does not work. Even though the offset for my second level is correct the image is getting repeated over the first image. Is there a better solution. What I need is a gradient that goes from dark to light top to bottom but also changes from left to right so that it feels that night is falling as you walk through the level. I hope this makes sense, you help would be much appreciated. Thanks Dave
  6. Help with background image

    Hey I'm having a problem and I hope you guys can help me. I'm trying to put a background image for my stage. The stage is already done the way I want, but the background image is not showing up. This is the code: window.onload = function() { var game = new Phaser.Game(1200, 600, Phaser.AUTO, 'game-area', { preload: preload, create: create, update: update, render: render }); var manager = null; var emitter = null; var circle = null; function preload() { game.forceSingleUpdate = true; game.load.image('background', 'bg.jpg'); game.load.image('uni', 'uni2.png'); game.load.path = 'assets/particles/'; game.load.images(['red', 'blue', 'yellow', 'white']); } var uni; var background; function create() { manager =; background = game.add.tileSprite(0, 0, 1200, 600, 'background'); var data = { lifespan: 6000, image: ['red', 'blue', 'yellow', 'white'], vy: { min: 1, max: 2 }, blendMode: 'ADD', scale: { initial: 0, value: 0.3, control: [ { x: 0, y: 1 }, { x: 1, y: 0 } ] } }; manager.addData('basic', data); emitter = manager.createEmitter(); /*var well1 = emitter.createGravityWell(200, 100, -0.5);*/ var well2 = emitter.createGravityWell(900, 50, 10, 200); var well2 = emitter.createGravityWell(850, 400, 20, 200); circle = manager.createCircleZone(8); emitter.addToWorld(); emitter.emit('basic', 0, 0, { zone: circle, total: 6, repeat: -1, frequency: 20 }); // To make the sprite move we need to enable Arcade Physics game.physics.startSystem(Phaser.Physics.ARCADE); uni = game.add.sprite(,, 'uni'); uni.anchor.set(0.5); } function update() { circle.shape.x = game.input.x; circle.shape.y = game.input.y; uni.x = game.input.x-30; uni.y = game.input.y - 50; } }; I really do not know why this line of code "background = game.add.tileSprite (0, 0, 1200, 600, 'background') " is "breaking" the canvas. Not even the animation is running. Sorry for my bad english. Not my first language. Thanks
  7. Hello everyone! Is there a way to change canvas size to preloaded background image size? And only after that do the code at create function. Thanks.
  8. I am running my game as "transparent", directly in the body element, and setting a repeated tile background in the body through CSS. If I enter fullscreen mode through a button click that triggers, the background tiling disappears and there's just a black background. If I enter fullscreen mode "manually" (by physically pressing F11), the background remains. What am I missing about how to start fullscreen mode? How can I preserve the background?
  9. I am having trouble figuring out how to do a scrolling background using multiple background images. These images are not overlayed to create a parallax effect, but rather next to each other to create a changing background scene. My background is created using 20 different images who's order must be dynamically changed as the background scrolls. So I can start with A,B,C showing and as it moves I need to remove A and add D after C...and so forth. I tried using tweens, but it is almost impossible to to place the next image at the correct starting position without gaps forming between the images. I have tried using a tileSprite, but I can only figure out how to add a single texture to the tileSprite. I tried creating a texture dynamically using bitMapData and copying a image sequences to the texture and then scrolling the texture using a tileSprite, but that does not allow me to dynamically change the next image that should appear based on whatever is happening in the game. Also I have read that tileSprites have performance issues on mobile. In another post on this form Rich suggests doing the following: I have tried this by adding my stating ABC images next to each other in a group and then moving the group, but all that happens is that the group moves off the screen after a while. Could someone please explain to me how to implement what Rich suggests above? Or any other method to achieve my desired result?
  10. I'm developing point&click quest adventure (something like Machinarium) I have a background, for example, like on the bkg1.ipg I want to define some zone where the character can move. Example on bkg1-marked.jpg. Reaching the end of the red zone the character should stop. Also, it would be great to have ability to make it with some pathfinding like f.e. there are stairs on the background image and the character stays somewhere else on the "first floor". Player clicks on top of the stairs and the character goes there, according to the zone where he can walk Does Phaser have any tools for that?
  11. 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
  12. Hi All, Is it possible to draw something after babylon clear canvas and right before it draws all the 3d components? If not, is it possible to prerender the image use for the code following, instead of start loading it when I call this script? var url = ""; var background = new BABYLON.Layer("back", url, scene); background.isBackground = true; Thanks.
  13. Hey, It seems using CACHESTRATEGY_CANVAS changes the background color of the canvas: without caching on the left:
  14. Button Background Color

    How to set background color and text for a button in Phaser? Or it is possible only using Sprites?
  15. How can I create a PIXI.Container with a transparent background which I can render on top of my main stage container? My goal is it to have 4 layers which contain PIXI.Sprites and PIXI.Texts: layer 1 should be rendered beneath the player layer 2 should be rendered above layer 1 layer 3 should be rendered above the player and above layer 1 and layer 2 layer 4 should be rendered above everything else for debug information In case I can cannot use multiple PIXI.Container then how else could I achieve this effect?
  16. Hi , I start a few weeks ago with Phaser and I have some problems that I couldn't find a solution yet so what I actually want to do is this: I want where a "load bar" is loaded to se a background image instead of solid color so my code is : /* BOOT SIDE */ var boot = function ( game ) { }; boot.prototype = { init : function () { } , preload : function () { = "#6cb2f3"; ( 'loader' , 'sprites/images/loader.png' ); } , create : function () { // Set background for our game ( "Preload" ); } }; /* PRELOAD SIDE */ var preload = function ( game ) { }; preload.prototype = { preload : function () { // the other assets ... ( 'background' , 'sprites/images/background.png' ); this.preloadBar = this.add.sprite( 150, 550, 'loader'); this.load.setPreloadSprite(this.preloadBar); } , create : function () { console.log ( "Load the preloader .." ); ( "GameStart" ); } }; The loader image is working same as background color but instead of a background color i want to load an a image . thanks .
  17. Hello, I've been trying to create a nice background with many dots flying around which if close enough to another dot then "links" to that dot. Roughly like the picture attached. I have been able to create some dots flying around but I can't get the line stuff to work. I tried with Phaser.Line and then updating it with line.fromSprite(point1,point2,false) but when doing it with multiple lines, I'm not sure how to keep track of all the lines. Does anyone have any ideas of how to do this?
  18. Hi There, I am trying to create a sandbox world with tile sprite, where as the player moves left to right and top to bottom, and they only ever see the image once and it doesn't actually tile. I've read that you can do this by setting the world bounds and tile sprite size to the actual size of the image. When I do this it seems to work okay, however the moment I position the player it causes the background to offset in a way where I am seeing the tile repeat, which is not the desired effect. I was hoping somebody on the forum might have some insight or experience with how to do this? I've attached my code to show the problem I'm running into. Thanks for any help with this. 'use strict'; function Level() {} Level.prototype = { init: function() { this.drone = null; this.background = null; this.cursors = null; this.balloon = null; }, // preload: function () {}, initPhysics: function() {, 0, 3072, 1536);; // = 0.8; = 0.3;; = 100; = 0.8; }, addBackground: function() { this.background =, 0, 3072, 1536, 'background'); this.background.fixedToCamera = true; this.background.tilePosition.x = 0; this.background.tilePosition.y = 0; }, addDrone: function() { this.drone =, 0, 'drone'); this.drone.animations.add('fly');'fly', 30, true); }, addContactMaterials: function() { this.spriteMaterial ='spriteMaterial', this.drone.body); this.worldMaterial ='worldMaterial');, true, true, true, true); this.contactMaterial =, this.worldMaterial); this.contactMaterial.friction = 0.0; // Friction to use in the contact of these two materials. this.contactMaterial.restitution = 1.0; // Restitution (i.e. how bouncy it is!) to use in the contact of these two materials. this.contactMaterial.stiffness = 1e7; // Stiffness of the resulting ContactEquation that this ContactMaterial generate. this.contactMaterial.relaxation = 3; // Relaxation of the resulting ContactEquation that this ContactMaterial generate. this.contactMaterial.frictionStiffness = 1e7; // Stiffness of the resulting FrictionEquation that this ContactMaterial generate. this.contactMaterial.frictionRelaxation = 3; // Relaxation of the resulting FrictionEquation that this ContactMaterial generate. this.contactMaterial.surfaceVelocity = 0; // Will add surface velocity to this material. If bodyA rests on top if bodyB, and the surface velocity is positive, bodyA will slide to the right. }, enablePhysics: function() {; this.drone.body.clearShapes(); this.drone.body.loadPolygon('dronePhysics', 'drone'); this.drone.body.damping = 0.5; // this.drone.body.x = 100; // this.drone.body.y = 1400; // this.drone.anchor.setTo(0.5, 1.0); }, initCamera: function() {; }, addControls: function() { this.cursors =; }, create: function() { this.initPhysics(); this.addBackground(); this.addDrone(); this.enablePhysics(); this.addContactMaterials(); this.initCamera(); this.addControls(); }, moveHorizontally: function() { if (this.cursors.left.isDown) { this.drone.body.rotateLeft(100); } else if (this.cursors.right.isDown) { this.drone.body.rotateRight(100); } else { this.drone.body.setZeroRotation(); } }, moveVertically: function() { if (this.cursors.up.isDown) { this.drone.body.thrust(400); } else if (this.cursors.down.isDown) { this.drone.body.reverse(400); } }, moveBackground: function() { if (! { this.background.tilePosition.x -= (this.drone.body.velocity.x *; } if (! { this.background.tilePosition.y -= (this.drone.body.velocity.y *; } }, update: function() { this.moveHorizontally(); this.moveVertically(); this.moveBackground(); } // , // paused: function () {}, // render: function () {}, // shutdown: function () {} }; module.exports = Level;
  19. Hi, I have an application that uses BabylonJS: As you see, i have a skybox with 3D backgrounds and a ArcRotateCamera in my scene. This works well, but i need a second behavior in my scene. When the user select an option, i need to rotate only the object and the plane in my scene, but not the background. It is because i need a option to user add your own backgorund image, but users will upload only one texture, and the background skybox must be fixed to see only one face. Is it possible? How to make it? Thanks by the support!
  20. How to scroll a background smoothly

    Hi everyone! I'm trying to make a top down racing game, but I can't find a way to make a proper scrolling background. Every example I find is about tiles but my background is not something I can repeat horizontally. The background image is basically the track, so I need that image to be 100% width and repeated vertically, with an infinite vertical scroll. Can you please give me a hint? Thanks in advance! Damian
  21. Hi! Does anyone know how I might be able to load a different background each time a game is started? I have three different preloaded backgrounds and would like the game to select a random one each time the game begins. I'm a complete newbie to Phaser and any help/tutorials would be hugely appreciated! Can link code if needed. Thanks!
  22. Anyone who has looked at the code I use for playing sound, music or dialog will notice that I use howler.js for playing sound. Now this New Year, I made a resolution to investigate more the the sound capabilities of BJS - and I have been looking at this tutorial . Now there is one feature that I can't see in the BJS that howler.js has - sound sprites. See here - scroll down to "Define and play a sound sprite" to see an example. All the sounds are contained in one file - but it is possible to play just parts of the file (and if you click the "Play Winner" button and then click the other two buttons you can play all three sounds at the same time - sounds get mixed). So why might this be useful? Well for playing what I call scene environment sounds - like doors opening and closing, footsteps fading away, a scream, a bell sounding, a dog howl etc. Now I have a little collection of these types of sound (between 15 and 20 sounds) the longest of which is about 9 secs and the shortest is 1.2 secs. so rather than load 15 separate files it would be nice to load just one file that I could play small parts of - saves clutter, and download requests. So am I missing/overlooking this type of functionality in BJS with sound? Or is it a feature that could be added? And as a side question, what compressed sound format is playable on all OSs, devices and browsers - or is that a fantasy? cheers, gryff
  23. Tiled Background

    Hi! I'm new to phaser and i'm having some problems with my backgrounds not repeating (I don't want it to move, just repeat on X). Attached is what is happening. My code so far has preload : function(){ ... GAME.load.image('backgrounds', 'img/backgrounds.png'); ...},create : function() { ... BACKGROUND = GAME.add.tileSprite(0, -16, 160, 144, 'backgrounds'); ...}Do I have to programatically repeat the background on update? Thanks
  24. Stuck in map development using Tiled

    Hi guys, I need some help with this game I'm working on. I've created a platformer map with Tiled and I'm trying to get the game to work with phaser, but it just doesn't work. I get an error code saying: Phaser.Tileset - image tile area is not an even multiple of tile size and another error repeating 5 times saying Tilemap.createLayer: Invalid layer ID given: null The code (commented out codes are a little messy) is as follows. Please help. I also would like to make one of my tile maps solid and would like to know how. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>WeWork Game</title> <script src="//"></script> <script src="//"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(/*2084, 1989*/1200, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, /*render: render*/ }); function preload() { // game.load.image('platform', './objects/platform.png') // game.load.image('background', './background/background.gif'); // game.load.image('ground', './objects/platform.png'); game.load.image('stars', './objects/energy.png'); game.load.spritesheet('zero', './characters/zero.png', 50, 50, 2); game.load.tilemap('myTilemap', './background/tilemaps/tilemap.json'); game.load.image('myTileset', './background/tilemaps/bg.png'); } var player; //var platform; var cursors; var map; var backgroundLayer; var blockLayer; var patches; var stars; var score = 0; var scoreText; function create() { map = game.add.tilemap('myTilemap'); map.addTilesetImage('bg.png', 'myTileset'); blockLayer = map.createLayer('solids'); backgroundLayer = map.createLayer('cosmetics'); patches = map.createLayer('backing'); // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // A simple background for our game // game.add.sprite(0, 0, 'bg'); // The platform group contains the ground and the 2 ledges we can jump on //platform =; // We will enable physics for any object that is created in this group //platform.enableBody = true; // Here we create the ground. //var ground = platform.create(0, - 70, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) //ground.scale.setTo(1, 1); // This stops it from falling away when you jump on it //ground.body.immovable = true; // Now let's create two ledges //var ledge = platform.create(500, 350, 'ground'); //ledge.body.immovable = true; //ledge = platform.create(-300, 270, 'ground'); //ledge.body.immovable = true; // The player and its settings player = game.add.sprite(55, - 150, 'zero'); // We need to enable physics on the player game.physics.arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.body.gravity.y = 400; player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [1, 2, 3, 4, 5], 5, true); player.animations.add('right', [0, 1, 2, 3, 4, 5], 30, true); // Finally some stars to collect stars =; // We will enable physics for any stars that is created in this group stars.enableBody = true; // Here we'll create 12 of them evenly spaced apart for (var i = 0; i < 12; i++) { // Create a stars inside of the 'stars' group var star = stars.create(i * 70, 0, 'stars'); // Let gravity do its thing star.body.gravity.y = 300; // This just gives each stars a slightly random bounce value star.body.bounce.y = 0.7 + Math.random() * 0.2; } // The score scoreText = game.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#FFFFFF' }); // Our controls. cursors = game.input.keyboard.createCursorKeys(); //Command that uses camera to follow player //; } function update() { // Collide the player and the stars with the platform //game.physics.arcade.collide(player, platform); //game.physics.arcade.collide(stars, platform); // Checks to see if the player overlaps with any of the stars, if he does call the collectstars function game.physics.arcade.overlap(player, stars, collectstars, null, this); // Reset the players velocity (movement) player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150;'left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150;'right'); } else { // Stand still player.animations.stop(); player.animations.add('stand', [0, 1, 2, 3], true); player.animations.add('stand', [0, 1, 2, 3], true); } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -450; } if (scoreText.text == 'Score: ' + 120) { //delete(scoreText.text); game.add.text(50, 50, 'CONGRATULATIONS!!! You have collected ALL the Energy Orbs!', { fontSize: '32px', fill: '#FFFFFF' }); //game.add.text(25, 25, 'CONGRATULATIONS!!! You have collected ALL the Energy Orbs!', {fontSize: '50px', fill: '#FFFFFF' }); } } function collectstars (player, stars) { // Removes the stars from the screen stars.kill(); // Add and update the score score += 10; scoreText.text = 'Score: ' + score; } /*function render() { game.debug.cameraInfo(, 32, 32); game.debug.spriteCoords(player, 32, 500); }*/ </script> </body> </html>
  25. White background on phone

    Hi everybody, I followed a tutorial for a side scroller game and I tried it on two different android devices. It works but on my phone the background becomes white after like half a second of the game start, only the player sprite remains and goes on moving, while on browser and on the other device the background is fine. I noticed that if I set the player x velocity to 0 (thus not moving and all is still) the background has no problems. I'm using AUTO for the graphics, is it a matter? I tried WebGL but my phone doesn't support it. The background is on a layer of its own.