Search the Community

i want to make it in a new way rather than the defualt way of load spriteSheet. I want to load an image using ( uri,url ). Is this possible? this.load.spritesheet('item', 'essets/items/item.png', { frameWidth: 32, frameHeight: 64, }) => this.load.spritesheet('item','https:///image.shutterstock.com/image-illustra23tion/img-file-document-icon-trendy-260nw-1407027353.jpg',{ frameWidth: 32, frameHeight: 64, })

looking for a way to replace a preloaded spritesheet's image file. something like: game.load.spritesheet('player', 'img/player.png', 32, 64) changes to: game.load.spritesheet('player', 'img/player2.png', 32, 64) i've tried calling the second line after the preload function but it doesn't seem to work.

Hi, Does anyone know if a single frame in an animated sprite can be used as a trigger to change scene (Phaser 3)? I have an interface with about 30 images set in an animation loop and would like to be able to click on a particular image to change the scene. The result I would like resembles a JavaScript switch statement. Thanks

Project `visual ts game engine` Tutorial Basic - Sprite animation (SpriteTextureComponent) Screenshot: SpriteTextureComponent class extends TextureComponent It means that we can easy use tiles on sprite animation. Scales is also interest parameter. Use if you want the textures to be larger/smaller than the physical body. sprite: { xScale: 2, // or smaller 0.2 yScale: 2, // or smaller 0.2 }, Demo code: /** * @description * I use images from add-element folder. * This is demo but for real release this * is bad praticle. */ class DemoSpriteAnimation { public gameName: string = "Demo 1 - Add sprite object"; public version: number = 1.0; public playerCategory = 0x0002; public staticCategory = 0x0004; public starter: Starter; public myFirstGamePlayObject: Matter.Body | any = undefined; constructor(starter: Starter) { this.starter = starter; } public attachAppEvents() { const root = this; console.log("App running ..."); // spriteOptions is just demostration not official engine interface. let spriteOptions = { delay: 1, pos: { x: 100, y: 200, }, tile: { x: 1, y: 1, }, }; root.createMySprite(spriteOptions); spriteOptions = { delay: 10, pos: { x: 400, y: 200, }, tile: { x: 1, y: 1, }, }; root.createMySprite(spriteOptions); spriteOptions = { delay: 30, pos: { x: 700, y: 200, }, tile: { x: 5, y: 5, }, }; root.createMySprite(spriteOptions); root.addGround(); } public addGround() { const newStaticElement: worldElement = Matter.Bodies.rectangle(400, 550, 1000, 90, { isStatic: true, isSleeping: false, label: "ground", collisionFilter: { group: this.staticCategory, } as any, render: { visualComponent: new TextureComponent("imgGround", [require("../add-element/imgs/backgrounds/wall3.png")]), sprite: { olala: true, }, } as any | Matter.IBodyRenderOptions, }); (newStaticElement.render as any).visualComponent.setVerticalTiles(4) // setHorizontalTiles(1); this.starter.AddNewBodies([newStaticElement] as worldElement); } /** * @description How to create sprite * with different options */ public createMySprite(spriteOptions: any) { const playerRadius = 50; // tslint:disable-next-line:prefer-const let myObject = Matter.Bodies.circle( spriteOptions.pos.x, spriteOptions.pos.y, playerRadius, { label: "mySprite", density: 0.0005, friction: 0.01, frictionAir: 0.06, restitution: 0.3, ground: true, jumpCD: 0, portal: -1, collisionFilter: { category: this.playerCategory, } as any, render: { visualComponent: new SpriteTextureComponent( "explosion", require("../add-element/imgs/explosion/explosion.png"), ({ byX: 4, byY: 4 } as any), ), fillStyle: "blue", sprite: { xScale: 1, yScale: 1, }, } as any, } as Matter.IBodyDefinition); myObject.collisionFilter.group = -1; this.starter.AddNewBodies(myObject as worldElement); (myObject as any).render.visualComponent.seqFrameX.setDelay(spriteOptions.delay); (myObject.render as any).visualComponent.setVerticalTiles(spriteOptions.tile.x). setHorizontalTiles(spriteOptions.tile.y); (myObject.render as any).visualComponent.keepAspectRatio = true; console.info("my sprite body created from 'dead'."); } protected destroyGamePlayPlatformer() { this.starter.destroyGamePlay(); this.starter.deattachMatterEvents(); } } export default DemoSpriteAnimation; Project link -> https://github.com/zlatnaspirala/visual-ts-game-engine

I am trying to make a toggle button. So I made a spriteSheet with the two frames with the positions that the button can have. this.load.spritesheet('buttontog', 'assets/tbspr.png', {frameWidth: 160, frameHeight: 47}); It works when I click it once, toggling it. this.buttontog = this.add.sprite(660,420, 'buttontog', this.frame = 0) .setInteractive({useHandCursor: true}) .on('pointerup', () => {if (this.frame == 0) this.buttontog.setFrame(1); if(this.frame == 1) this.buttontog.setFrame(0);}); What I can't do is to "untoggle" it, and is why I am here, so I can ask for your help. since I am new to this framework. This is the spriteSheet:

So I wanted a loading animation in the starting phases of my game, like you do, but I am pretty new to pixi so I tried to follow some tutorials to create an animated sprite from a sprite sheet using the built in code in Pixi to extract an animation from a texture packer file, but no matter what I do, i get this message ( load is the animation id) Uncaught TypeError: Cannot read property 'load' of undefined at e.loadProgressHandler (index.html:49) at e.o.emit (pixi.min.js:8) at pixi.min.js:19 at t.value (pixi.min.js:10) at pixi.min.js:9 at s (pixi.min.js:9) at e.<anonymous> (pixi.min.js:19) at pixi.min.js:9 at pixi.min.js:9 usually there are 2 or 4 of these messages in the console, i saw another page said the issue was because pixi couldn't recognize the json file type because there was no extension, but mine has that, many examples had let sheet = PIXI.loader.resources["Images/Loading/loadanim.json"].spritesheet; while I have let sheet = PIXI.loader.resources["Images/Loading/loadanim.json"]; but with the .spritesheet added it makes things worse, saying this Uncaught TypeError: Cannot read property 'animations' of undefined at e.loadProgressHandler (index.html:49) at e.o.emit (pixi.min.js:8) at pixi.min.js:19 at t.value (pixi.min.js:10) at pixi.min.js:9 at s (pixi.min.js:9) at e.<anonymous> (pixi.min.js:19) at pixi.min.js:9 at pixi.min.js:9 I've looked at a ton of differen't tutorials and pages concerning glitches like mine, but none of them have told me anything of use, while my code seems to follow the structure of all the other pages, it still rejects my animation file, it could be because of the html, or the pixi file, but as I said I am completely new to this and I have no idea what could be wrong. index.html loadanim.json

So today I come asking for help. I'm converting from a Flash Developer over to JavaScript and I'm using CreateJS, I wanted to know if anyone had recommendations on how I could export my sprite sheets so that it's a little easier to assemble in CreateJS. How I make my characters in Flash is I have the main character MovieClip and I have a nested MovieClip for mouths. The main character MovieClip may have animations so on every frame where the character talks I have a nested mouth clip container(I have provided a video clip on how the animations plays without mouth interaction by code: https://youtu.be/TJOAME7MvgI - and how it acts with interaction: https://youtu.be/XCODle6ocvs). Does anyone know the easiest way to export the animation from Flash and the mouths? I was gonna do the animation on a separate SWF and export it to a separate sprite sheet then for each frame do each set of mouths as a sprite sheet and just show them when it gets to that frame in CreateJS. But how I've been making these so far is the mouths are done by frame on the timeline. In flash I did it like this too but also did them on layers, so if the mouths were on layers it be character.mouths.A_mc.visible = true; and set the last one's visibility to false...if I did it by frame I'd just do character.mouths.gotoAndStop("A"); and this is currently the only way I'm doing in in CreateJS. If anyone has been following along so far lol some suggestions would be great on how you would tackle this!

I have canvas 1920 x 1080 and 5 different Spine animations that uses a lot of textures. Add 20 animations of every type all over the screen Test performance in two ways. For this I use GPU-Z and check GPU load parameter 1) Every animation has its own atlas with images and json file - GPU Load 47% 2) Every animation has its own json file but uses the same atlas with images - GPU Load 61% Made the same tests with sprites as well, total amount of sprites is 180, 10 of each type. 1) Each sprite has its own download link - GPU Load 90 % 2) All textures are in the same spritesheet - GPU Load 63% Why tests with Spine have opposite results? PC config is Google Chrome v65, Windows 10, AMD Radeon HD 7450, Intel Xeon x5650

so I created a spritesheet online and and added to my game. but some sprites are small in size so how do I change the size of sprite: { "filename": "Attack__004", "frame": { "x": 1, "y": 1951, "w": 111, "h": 96 }, "rotated": false, "trimmed": true, "spriteSourceSize": { "x": 9, "y": 5, "w": 111, "h": 96 }, "sourceSize": { "w": 120, "h": 110 }, "pivot": { "x": 0.5, "y": 0.5 } }, I don't know which one is the height and width of image. So do can I resize the image inside the json file or I must manually resize and pack it again? Btw, I used this tool http://free-tex-packer.com/app/ (no PC to use texture packer :-) ) Thanks in advance

What is the difference between using spritesheet and jsonHash ? jsonHash need a json file and spritesheet does not - this is what I know so far. But why use jsonHash with all that extra work to make a json file when you just can use spritesheet instead?

I use sprite sheets to take care all the animations in a web game. I have some really big sprite sheet with a size of 14450x5406 and the game will be so laggy when I'm trying to render this into the stage. Since it is a response time vary application which require a no-lag performance, I decided to split those sprite sheets into multiple sprite sheet such that each of them with a size of 2048x2048 after I've read some post as below: The performance is better than before in the first play of the animation. Let say if the application will 100% chance become laggy in the previous, it's just 50% now. However even the animation is smooth in the first play, It'd become laggy if I gonna render it again after 2-3 minutes(It's still smooth if I'm rendering it again immediately) . So splitting the large sprite sheet into multiple sprite sheets may helps a little bit on laggy issue but still the problem exists and I couldn't know the reason. I play all these huge size animations right after another animations(small size): By laggy I am meaning that the Chrome is like totally freezing. I read some posts and some of them said that it's because GPU can't rendering anything while uploading texture into GPU. So I've posted another question in the past: So I prepared all the animation sprite in a loading screen and turned off the GC with the following code: But the same thing is happens. The Chrome is freezes every time when playing the animation with sprite sheet of large size(freezes happens on entering onComplete), not on the small one. I would like to know any possible reasons and suggestions about this issue. If this cannot be solved in programming level, could I resolve this in hardware way? like buying a better graphic card with more video memory?

I've loaded two animations in Pixi with spritesheets. I wanna swap to second animation right after the first animation is finished. However, (It's happen with a 3840x1080 resolution, and the GPU memory usage is mainly fall between 90%-99%) 1. there's a significant lag of the transition between these two animations in the first time. 2. After the first play, if I remove and add the animatedSprite from the stage immediately, the transition is very smooth. 3. After the first play, If I remove the 2 animatedSprite from the stage, wait for ~2-3 minutes and add the 2 animatedSprite into the stage again, the transition is lagging again. I wanna know the proper way of swapping two animation in Pixi and also the reason of this phenomenon.

I'm trying to add a bubble-pop spritesheet animation to my game. I have added other sprites fine, and when I add the sprite for the bubble, everything is still good. However, when I go to add the animations, I get an error, "Cannot read property 'add' of undefined. How can I animate the bubble? var config = { type: Phaser.AUTO, width: 1366, height: 768, parent: "canvas", scene: { preload: preload, create: create} }; var game = new Phaser.Game(config); function preload () { this.load.image('freeplayBG', 'images/freeplay-BG.png'); this.load.image('shark', 'images/nice-shark.png'); this.load.spritesheet('bubblePop', 'images/bubble_pop_under_water_spritesheet.png', {frameWidth: 394, frameHeight: 511} ); } function create() { //Set background this.add.image(685, 384, 'freeplayBG'); //Set shark and make draggable var shark = this.add.sprite(200, 300, 'shark').setInteractive(); this.input.setDraggable(shark); this.input.dragDistanceThreshold = 16; this.input.on('drag', function (pointer, gameObject, dragX, dragY) { gameObject.x = dragX; gameObject.y = dragY; }); //create the bubble sprite var bubble = this.add.sprite(700, 300, 'bubblePop'); console.log(bubble); //Sprite {_events: Events, _eventsCount: 0, scene: Scene, type: "Sprite", parentContainer: null, …} console.log(bubble.animations); // undefined console.log(this) //Scene {sys: Systems, game: Game, anims: AnimationManager, cache: CacheManager, plugins: PluginManager, …} bubble.animations.add('pop'); //error happens here bubble.animations.play('pop', 10, false, true);

Hi Guys How can i play spritesheet animation using javascript.

Hi, I am complete beginner with JavaScript and pixi.js. I've been learning these days the basics (sprites, shapes, text, buttons...) following the tutorial on the GitHub page. I was planning to use now animated sprites (using a sprite sheet) and found this on the documentation for the version I'm using (v4.8.2). That page contains a piece of code that doesn´t work on my project, and it is not recognised by vscode's intellisense either. // The more efficient and simpler way to create an animated sprite is using a {@link PIXI.Spritesheet} // containing the animation definitions: PIXI.loader.add("assets/spritesheet.json").load(setup); function setup() { let sheet = PIXI.loader.resources["assets/spritesheet.json"].spritesheet; animatedSprite = new PIXI.extras.AnimatedSprite(sheet.animations["image_sequence"]); } Is it deprecated, or am I missing something that is not mentioned there? Thanks in advice for your help. EDIT: I attached some pictures that showcase my issue.

In Phaser 2 I was able to load a spritesheet and then define a simple animation that would loop through the spritesheet frames. // Defined in the preloader state. this.load.path = 'assets/avatar/'; for (let i = 1; i < 8; i++) { this.game.load.spritesheet('avatar_1_' + i, 'base/avatar_1_' + i +'.png', 16, 24); } // Use the spritesheet when adding the sprite. this.hero = this.game.add.sprite(x, y, 'avatar_1_' + style); // Define an animation and start playing it. this.hero.animations.add('stand'); this.hero.animations.play('stand', 5, true); With Phaser 3 I'm trying to understand how to convert this to the new animations model. // Still loading the spritesheets in the preloader. this.load.path = 'assets/avatar/'; for (let i = 1; i < 8; i++) { this.load.spritesheet('avatar_1_' + i, 'base/avatar_1_' + i +'.png', { frameWidth: 16, frameHeight: 24 }); } // This doesn't appear to have changed much either. this.body = this.scene.add.sprite(x, y, this.asset); // Now I've tried just creating the animation: this.anims.create({ key: 'stand', frameRate: 5, repeat: -1 }); // And then using it on the sprite, but it's complaining about that it: // Cannot read property 'frame' of undefined this.body.anims.play('stand'); Is it still possible to define an animation that just loops through the sprite's spritesheet's frames? If not, do I need to define an animation for every spritesheet I'm using? (Such as in the official Phaser 3 tutorial, https://phaser.io/tutorials/making-your-first-phaser-3-game/part5) Thanks!

Hello, I'm trying to make a game with different states : The first one is the main state (Play.js) where the game is running and I have a second state (Skills.js) to create a Skills Tree. To keep track of my variables I store the data into two JSON file and I pass them when I'm changing state like that : Play => Skills this.game.state.start('Skills', true, false, JSON.stringify(this.gameObject), JSON.stringify(this.skillsObject)); Skills => Play this.game.state.start('Play', true, false, JSON.stringify(this.gameObject), JSON.stringify(this.skillsObject)); However, I have a timer which displays the remaining time and a menu bar in Play.js and I would like to keep displaying them in Skills.js. I made some research and I could turn the "clearWorld" parameter to false but this will keep displaying the others spritesheets and I won't want that. So, how could I do that ?

Hello, I'm making a racing game (at least I'm trying to!) I'm using a setTimeout function to delay the start of the scrolling of the background by 3 seconds which works perfectly! But, what I really need now is to display an image of "3" *pause & fade out*, switch to image of "2" *pause & fade out*, switch to "1" *pause & fade out* then show "Go!" * fade out* I saw something where I set the alpha to 0 and then tween the alpha to 1 like so: game.add.tween(this.countDown).to({alpha: 1}, 1000, Phaser.Easing.Linear.None, true, 0, 1000, false); But this isn't exactly what I'm looking for. I'm not sure what all of these parameters are or how I would switch between the images (using different images or a spritesheet, I'm not sure what's best) to give the desired effect. Can someone please help me? Many thanks, and let me know if you need me to explain this better! Update: I kept hunting around (I apologize for not searching more thoroughly) but, I did come across chaining tweens. I'm trying it out but having some difficulty

I have a spritesheet of 7 equal size sprites (50x50). When I try to call a specific frame ('6') to assign it to a variable, i get half of sprite 5 and half of sprite 6 showing. I'm using Texturepacker Pro with, I think, the correct settings, so why am I getting half of the frame instead of the full frame? figured it out: i had to add some boundary around the sprite in the original load line.

Hi guys, I just started coding using Phaser and so far, i'm really loving it. So, i'm creating my new game which has a main menu in it and I don't really know where to begin. I know there are lots of packages out there but I would really like to know the basics first before I dive into using tools that are basically "magic" to me. I have tried reading through the code of EZGUI to understand how I would get my desired output, but I haven't reached that level yet so it's quite challenging. I have the spritesheet ready which I will be using for the game window (actually any window) that I got from the free Kenny assets: And what I want is for this to look a little like this, the problem is I don't know where to start. And I would like for the panels to be dynamic depending on the size of the content. I understand that creating the windows, panels, etc.. from any image editor and just be static, but scaling them in-game would affect their quality. Any suggestions will do. I'm still new to Phaser and I would not mind trying out any advice you could give. Thanks!

Spritesheet Editor in web Create spritesheets by placing images in cells, set up sizes and offsets of your columns and rows. Download generated JSON file with coordinates of each of your sprite and PNG spritesheet image. Autosave of your progress, sharing, collaboration work; Development of spritesheet is not easiest in terms of 20 or 100 sprites. In case of WebGL games it's quite necessary to have one spritesheet instead of using separated images each iteration of rendering. Tool is useful for designers and developers who are interested in development 2D, 2.5D games. I'm seeking for React developers to build this app for community for free. The project consists of 3 phases. First one gives you main functionality for generating PNG and JSON. Next one will be about keeping information on server-side in database with social network authorization, it will be premium functionality for really cheap 3$/month subscription per account. Last phase will introduce collaboration mode, invite by link and multiply spritesheets management. Please, leave your comments about features you want to have, development already started. Thanks, cheers!

Hi, im new in phaser i have an error in animations when i press de right key i doesnt play the animation.

So I am preloading an atlasXML spritesheet game.load.atlasXML('sheet', 'images/sheet.png', 'images/sheet.xml'); and I can create a sprite using: game.add.sprite(game.world.centerX, game.world.centerY, 'sheet', 'playerShip1_orange.png'); I am trying not to use a for loop to create many sprites for a a sprite group I'm creating by using Group.createMultiple Now if I'm just loading a sprite or image, I can do this.meteorGrey = game.add.group(); this.meteorGrey.createMultiple(25, 'meteorGreyBig1.png'); Now when it's in a atlas sprite, this is where I'm running into trouble. this.meteorGrey = game.add.group(); this.meteorGrey.createMultiple(25, 'sheet', 'meteorGreyBig1.png'); It ends up displaying nothing

hi guys, Is there a way to load 2D-resources as spritesheet in BABYLON, and I can take the frame I want by alias(frame_1.png or frame_2.png)? or if I need to do it myself, where can I set the attributes like clipX, clipY ......to get the part of image I want {"frames": { "frame_1.png": { "frame": {"x":1,"y":1417,"w":93,"h":102}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":5,"y":0,"w":93,"h":102}, "sourceSize": {"w":98,"h":102} }, "frame_2.png": { "frame": {"x":311,"y":1187,"w":84,"h":102}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":13,"y":0,"w":84,"h":102}, "sourceSize": {"w":98,"h":102} }}, "meta": { "app": "http://www.codeandweb.com/texturepacker", "version": "1.0", "image": "sprite_sheet.png", "format": "RGBA8888", "size": {"w":1922,"h":1555}, "scale": "1", "smartupdate": } }

Hi guys I have problems using cross origin resources, as I tested direct load of image is working, but the spritesheet & mp4 I still can't get it work, here is some use cases: // it works var image = PIXI.Sprite.fromImage(CROSS_ORIGIN_URL_IMAGE); // not work and showing the error message // Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded var videoTexture = PIXI.Texture.fromVideo(CROSS_ORIGIN_URL_MP4); var video = new PIXI.Sprite(videoTexture); // my json file is at local, and the image is on cdn server, so I change baseUrl right after add function, the image is loaded successfully, but when I try to use it, it shows the similar message // pixi.min.js:8 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at ... may not be loaded. PIXI.loader.add("/src/image/spritesheet.json"); PIXI.loader.baseUrl = CDN_SERVER_BASE_URL; PIXI.loader.load(() => { var image = PIXI.Sprite.fromImage(FRAME_KEY); }); the response header has the property "access-control-allow-origin: *", and the same mp4 URL works fine in DOM element, am I missing something?