Search the Community

Showing results for tags 'images'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 20 results

  1. Hey guys! I've got one main question, with a few follow ups.. here goes I was wondering if there was a way draw an image onto the PIXI.Graphics (object thingy)? I'm aware I can add sprites to the stage and other containers. But I'm currently drawing polygons, and images (with a dynamic render order), So this seems like a good way to do that. Is there a way of doing this, similar to the plain/vanilla canvas way: var canvas = Dom.get('canvas');var context = canvas.getContext('2d');context.drawImage(source, x, y, w, h, ...); I've tried: var context = pixiRenderer.context;.. but this only returns the following: CanvasRenderingContext2D {} And now for the follow ups: Is the context (2d), unique to the Canvas? Would drawing imaged to the graphics object limit me to the CanvasRenderer, or could I still use PIXI.autoDetectRenderer and PIXI.WebGLRenderer ? Thanks in advance!
  2. alflashy

    Tile different Images

    Hi I am new to Phaser and building my first game with Phaser CE. I am trying to build rows and column of images that will dragged and drop. I am having hard time understanding various ways to build tiles and can't find any resources of exactly what I am doing. So I build squares in row but don't know how can I lay it in multiple rows like tiling and then how to put the images inside the thumbnailBg.Can someone please advice. var thumbnails; var thumbnailBg; var thumbnailsHolder = this.game.add.group(); thumbnailsHolder.x = 400; thumbnailsHolder.y = 100 for(var i=0; i<imageName.length; i++){ this.createThumb(thumbnailBg, i); // thumbnailBg.x = 100*i; if(imageName[i].indexOf('_mask') < 0 && imageName[i] !== 'bw_1'){ thumbnails = this.add.sprite(100*i, 0, imageName[i], null, thumbnailsHolder); } } function createThumb (thumbnailBg, i){ console.log('thumbCreator'); thumbnailBg = this.game.add.graphics(100*i, 0); thumbnailBg.lineStyle(2, 0x276998, 0.6); thumbnailBg.beginFill(0xFFFFFF); thumbnailBg.drawRoundedRect(330, 50, 100, 100, 10); // draw a rounded rect mask thumbnailBg.endFill(); }
  3. HungryHorse

    Background Selector

    Hi all I've been trying to make a scroll image finder Where the user would scroll through a set of images and choose one. I was wonder how i could do this in phaser
  4. charlie_says

    Phaser export image sequence

    Hi, Having had the most cursory look, it seems that you can export an image from Phaser (I've not tried it, but it seems you can.) I need to create an animation, that will be far easier to create via code, but I wondered about exporting multiple images from phaser? Anyone tried this? Or, something like this? Other thoughts?
  5. Discworld

    Can't load images by any means.

    Im attempting to make a game with Phaser and nodeJS. I was doing my character as a graphic (game.add.graphic) but couldn't figure out how to remove the graphic so I figured I'd make a sprite and load it. var Game = { preload: function(){ game.load.image("snakeBody", "../../assets/snakeBody.png"); game.load.image("apple", "../../assets/apple.png"); }, my folder structure is like so: -assets -static -scripts -game.js But it tells me that it can't find both files. I've also tried to add this line app.use(express.static('assets')); and then var Game = { preload: function(){ game.load.image("snakeBody", "localhost:3000/assets/snakeBody.png"); game.load.image("apple", "localhost:3000/assets/apple.png"); }, But same error occurs. EDIT: Solved it, tursn out I had to set the path as just "/snakeBody.png". I still dont understand why, but this worked.
  6. TrinityCore

    Colission of the images

    Hello guys! I must mention that I am new, and that I am Latin, so sorry for my English. Okay.. my question is the following. How to collision normal image and polygonal image.? What a clash with each other. In short, that's what I need to know. I hope you can help me, thank you all!.
  7. Hi, I'm writing a platform game in phaser, but the limits of the platforms don't seem to be the same as the limits of the image, so my player can keep walking "in the air" even when there's no platform under him. I`ve attached an image, as you can see there's no cloud under the player, but he`s standing on it anyway, he can walk this far untill fall to the platform below. Here is the "preload()" code part : this.load.image("cloud", "assets/cloud.png"); And here the "create()" code part: this.cloudsData =[ {"x":0 , "y":750}, {"x":200 , "y":600}, {"x":0 , "y":450}, {"x":200 , "y":300} ]; this.clouds = this.add.group(); this.clouds.enableBody = true; this.cloudsData.forEach(function(element){ this.clouds.create(element.x, element.y, "cloud"); }, this); this.clouds.setAll("body.immovable", true); this.clouds.setAll("body.allowGravity", false); I've tried changing the image with the same result, i think the code is wrong but i don't know where. Many thanks.
  8. dbdeveloped

    Can't delete this thread

    I asked a dumb question that i realized the answer to, and consequently, now i can't delete this thread. Sorry
  9. Hi, I have a very strange problem with Phaser. When I save a new image from Photoshop CC 2015, then use this code in phaser to load an image: this.load.image('logo', 'images/rielaiz-logo.png'); I then use this code to load the image as a sprite: this.rielaizLogo = this.add.sprite(158, 157, 'logo');this.rielaizLogo.anchor.setTo(0.5, 0.5); All existing images work just fine. Please help.
  10. semanser

    WebCam Phaser

    Hi! I have this code and I need to save several images in Array, and then show them. How to do this? var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });function preload () {game.load.script('webcam', '../plugins/WebCam.js');}var webcam;var bmd;var sprite;function create () {webcam = game.plugins.add(Phaser.Plugin.Webcam);bmd = game.make.bitmapData(800, 600);sprite = bmd.addToWorld();webcam.start(800, 600, bmd.context);game.input.onDown.addOnce(takePicture, this);}function takePicture () {webcam.stop();// bmd.context now contains your webcam imagesprite.tint = Math.random() * 0xff0000;}
  11. I'm making a mode 7 game in java script but I ran into a problem, to turn the perspective I must rotate the image before I draw it. I have tried using the ctx.rotate() function but I don't know how to do this before I draw the image so I can save it as an image object rotated and re-draw it.
  12. tigerwoods345

    Animations with individual images [help]

    So I have this game that I made a while back that I am now trying to port with phaser. In this game I used individual PNG files for all my animations. From looking through the docs, it seems Phaser's animation support is just for spritesheets? Is there a way to do something like: player.sprite.animations.add('idle', ['images/s_snailIdle_0.png', 'images/s_snailIdle_1.png'], 60, true, false); player.sprite.animations.play('idle');If not, how can I change the frame for an individual sprite so I can maybe implement my own animation system?
  13. Hey, I was wondering if it's possible to use either CSS, Canvas, HTML or JavaScript to draw elements for a game (like blocks, characters, etc..) or would I have to use a pre-made image. If this has already been answered, please direct me to the proper thread/website. I'm self-taught so a lot of examples and "dumbing down" is greatly appreciated! Thanks again in advance.
  14. spkez

    Loading Images

    Hi, I'm new to this whole phaser thing, and I looked around for an answer to my question, but here I am. Here is the github project that I am working on. In my main.js file, which I have in the root directory of the project, I load the images as follows: // Load the imagesfunction preload(){ game.load.image('background', 'TagJam18/images/Background.png') game.load.image('platform', 'TagJam18/images/Platform.png') game.load.image('Wall', 'TagJam18/images/Wall.png') // Sprite sizes are inconsistent so there is no way to do these with constants // The only real way is to resize the window sprite. // I definiitely do not feel like doing that. game.load.spritesheet('dog', 'images/DogSprite.png', 16, 8) game.load.spritesheet('window', 'images/WindowSprite.png', 16, 16)}Then in my create function I try to load my image. // Create the scenefunction create(){ // Physics is a perfectly fine way to do things for this. // The ARCADE engine has all the physics we need for a simple platformer game.physics.StartSystem(Phaser.Physics.ARCADE) // Add in the background. game.add.sprite(ORIGIN, ORIGIN, 'background')However, when I try to run my game, what I get is a black screen. Am I doing something wrong with my folder directories? I have all of my images in an image folder inside of the TagJam18 folder. I'm not very confident that I am referencing them correctly.
  15. Brad P. Taylor

    FlickrSprite (flickr + phaser.Sprite)

    Hello Everyone, I was in need of some temporary art for a project and it dawned on me hey Flickr's API has the ability to search on tags and licenses... lightbulb moment - hey wouldn't it be great if I could just ask Flickr for an image with a set of tags and get sprite back (or a list of related images you can find the gist here http://goo.gl/lYJ9FX oh yeah you need to have a flickr api key and there are limits to the number of images you can pull down an hour, so it probably makes sense to implement some sort of local caching system. (or you could just copy them from your browser cache like I did after getting them...) Cheers, -bpt
  16. zarstar

    Texture from more Textures

    Hi guys, I have a particoular problem with Pixi.js. I am working on a large application in which there would be a lot of images displayed. Now the problem is that some of them should be "composed". So pratically the resulting Sprite should have for example, a Texture composed by four images: [1,1] [1,2] [2,1] [2,2] Each of them is an image file (so "1-1.jpg", "1-2.jpg", and so on...). I have tried to use a Sprite as a container of other Sprites and it works, but it seems quite slow and it takes a lot of memory. So I tried to use the RenderTexture class, but it needs that the objects to render should be preloaded (the application is large, so it can't wait images to be loaded). So finally I tried to use the fromCanvas() method. But it also seems to use a lot of memory, because it stores a Canvas for each Sprite (and I could have very large Canvases). So what do you suggest me? Is there any other way to compose a Texture for more image files? Thank you
  17. What I aim to do with this blog post is set people on the right path from the get go with how image size in RAM works. I also want to provide others with the system I used to audit my image RAM and process I used to cut out inefficiencies. This should help you to get a good visual overview of which of your images are wasting the most RAM and where you can cut the fat. You can plug in the image asset list from your exported project and the sheet will give you some nice color coded information that isn't too hard on the eyes. Just click the banner above or, you can click this link too: http://pangolingames.com/how-to-audit-image-ram/ There is a RAM vs Storage overview before it gets to the utility itself, that should hopefully help explain how image download size and image size in RAM are not the same thing. In any case, I hope you find it an enjoyable and enlightening read! If you find anything that's incorrect, let me know!
  18. I have fixed a bug. This is how to repro it: At startup: this.sprite.loadTexture("walk.png"); // Sprite sheet 3x4 frames Some time later: this.sprite.loadTexture("dead.png"); // Single frame My game sets this.sprite.frame each update. If the object is 'dead', the frame number is 0. The BUG is: the old frameData in this.sprite.animations resets the texure to walk.png's first frame. I SOLVED this by executing this.animations.loadFrameData(null); in the "cache.isSpritesheet == false" part of Phaser.Sprite.prototype.loadTexture
  19. mtburdon

    Blurred images on iPhone

    Hi guys, I've been playing around with Phaser for the last couple of weeks and I'm really loving it, very easy to work with and fun too! I have come across an issue however, I'm sure I'm probably doing something silly so I'm hoping someone can point me in the right direction. The issue: I come from a web dev background, so for my images, I've made them double the size and then using scale.setTo(0.5,0,5) to shrink them to the size I want them to display at. That's all fine, however when I use the game on my iPhone the images appear rather blurry instead of nice and crisp. Can anyone point me in the right direction here, am I doing something wrong? Thanks, Martin
  20. Hi there, We've used Pixi.js a couple of times already in commercial projects because its so beautifully fast. Unfortunately one of the projects we're currently working on seems to be bucking the trend and we are struggling to get to the bottom of it. The app consists of a continuous strip of panels that scroll left to right - we're using DisplayObjectContainers for each panel and then loading in a bunch of images (in layers) and displaying them as sprites within that. Performance was excellent until we started to build more panels where it felt like some sort of memory threshold was crossed on the iPad Mini/2. The issue we have is that we are going to need 100+ panels within our strip - so memory management is of the upmost importance. So far we have 38 and the frame rate has already dropped to an unusable level. We are of course loading in each set of layers only as the user scrolls to that point in the strip and destroying panels they have already moved past but this doesn't seem to release the memory back to the browser fully. We are removing the sprites from the display list, destroying all the PIXI.Textures, removing them form the PIXI.Texture Cache and nulling everything but the frame rate just slows the further in you get. If you skip straight to the end (skipping the need to load all the images on the way) it stays fast. Here's part of the 'unbuild' function that exists within each panel: //console.log(PIXI.TextureCache) for (var pane in this._panes) { //console.log(this._panes[pane].art.children.length) for (var layer in this._paneData[pane].layers)//go through all the layers in this pane { PIXI.Texture.removeTextureFromCache(Game.path+'panel-assets/'+this._paneData[pane].layers[layer].art) //console.log('removing', Game.path+'panel-assets/'+this._paneData[pane].layers[layer].art) } for (var bubble in this._paneData[pane].bubbles)//go through all the layers in this pane { PIXI.Texture.removeTextureFromCache(Game.path+'bubbles/'+this._paneData[pane].bubbles[bubble].art) //console.log('removing', Game.path+'bubbles/'+this._paneData[pane].bubbles[bubble].art) } this._panes[pane].art.alpha = 0 while(this._panes[pane].art.children.length > 0) { this._panes[pane].art.getChildAt(0).texture.destroy() this._panes[pane].art.removeChild(this._panes[pane].art.getChildAt(0)) } for (var layer in this._paneData[pane].layers)//go through all the layers in this pane this._loadedLayers[this._paneData[pane].layers[layer].art] = null for (var bubble in this._paneData[pane].bubbles) this._loadedBubbles[this._paneData[pane].bubbles[bubble].art] = null //console.log(this._paneTimelines[pane].getChildren()) var timelines:any[] = this._paneTimelines[pane].getChildren() for (var timeline in timelines) { timelines[timeline].kill() timelines[timeline] = null } } timelines = null this._loadedLayers = {} this._loadedBubbles = {} if(this.timelineAcross) { this.timelineAcross.clear() this.timelineAcross.kill() this.timelineAcross = null } if(this.timelineAmbient) { this.timelineAmbient.clear() this.timelineAmbient.kill() this.timelineAmbient = null } It will also run beautifully smoothly (60fps) if we generate 100 panels and reuse the same image assets for each one. I realise this may be a larger issue with mobile safari and its memory limitations such as I have read about here: http://stackoverflow.com/questions/10582502/javascript-runs-slowly-in-safari-ipad2-after-loading-200mb-worth-of-new-images and here: http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5 But these articles refer to HMTL5 image objects in the DOM. I was wondering if there is anything else I can do in terms of getting mobile safari to forget image data that has been loaded and viewed via the PIXI ImageLoader or if we are going to have to completely change approach? Any suggestions would be really appreciated! Thanks