Search the Community

Showing results for tags 'image'.

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.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 90 results

  1. Scaling an image down

    How do I scale, or resize, an image in javascript with phaser's framework? I have tried a few different things but they do not seem to be working. I am using a weapon method to throw a pokeball, this is just a test using some code from, so the other images aren't mine, I am just testing to try and get the pokeball to be thrown, but it is freaking huge right now! Please help me, I need the pokeball to be about 10x10 px because my character is 64x64. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('bullet', 'Pokeball.png', .01, .01); game.load.image('ship', 'tiles1.png'); } var sprite; var weapon; var cursors; var fireButton; function create() { // Creates 1 single bullet, using the 'bullet' graphic weapon = game.add.weapon(1, 'bullet'); weapon.scale.setTo(.5, .5); // The bullet will be automatically killed when it leaves the world bounds weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; // Because our bullet is drawn facing up, we need to offset its rotation: weapon.bulletAngleOffset = 90; // The speed at which the bullet is fired weapon.bulletSpeed = 400; sprite = this.add.sprite(320, 500, 'ship'); game.physics.arcade.enable(sprite); // Tell the Weapon to track the 'player' Sprite, offset by 14px horizontally, 0 vertically weapon.trackSprite(sprite, 14, 0); cursors = this.input.keyboard.createCursorKeys(); fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR); } function update() { sprite.body.velocity.x = 0; if (cursors.left.isDown) { sprite.body.velocity.x = -200; } else if (cursors.right.isDown) { sprite.body.velocity.x = 200; } if (fireButton.isDown) {; } } function render() { weapon.debug(); }
  2. I am trying to make a gate that opens when you click on it, and rotate it 90 degrees. I have accomplished this much, but how do I make it go back to it's original position once I click on it again? For instance: *clicks on gate, gate opens, 90 degrees.* *clicks on gate again, gate closes, -90 degrees from the 90 degrees that it went on previous click* Any help would be appreciated! html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Canvas Game</title> <style> html { background: black } canvas { margin: auto; } </style> </head> <body> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html> game.js var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.crossOrigin = 'anonymous'; game.load.image('gateopen', 'fenceleft.png'); } var sprite function clickSprite() { console.log("clickSprite"); sprite.angle += 90; } function clickGame() { console.log("clickGame"); } function create() { sprite = game.add.sprite(100, 100, 'gateopen'); sprite.anchor = {x: 1, y: 1} game.inputEnabled = true; sprite.inputEnabled = true; game.input.onDown.add(clickGame); } function update() { } function render() { game.debug.bodyInfo(sprite, 32, 32); game.debug.body(sprite); }
  3. Hi, I am trying to make a simple game and have been running into many problems. The problem I am facing now is that I cannot fix this error in my javascript. It says that it cannot read the 'setSize' property on my 'player' sprite, but it works perfectly fine on my other sprites. Next it says that it cannot read the 'velocity' property of the 'player' sprite, but when I comment out the 'setSize' property it works. I just cannot figure out what is wrong, have I misspelled something? I cannot seem to find the problem, so any help would be appreciated. Btw, it worked yesterday, but when I loaded it up today it was no longer working... Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Canvas Game</title> <link href="" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html { background: black } canvas { margin: auto; } h1 { font-family: 'Syncopate', sans-serif; color: rgb(194, 68, 91); text-align: center; margin: 0 auto; font-size: 25px; } h2 { color: white; font-size: 8px; font-family: 'Syncopate', sans-serif; } </style> </head> <body> <header> <h1>Crafty Heroes</h1> </header> <footer> <h2>&copy; SoulesteDesigns 2017</h2> </footer> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html> game.js: // VARIABLES // variables for static objects var walls; var house; var gate; var gate2; // variables for character var cursors; var player; var left; var right; var up; var down; var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); // ADD HOUSES function addHouse(image) { house = game.add.physicsGroup(); house.create(-250, -240, 'greenhouse'); house.setAll('body.immovable', true); } // ADD FENCES OR WALLS function addWalls(image) { walls = game.add.physicsGroup(); // fences up top walls.create(-90, -200, 'fencefront'); walls.create(5, -200, 'fencefront'); walls.create(100, -200, 'fencefront'); walls.create(195, -200, 'fencefront'); // fences to right walls.create(288, -200, 'fenceright'); walls.create(288, -135, 'fenceright'); walls.create(288, -70, 'fenceright'); walls.create(288, -5, 'fenceright'); // fences at bottom walls.create(5, 59, 'fencefront'); walls.create(100, 59, 'fencefront'); walls.create(195, 59, 'fencefront'); // fences to left walls.create(-91, -200, 'fenceleft'); walls.create(-91, -135, 'fenceleft'); // set the walls to be static walls.setAll('body.immovable', true); } // PRELOAD IMAGES FOR ITEMS, PLAYERS, ETC. function preload() { // preload player game.load.spritesheet('player', 'hero.png', 64, 64); // preload houses game.load.image('greenhouse', 'greenhouse.png'); // preload fences game.load.image('fencefront', 'fencefront.png'); game.load.image('fenceleft', 'fenceleft.png'); game.load.image('fenceright', 'fenceright.png'); // fence that has adjusted hit boundary game.load.image('gate', 'fenceleft.png'); game.load.image('gate2', 'fencefront.png'); // preload ground game.load.image('ground', 'tiles2.png'); } // ADD THINGS TO GAME function create() { // set area that the player may travel to, -250, 550, 550); // set background color game.stage.backgroundColor = ('#3c6f42'); gate = game.add.physicsGroup(); game.physics.startSystem(Phaser.Physics.ARCADE); gate = game.add.sprite(-91, -70, 'gate'); = 'gate'; game.physics.enable([gate], Phaser.Physics.ARCADE); // This adjusts the collision body size to be a 100x50 box. // 50, 25 is the X and Y offset of the newly sized box. gate.body.setSize(15, 90, -2, 3); gate.body.immovable = true; gate2 = game.add.physicsGroup(); game.physics.startSystem(Phaser.Physics.ARCADE); gate2 = game.add.sprite(-90, 59, 'gate2'); = 'gate2'; game.physics.enable([gate2], Phaser.Physics.ARCADE); // This adjusts the collision body size to be a 100x50 box. // 50, 25 is the X and Y offset of the newly sized box. gate2.body.setSize(90, 15, 3, 3); gate2.body.immovable = true; // adding the ground var ground = game.add.sprite(-224, -100, 'ground', 1); var ground = game.add.sprite(-224, -60, 'ground', 1); var ground = game.add.sprite(-224, -20, 'ground', 1); var ground = game.add.sprite(-224, 20, 'ground', 1); var ground = game.add.sprite(-184, 20, 'ground', 1); var ground = game.add.sprite(-144, 20, 'ground', 1); // add player image and place in screen player = game.add.sprite(-232, -100, 'player'); player.smoothed = true; player.scale.set(.9); player.body.setSize(30, 40, 16, 16); player.body.immovable = false; // player will "collide" with certain images like walls and houses player.collideWorldBounds = true; // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable([player, house, walls, gate], Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.p2.enable(player); // make sure to add this code to add items/walls/buildings addHouse(); addWalls(); // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character; } // what happens when player does something function update() { // player will now collide with these images rather than pass over them game.physics.arcade.collide(player, house); game.physics.arcade.collide(player, walls); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100;'left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100;'right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100;'up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100;'down'); } // player does not press anything else { player.animations.stop(); } } function render() { game.debug.bodyInfo(gate2, 32, 32); game.debug.body(gate2); game.debug.bodyInfo(player, 32, 32); game.debug.body(player); }
  4. Hi, when I create an empty image, I always get a 32x32 pixels image. //As you can see, I'm not passing any 'key' this.img =, y); Then, even after adding a rectangle to my Phaser.Image, its size is still 32x32. this.rect = new Phaser.Graphics(game); this.rect.beginFill(color, alpha); this.rect.drawRect(0, 0, 200, 100); this.rect.endFill(); this.img.addChild(this.rect); And if I manually set the image width and height properties, it would scale the image children. So, how can I create an empty Phaser.Image of a specific size? Edit: I'm not sure this is the right way of doing it, but I guess I could give this image a texture with the size I need.
  5. hi guys, I have a perhaps very basic question about loader, When we use loader to load an image, what has it been done, or been uploaded to where? It still delay on it's first render after loaded, unless using prepare plugin upload it to GPU.
  6. Hi everyone, I need to save an image from the game to the device. I'm using Phaser CE and I build it for mobile using Cordova. I tried using this plugin It works on web desktop and web mobile but it is not working on the cordova build for Android. How can I solve this?
  7. Problem with loading image

    Hello everyone, i am fairly new in phaser, here i want to make my bouncing around the box. but it's not loading. here is my code , var game = new Phaser.Game(800, 600, Phaser.AUTO, null, {preload: preload, create: create}); var circle; function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.stage.backgroundColor = '#008000'; game.load.image('circle', 'assets/myface.png'); } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); circle = game.add.sprite(50, 50, 'circle'); game.physics.enable(circle, Phaser.Physics.ARCADE); circle.body.velocity.set(150, 150); circle.body.collideWorldBounds = true; circle.body.bounce.set(1); } how to solve it ?
  8. Just in case someone needs it (cause I did). This configuration change the template to export json file compatible with Phaser game.load.atlas function Download from my repo: Just download the .sbx file and double click it.
  9. Image Angle/Rotation Wrong????

    Hello fellow HTML5 Game Devs. I have an interesting problem I am testing out some controls and different schemes for my game. I have an image of a fighter. It uses the arcade physics mode. When I press the UP arrow, it goes right.... Code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('background','../assets/images/deep-space.jpg'); game.load.image('fighter','../assets/images/Human-Fighter.png'); } var player; function create() { game.add.tileSprite(0, 0, 1920, 1920, 'background');, 0, 1920, 1920); game.physics.startSystem(Phaser.Physics.ARCADE); player = game.add.sprite(,, 'fighter'); player.anchor.set(0.5, 0.5); game.physics.arcade.enable(player); // Notice that the sprite doesn't have any momentum at all, // it's all just set by the camera follow type. // 0.1 is the amount of linear interpolation to use. // The smaller the value, the smooth the camera (and the longer it takes to catch up), Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); } function update() { player.body.velocity.x = 0; player.body.velocity.y = 0; player.body.angularVelocity = 0; if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { player.body.angularVelocity = -200; } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { player.body.angularVelocity = 200; } if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) { game.physics.arcade.velocityFromAngle(player.angle, 300, player.body.velocity); } } function render() { } If you can help, it would be greatly appreciated! Thanks!
  10. Hi Everyone, Completely new to Phaser so I am, embarrassingly, having problems even just scaling an image down. Code looks like this: var game = new Phaser.Game( 800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload(){game.load.image('cat', 'cat.png');} function create(){ game.stage.backgroundColor = "#8A2BE2"; game.add.sprite(0,, 'cat'); } function update(){ } Could Someone show me how to set the size of the image, cat? At the moment it is far too big. Thanks in advance
  11. Sprite vs Image

    In the phaser docs I can see that the biggest difference between Sprite and Image is that you cannot animate or add a physics body to an Image, but in Image properties you can see an animationManager. I'm a little confused about this. Anyone?
  12. Disable sprite smoothing?

    Hello all! I'm currently playing around with pixi.js and i have used to these things with normal canvas. I think this might have been asked many times, but how do i disable that image anti-aliasing from pixi.js? In normal canvas i could use context.imageSmoothingEnabled= false, but i think that this doesn't help here? - I have tried to set canvas css to image-rendering: pixelated; - i tried PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; but it doesn't help. - I also used antialising: disabled at the autoDetectRender -function. Anybody have any idea how to make it work? Or can you even disable it?
  13. I am having a really weird issue. I am creating a sprite from an image as follows: var grid1_texture = new PIXI.Texture.fromImage("whiteSquare.jpg"); Now this works fine and I am able to add this to the stage. I basically want to add all my images to a folder called resources. So I changed the code to this: var grid1_texture = new PIXI.Texture.fromImage("/resources/whiteSquare.jpg"); When I do this, I can see in Brackets editor that the link is being made however, the sprites do not get rendered on the stage. Please help!
  14. User Upload Image

    Hi guys, I am making an app that overlays a png over a video. I want the user to insert their face via webcam or upload. How do i allow user to upload image to phaser? Is it possible to use webcam? I am also building resize image UI, unless there is already one.
  15. Maximum image dimensions on mobile

    Is there a maximum image width or height for images imported with game.load.image on mobile? I have a sprite sheet that is 3080 pixels wide, and I think it may be the culprit of an error that is happening.
  16. Add images inside text? (Solved)

    Hello everyone, I'm currently creating my first Phaser game, so I'm relatively new to all of this. Basically what I'm trying to achieve is to create text with images inside. I'm thinking of building Strings like "This is a {{test}} String", which gets parsed in a way that the "{{test}}" part will be replaced by an image that has previously been loaded into the cache, using the identifier 'test'. I've been searching through the web in the past few days but didn't find anything that really helps me. For experimental purposes, the images I want to use in my Text are the Playstation input symbols (Cross, Square, Triangle and Circle). So, for example, if I add a text "Press {{cross}} to continue" to the game I want it to show the Cross-Symbol inside the text. Hopefully this explains enough. Does anyone have a good idea for a way of achieving this, or done this before? I will greatly appreciate any help! Kind regards and thanks for reading! Edit: Thanks for the answers! Just like mattstyles suggested, I figured I'd have to generate the text and image parts by parsing the string and then calculate each of the parts positions. For those who are interested in how I did it: First I parsed the string by splitting it at spaces (" "), iterating over the resulting array and depending on the "substring", either add a text or image to a previously defined group. Then I iterated over the groups children and set each of their x and y attributes after calculation the position, based on the all the previous children's widths, heights and a fixed anchor point. My result is a tooltip that follows the mouse pointer when hovering over certain objects. This is a very rough explanation. If anyone wants, I can provide some of my code with more precise information.
  17. ImageLayer and WEBGL problem

    Hello there! I have created a game with this amazing engine and Tiled app. I've added a scrolling background image layer to the map in Tiled, but when i modify the renderer to or in the function in the js file, the background imagelayer doesn't show up to me. If I use the canvas renderer than it's working fine. I've tested this three different application with the latest melonjs and boilerplate. Is it a known issue? It would be great if someone could give answer for me. Thanks!
  18. Load textures synchronously

    Is there anyway to load textures in pixi synchronously? Something like: var texture = PIXI.Texture.fromImage("bunny.png", onComplete);function onComplete() { var bunny = new PIXI.Sprite(texture);}I tried the following: var img = new Image();img.onload = onComplete;img.src = 'bunny.png';function onComplete() { var texture = new PIXI.Texture(new PIXI.BaseTexture(img));}But the code above gives me an error. Please let me know how I can make pixi work synchronously. Thank you in advance. EDIT: I also tried: but, it also gives me an error.
  19. cant load an image in phaer

    Greetings, I am trying to load a basic image into my HTML, java-script game and When I update my webpage nothing shows. I tried to follow phasers examples online but I am not sure what I'm doing wrong. Any help would be much appreciated. main.js index.html
  20. I want to process images on client side with JIMP (awesome library for image processing). I read png file with jimp, modify it with jimp, and then I've get stucked, because I don't know how to display it in pixi.js. The image read by jimp has bitmap property, and when I trying to create texture from it (with PIXI.Texture.from for example I gets errors). Thanks in advance!
  21. Hello! I finally decided to try to use TexturePacker. This tool looks promising. Now I am just rewriting tons of my code. Here's the question, I hope some of you, friends, might be able to help me: My old code: var background = game.cache.getImage(backgroundName); something.drawImage(background, 0, 0, background.width, background.height, 0, 0, gameWidth, gameHeight); Can I do the same thing, but with background image being placed into texture atlas which will also include multiple other images? How can I do ' var background = game.cache.getImage(backgroundName);', but with texture atlas use? It seems methods like getFrameData return only some info strings.
  22. I know that I need to use .buttonMode = true and .defaultCursor = "inherit", but I want to change the cursor to an image (like in CSS). defaultCursor = "url(" doesn't seem to be working. How can i achieve this?
  23. Create gradient filter on sprite.

    Hi, I've been struggling to create a gradient filter over an sprite using shaders. I have this and is working fine: On the other hand this code creates a nice gradient: precision mediump float; // start and end colors vec3 color1 = vec3(0.0,0.0,1.0); vec3 color2 = vec3(1.0,0.5,0.0); void main( void ) { vec2 uvs = vTextureCoord.xy; vec3 mixCol = mix( color2, color1, uvs.y ); gl_FragColor = vec4(mixCol, 1.0); } But I can't apply that gradient to the image as the first sample. I tried this, but it still generates a solid color on top of the image: precision mediump float; varying vec2 vTextureCoord; varying vec4 vColor; // start and end colors vec3 color1 = vec3(0.0,0.0,1.0); vec3 color2 = vec3(1.0,0.5,0.0); uniform sampler2D uSampler; uniform float customUniform; void main(){ vec2 uvs = vTextureCoord.xy; vec3 mixCol = mix( color2, color1, uvs.y ); vec4 fg = texture2D(uSampler, vTextureCoord); fg = vec4(mixCol, 0.5); gl_FragColor = fg; } I'm not very familiar with the Shaders specific stuff, but definitely I'm missing something here. Any help will be appreciated. Thanks, Rodrigo.
  24. hi i wanna check image(basetexture) loaded that load by altas... pixi call like under code var atlas_url = "data/packed/map_object.atlas"; PIXI.loader.add(map_name, atlas_url).load(onAssetsLoaded); // use callback var scope = this; function onAssetsLoaded(loader, res) { .... } i can't check basetexture loaded. how can i check loaded done..? thx