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

  1. 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?
  2. 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?
  3. 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!
  4. 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.
  5. 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.
  6. 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.
  7. 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!
  8. 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.
  9. 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
  10. 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!
  11. 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.
  12. 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?
  13. 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.
  14. 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
  15. 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.
  16. 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. ""
  17. Hello, I have an issue with loading a image in phaser. I keep getting the same error, it says "Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///Users/CindySchroer/Downloads/Plaatjes/Phaser/assets/images/background.png may not be loaded". I don't understand why it isn't loading (see attatched). Can anyone explain what is happening here? A little step-by-step would help because I'm a beginner. Thanks! Cindy
  18. I was wondering is there a Phaser visual subtype on which I can manipulate its alpha/transparency without redrawing it? Phaser.Graphics is ok but I need to redraw it and currently I am lost in my own code I have the graphics already drawn, it would be a lot easier to just change its alpha value. Sprite/Image does not seem to have alpha value. Is there some plug-in or perhaps some known hack?
  19. Ok jumping right into it, I have a big map, the map is broken into a chunk that is a 2d aray with 64 - 32x32px tiles in it. Some of these tiles literally need 0 interaction with them. For all I care they could be apart of the background, however, the background is a repeating tileSprite of grass. What is the best way (taking performance into account) to spawn in a sprite, that will have no physics no body nothing essentially (just an image essentially) and not have it hog memory like a regular sprite does. Quick post didn't really take time to be therough lol
  20. I am making a game with skins in it. When ever player changes a skin Images gets loaded again. I use this code. preload: function () { this.load.image('arm', 'asset/Theme'+this.theme+'/arm.png'); this.load.image('leg', 'asset/Theme'+this.theme+'/leg.png'); this.load.image('head', 'asset/Theme'+this.theme+'/head.png'); this.load.image('torso', 'asset/Theme'+this.theme+'/torso.png'); } gameFunction:function() { if(this.themeChanged) { this.theme = this.newTheme; game.lockRender = true; game.load.onLoadComplete.add(this.preloadComplete, this); this.preload(); game.load.start(); } } preloadComplete:function() { game.load.onLoadComplete.remove(this.preloadComplete, this); game.lockRender = false; this.addImages(); }, This gives me an error What am I doing wrong here?
  21. Hi, I'm new here, my name is Royi. I'm loading a custom image (.png) using AssetManager, on complete I'm rendering a scene with a box. I want one face of the box to display the custom image I loaded. I experimented with Sprite but it seems to be completely restricted to 2D (by definition I guess), I was hoping for a thin 2D sprite I could rotate around the z axis as well. Is there some option to set the texture of a polygon's face to an image? Otherwise, how do I achieve it?
  22. Hi everyone, I am currently using Phaser,io with ES6 syntax , gulp, babelify, browserify and browsersync that is something similar to the ES6 boilerplate but I am using my own gulp file. I am encountering a bug where I import an image there is a green square behind it and there is a warning of "Phaser.Cache.getImage: Key "player" not found in Cache." on the Chrome browser debug tool show on the attached image. I have a GameState.js file as so: import Player from "../objects/Player"; class GameState extends Phaser.State { constructor(){ super(); } preload(){ let lander = new Player(this.game,0, 0); lander.loadImage(); } create() { let lander = new Player(this.game,0,0); lander.setSprite(); } } export default GameState; I am importing the image from the Player.js file: import {Images} from "../global"; class Player extends Phaser.Image { constructor(game, x, y, key,frame){ super(game, x, y, key, frame); this.loadImage(); this.setSprite(); } loadImage(){ this.game.load.image("player", Images.lander); } setSprite(){ this.game.add.sprite(10,10,"player"); } } export default Player; the global.js file contains variables like so: var gameScreen = { Width: window.innerWidth, Height: window.innerHeight }; var Images = { lander: '/images/player.png' }; export {gameScreen, Images}; Is there anyway to fix this bug? Thanks
  23. Is there a big efficiency difference, in terms of game speed/smoothness and memory usage between using a small png for entities sprites VS using a big png and scaling it down with javascript ingame?
  24. Is it possible to load the same sprite under different names without loading multiple instances of the sprite? Preloader dilemma (notice how the same sprite is being loaded multiple times): this.load.image('alien x blood', 'images/red splatter.png'); this.load.image('alien y blood', 'images/red splatter.png'); this.load.image('alien z blood', 'images/green splatter.png'); I load the same sprite because during gameplay I dynamically choose sprites based on a string: this.game.add.sprite(x, y, 'alien ' + alienType + ' blood'); In my happy little world I'd like to be able to do something like this: this.load.image(['alien x blood', 'alien y blood'], 'images/red splatter.png'); Any recommendations/thoughts?
  25. I have a game were the user put stickers on the stage. he can scale them and rotate... The PNG file is in a fitting size so the user can scale it without loosing quality. But, when I scale the image down it is crisp... Why is that and how can I fix it? Thank you :]