Search the Community

Showing results for tags 'image'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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 89 results

  1. Hi everyone, I have now been stuck with a problem for a while and figured I would ask here to see if anyone knew how to fix it. I have a scene where you can dynamically add your own images to it, that will than be transformed into a material with the images as the diffusetexture. The transforming happens by using the raw image data to create the texture with the function: BABYLON.Texture.LoadFromDataString - it looks something like this: material = new BABYLON.StandardMaterial("imageMaterial", scene); var imgTexture = new BABYLON.Texture.LoadFromDataString("data:" + Math.random(), RAW IMG DATA, scene); material.diffuseTexture = imgTexture; This all works fine, the problem that I am having is that I want to be able to save the scene and load it again later. But it seems the the SceneSerializer doesn't save the texture/material information (the raw image data), so that when I load the scene I get the error: Materials: Name: groundMaterial babylon.custom.js:5 Uncaught TypeError: Cannot read property 'width' of null at E (babylon.custom.js:5) at n.createTexture (babylon.custom.js:5) at new i (babylon.custom.js:11) at babylon.custom.js:11 at Function.t.Parse (babylon.custom.js:2) at Function.i.Parse (babylon.custom.js:11) at Function.t.Parse (babylon.custom.js:2) at Function.r.Parse (babylon.custom.js:17) at Function.t.Parse (babylon.custom.js:14) at Object.load (babylon.custom.js:28) Looking at the saved serialized scene, I can also see that it is not saving the raw image data, so I have customized the serialize() function to find and save the data when the scene is saved, then the idea was to unpack it when it loads somehow. But I still can't stop the above error from happening. Is there anyone that knows a good way to do this or a fix to how I'm trying to do it? In short: I am trying to save and load a scenes that have material/texture that I created from my own images. But the loader and saver, doesn't seem to recognize/save the custom material properly. Thank you!
  2. 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 = this.game.add.image(x, 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.
  3. 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.
  4. Guys, We recently have new requirement that we need to save the content we rendered with pixi.js to image file like PNG. The canvas's toDataURL method worked well at first, however we need more than that. The content (a diagram) could be zoomed and the canvas only shows part of that diagram at the time we save the image. Also, if we zoom out and try to capture the whole diagram, the output diagram seems not so crisp, or sharp. Hope I've made my self clear. So, my question is whether their is a way to export the whole content image with desired resolution? BR, Yeling
  5. 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 https://github.com/aaccurso/canvas-image-saver It works on web desktop and web mobile but it is not working on the cordova build for Android. How can I solve this?
  6. I'm a little irritated at the moment. A sprite sheet is to be loaded and displayed. The sprite sheet consists of several individual images (2, 3, ... 5, ... 10, ... any). I would like to change these pictures. Unfortunately, I find no suitable example. On the basis of an animation, with Play and Change Texture, it can not be, it is always only a single picture to the next switch. Does anyone have a suggestion? Thank you. PS: Of course, I also have a JASON file to it.
  7. 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. 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'); game.world.setBounds(0, 0, 1920, 1920); game.physics.startSystem(Phaser.Physics.ARCADE); player = game.add.sprite(game.world.centerX, game.world.centerY, '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) game.camera.follow(player, 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!
  9. 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,game.world.height-250, '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
  10. 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?
  11. 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?
  12. 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!
  13. 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.
  14. 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.
  15. 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.
  16. 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 me.video.WEBGL or me.video.AUTO in the me.video.init 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!
  17. 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: http://jsfiddle.net/8MawM/ but, it also gives me an error.
  18. 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
  19. 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!
  20. 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.
  21. 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(http://www.image.com/jpeg.png)" doesn't seem to be working. How can i achieve this?
  22. Hi, I've been struggling to create a gradient filter over an sprite using shaders. I have this and is working fine: http://codepen.io/rhernando/pen/ORxWwO?editors=1010 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.
  23. 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
  24. Hello, I recently found out that my game looks bright (sometimes too bright) only in the desktop Chrome browser (version 53) on OSX (El Capitan). Has anyone gotten similar problems? I checked up few of those Phaser bitmap examples (such as this one) but the examples do not apparently have the color difference issue. I am afraid that I might be doing something wrong with the images or the script. Thank you very much for your advices on this matter in advance. Left : Chrome / Right : Safari P.S. I tried removing color profile from image or choosing different color profiles, which did not solve the problem.
  25. preload(){ this.game.load.image('main_background', 'assets/images/gamemenu/background.png'); } create(){ this.background = this.game.add.sprite(0, 0, 'main_background'); } i'm loading an image in preload function and using that as a background . but this gives me an error """" Key "main_background" not found in Cache. ""