Search the Community

Showing results for tags 'sprite'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 710 results

  1. I'am trying to create 5 sprites and combine them into 1 sprite only once. Then i create multiple objects and assign that 1 sprite to each one of those objects. My idea is that each object has 5 properties like name, image etc.. and if i create 5 sprites per object then it will cause alot of draw calls and sometimes fps drops if the objects are too many, so iam trying to combine the 5 sprites into 1 sprite then add that sprite to each object and inside the object i want to be able to change the sprites inside the 1 parent sprite for each object while that 1 sprite is acting as if it was actually only 1 sprite, basically without adding the 5 sprites as children to 1 sprite. 1 - I wanna know if this is possible 2- if it is, I want to know how i would do it because iam kinda new to pixi and i dont know what to do i have tried multiple ideas but all of them failed so i came here.
  2. Hello, how can i convert a PixiJs Sprite to add it to my Canvas stage (fabricJs)? iam getting this error: fabric.min.js:8168 Uncaught TypeError: obj._set is not a function slideBildMesh = PIXI.Sprite.from($jsonDefault.img); $app = new fabric.Canvas('itemcontent1', { backgroundColor: 'lightgrey', width: divWidth, height: divHeight }); $app.add(slideBildMesh); //<--- error
  3. I’m trying to make a game with a rocket ship navigating in a cave. The cave is broken up into 400x400 big tiles that’s combined to form a bigger cave. They all have physics-maps from “PhysicsEditor” that seems to work correctly. My tileclass: export default class Tile extends Phaser.Physics.Matter.Sprite { constructor(scene, x, y, sprite, phymap) { super(, x, y, sprite, 0, { shape: phymap }); this.setStatic(true); this.setBounce(0.05); scene.add.existing(this); } } And these are added in game.js: tilemap[1][0] = new Tile(this, 0, 0, 'ground', tile_body.ground) tilemap[0][0] = new Tile(this, -400, 0, 'bottom-left', tile_body.bottom_left) tilemap[0][1] = new Tile(this, -400, -400, 'vertical', tile_body.vertical) But the tiles are all over the place, if I set them all on position (0, 0) you can see it more clearly: Any ideas to what I am doing wrong? I thought all would be on top of each other if created at position (0, 0) with the same height and width?
  4. 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 = 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); = -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;"my sprite body created from 'dead'."); } protected destroyGamePlayPlatformer() { this.starter.destroyGamePlay(); this.starter.deattachMatterEvents(); } } export default DemoSpriteAnimation; Project link ->
  5. I am working on a game that has few background graphics, these are stored in app bundle at big resolutions like 2000x2000 pixels to support bigger devices like iPad pro. Obviously something this big is an overkill for mobile and I wanted to ask if following optimisation assumption is correct: 1. I preload these assets with pixi loader 2. I create sprite for each texture 3. I then resize this sprite to fit device dimensions better i.e. 1000x1000 px for iphone When I inspect my sprites textures I still see them at 2000x2000 pixels even though sprite itself is 1000x1000. I am concerned that I am not optimising this correctly, especially because I use prepare plugin for some of these assets, I upload my sprites not textures, but I still feel like I might be uploading those big 2000x2000 assets alongside which is a problem, as these occupy a lot of GPU memory. Hence this thread to clarify if my approach to this problem is correct. I don't want to create separate asset resolutions i.e. 2x / 3x etc if possible to avoid increasing final app bundle size.
  6. So to preface this, I've already looked through the docs for something that could do what I want but I couldn't find anything too useful. So I'm trying to make a sprite grow cracks over time (think like in minecraft when you mine), except I don't want to have to create a spritesheet of no cracks to cracks and have to loop it for every sprite texture. I'm looking for someway to play a standard opaque animation over each item I want cracks to form on. Is there anyway to do this? The only method I could think of would be to at the time I want the cracks to appear, to spawn a sprite right on top of the current sprite that is just a opaque cracking animation. This would work, but creates the challenge of having to deal with these opaque cracked-animation sprites now, especially in a multiplayer settings when I'm trying to run as efficiently as possible. If it comes to it I'll use this system and figure out a way to handle them but would rather have something that I can tie to the sprite that self destroys like an animation of its texture would. Let me know if I need to be clear, kind of rushed this. Thank you!
  7. Hey guys, i tried to make a soft sprite animation with PIXI.js, i learn about the ticker and i tried to implement, but is a loop, and its no use because is a movimentation player. See the print Is a isometric map, and i need I need the player to walk the floors, i already do that, but not so that the animation is smooth, it goes from point a to b without any animation. I also tried to implement the smoothie library but it was not possible. i stay waiting for responses, sorry for my bad english;
  8. Hi Everyone, I was working on a Phaser based website and as a part of the integration I needed to provide some objects interaction based on the song frequency data. To achieve this I needed to write a new Phaser plugin. This plugin allowed me to create a new extended type of Phaser.Sound object that provide real time sound data analyse. And now I want to share this plugin with all of you . Here you can view the demo You can GIT clone/download it from here: In the background, this object uses AnalyserNode from Web Audio API. This node is attached to Phaser main sound context. If Phaser doesn't use context and Web Audio API then you can set this object to provide fake data and still have the visualization effect . Here is some simple explanation for all four new extended objects you will have with this plugin: In short, this objects are in the following relationship: We need to create Phaser.SoundAnalyse object so we can get sound analyse update on every game thick (only if sound is in play state)We need to have graphical representation of this sound analyse data, and for that we will use Phaser.BitmapDataSoundAnalyze. We need to add this texture to Phaser.SoundAnalyse so on every sound analyse update this texture will be auto updated. We need to set this texture to sprite object so we can make it visible on screenIf we want to have all in one visual representation of the sound, then we can create Phaser.SoundAnalyseSprite that will handle creation and linking of all other sound analyse objects for us This is a simple demo how you can use it: // create new Phaser game var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create }); // function called on game asset preload function preload() { // load SoundAnalyse plugin script file game.load.script('soundAnalysePlugin', 'js/plugin/SoundAnalyse/SoundAnalyse.js'); // load song file'song1', 'audio/All_Time_Low__Time_Bomb.mp3', true); } // function called after all assets are loaded function create() { // create plugin instance var soundAnalyse = game.plugins.add(new Phaser.Plugin.SoundAnalyse(game)); // create new Sprite sound analyse object var soundAnalyseSprite = soundAnalyse.add.soundAnalyseSprite( 20/*x*/, 200/*y*/, 530/*width*/, 200/*height*/, "song1"/*sound key*/, true/*auto play*/, this._onDecodeFinish/*decode finish callback*/, this/*callback context*/); // show frequency domain chart bars (this is only one of eight other visualizations) soundAnalyseSprite.showFrequencyDomainChartBars(true); }What do you thing about this plugin? Some of the ideas you can achieve with this plugin (not included): - You can create water surface that dance by the music played in your game. - You can make sprite object act or do staff at some sound frequency - You can make other type of visualization, bubbles that shrink and squeeze by the sound amplitude data for example - And many more
  9. I'm a newbie on Pixi.js, recently met a problem, I want to show the outline of a sprite by using OutlineFilter, but a part of the outline was cropped by bound. The pixi example page looks same: But pixi filter demo is good: Source Code: I wonder what magic is used, Thanks.
  10. I am creating a platformer with Phaser3 and I am using Matter for my physics engine. I have loaded my tilemap/set into the world, however, I don't know if the collisions are working because since I have added in this code, my sprite has disappeared. Why is this? How do I get my sprite to appear again so that I can make sure he collides with the tiles? //Create tilemap const map = this.make.tilemap({key: 'map'}); //Create tileset const tileset = map.addTilesetImage('tiles'); const platforms = map.createDynamicLayer(0, tileset, 0, 0); map.setCollisionByExclusion([-1, 0]);; //Update the game at 30Hz; //Get hitboxes this.shapes = this.cache.json.get('shapes'); //Set boundaries for physics, 0, game.config.width, 750); //Player this.hero = this.matter.add.sprite(0, 0, 'sheet', 'run_right/0013', {shape: this.shapes.s0013}); //Don't want him rotating in the air this.hero.setFixedRotation(); //Set our variable to do calculations heroSize = this.hero.width;
  11. Hi I am new to game development. I have an issue.. here is the screenshot of my game which I am developing. My screen is scrollable with phaser_kinetic scroller. When I scroll the sheets with numbers it should be masked from the white line and and disappear the part of group sprite which is crossing the line. How can I achieve that. I used graphics to mask. But the graphics also hides the background. I dont want background to be hidden.
  12. I've spent more time than I care to admit figuring it all out. I'm calculating a convex hull around a sprite and then slicing it up into matterjs driven little orc pieces. I'm not very happy with one thing yet. Each of these pieces is a separate Sprite and it has it's own Graphics object as a mask. I feel that if I were to have a couple of these going at the same time rendering could get expensive. Teach me to do better I should be learning react or something to get a dev job, but here I am cutting up orcs.
  13. I'm porting a game developed using Phaser to Roku (streaming box) and I needed to change some of the sprite sheets, so I got TexturePacker but was surprised that it does not have an option to read the json file and split back the sheet into all the separate frames. Then I decided to create a quick app to do that, get the json and the png and unpack the frames png files into a folder. It was very useful to me so I decided to open it to the community:
  14. 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: - and how it acts with interaction: 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!
  15. I am trying to constantly update the source of my PIXI.Sprite(resources.image.texture) to match the source of the image that has entered the viewport, while keeping the same displacement map running constantly. Please tell me if this is not possible, or if there is a better solution. If you need more information please ask and I will happily provide it to my best ability. I am new to Pixi.js too so some code examples would be great. Thank you! I will post the relevant html and javascript below to my most recent (failed) attempt. Here is the link to said project. Here is the link to a semi-working version where the background is not changing as an example of what the displacement map should look like. HTML: <body> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section"> <img src="book5.png"> </article> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section"> <img src="book5.png"> </article> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section" section> <img src="book5.png"> </article> </main> <section class="one"> </section> JS: const sectionTag = document.querySelector('section') const articleTags = document.querySelectorAll('article') const bodyTag = document.querySelector('body') const pixels = window.pageYOffset const pageHeight = bodyTag.getBoundingClientRect().height let originalImage = null let originalImageSource = null sectionTag.innerHTML = '' // Set up a pixi application const app = new PIXI.Application({ width: 2000, height: 2000, transparent: true }) // Add the pixi application to the section tags sectionTag.appendChild(app.view) // Make image equall nothing let image = null let displacementImage = null let displacementImage2 = null // Make a new loader const loader = new PIXI.loaders.Loader() // Load in our image loader.add('image', originalImageSource) loader.add('displacement', 'displacement3.jpg') loader.add('displacement2', 'displacement1.jpg') loader.load((loader, resources) => { // Once the image has loaded, now do this image = new PIXI.Sprite(resources.image.texture) displacementImage = new PIXI.Sprite(resources.displacement.texture) displacementImage2 = new PIXI.Sprite(resources.displacement2.texture) image.width = 2000 image.height = 2000 image.interactive = true image.anchor.y = -0.1 displacementImage.width = 1000 displacementImage.height = 1000 displacementImage2.width = 1000 displacementImage2.height = 1000 displacementImage.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT displacementImage2.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT image.filters = [ new PIXI.filters.DisplacementFilter(displacementImage, 200), new PIXI.filters.DisplacementFilter(displacementImage2, 50) ] // Add the image to the app app.stage.addChild(image) app.stage.addChild(displacementImage) app.stage.addChild(displacementImage2) // add rotation app.ticker.add(() => { displacementImage.x = displacementImage.x + 0.5 displacementImage2.x = displacementImage2.x - 0.5 }) }) articleTags.forEach(article => { document.addEventListener("scroll", function () { if(article.offsetTop - 200 <= pixels){ originalImage = article.querySelector("img") originalImageSource = originalImage.getAttribute("src") } }) })
  16. Ram M


    Hi I want to know the Application for sprite creation for 2d games.Which one is good in quality wise and size also.Any idea about this please share with me.
  17. 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 (no PC to use texture packer :-) ) Thanks in advance
  18. Hey guys, I have searched all over to figure this our but no luck. How do I enable the debug to show the bounding/collision boxes on sprites in Phaser 3? this was pretty easy to do in Phaser 2 but I dont see any docs on how to do this for 3. Thanks!!!
  19. Hy everyone, My game ends when the player and the enemy collides. Detecting the collision works fine, the issue is not caused by it. When the game ends I stop the ticker with the .stop() function, is that why I cannot add sprites any more to the stage? (I dont think so because I tested it but still asking). After I stop the ticker I want to add the game-over.png as a sprite which I see in chrome debugger that it is loaded, but it does not appear on the stage. if (isCollision(player.getBounds(), enemy.getBounds())) { app.stage.removeChild(player); app.stage.removeChild(enemy); app.ticker.stop(); PIXI.loader.add('game-over','resources/images/game-over.png').load(ready); function ready(){ let gameOver = new Sprite(PIXI.loader.resources['game-over'].texture); app.stage.addChild(gameOver); } } I played around with setting the coordinates of the sprite too to see if the image may be out of the stage but it did not solve the issue.
  20. Hello everyone, i'm facing an issue pretty weird discovering the melonJS framework following the space invaders tutorial. When i try to implement the player movement actions, i get a problem on the clamp function of the Sprite Object. I'm more from the TypeScript world so not really used to the old way making objects on js, but i verified the melonjs.js file, and the function seems to be implemented well into the object. I use the last release of the boilerplate by the way. Thanks in advance.
  21. Hey, I am Tar van Krieken and I am working on a simple 2d game with a friend of mine. Neither of us are particularly good at graphics however, so we are looking for someone that can create some 2d textures for us and help with the style and theming of the game. We will require sprite animations for entities that walk around and do some other things, as well as textures for blocks and other things in the world. None of the graphics have been done, so it would be entirely up to you. I don't want to give away too much information about the game yet. It is not really a secret, but I would rather not have it on a public forum before we can finish it anyhow. It is roughly a 2d puzzle game similar to lemmings. I don't mind whether it has a pixelated style or not, but I have been working on some things to give the game a 3d feel despite being 2d, so it will have to fit that. Here is a video of some tests I have been doing: . It makes use of normal maps to create semi 3d lighting, together with shadows that I have been working on: . I can explain how normal maps work if you are interesting in collaborating and don't know this yourself yet. Some of my other work can be found here: As can be understood from this being in the 'unpaid' section, I am not willing to pay anything for the work. After the game is done we will have to decide where to publish it however, so if it turns out we make any money off of it, these profits will be shared of course. But that is a rather unlikely scenario, it will probably end up somewhere for free. Let me know if you are interested in working together, please link me some of your work, and then maybe we can get in touch
  22. Welcome, I am the artist Kirly Senpai!! At the moment I will only draw sprite but soon, I will draw CGs and interface (/^▽^)/ Please e-mail or private messages me if you're interested in any of my services. E-mail: I absolutely do not work for free. Sorry (´。_。`)ゞぅぅぅ… BUT I can work for half payment up front, half payment later, or will installments, I am very flexible! The only payment method that I accept is Paypal. You can also find me in: - Artstation - Portfolio - Devianart - Anothes commissions - - Tumblr I have no problem with the genres, I like them all! Bl, yuri, otome, etc ... It is quite cheap!! Take advantage before I change it!
  23. Hi, I'm new with Phaser, I'm wondering how can I create a group of enemies that appears at the side of the screen in a random Y position between 550px and 745 px, after they appear they need to start to fire to my character Right now I have a function to create the bullets and how they will be fired: createBullets:function(laserToFire,track,offsetX, offsetY, bulletDirection,fireRate,bulletSpeed){ weapon = gameSP.add.weapon(10, laserToFire); weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; weapon.bulletSpeed = bulletSpeed; weapon.fireRate = fireRate; weapon.trackSprite(track, offsetX, offsetY); weapon.fireAngle = bulletDirection;right } So what I'm looking to do is to have each one of my enemies within the group to fire to my character. Thanks in advance.
  24. Hi! character in my game is this cat: The cat is class extending group and contains torso and head, both are sprites with arcade physics enable on it. In the game, the cat is pushed up by applying velocity on it and it collects certain items (gameplay is similar to Flip the Gun game, check it out for better understanding). THE PROBLEM: In update method, I am constantly checking for collisionse between cat and the items:, this._sceneObjectsLayer, this.onObjectCollision, null, this); My onObjectCollision method looks like this: onObjectCollision(cat: Phaser.Sprite, item: GeneratedItem) { console.log("COLLISION SOURCE IS " + cat.key); console.log("COLLISION! OBJECT ID IS " + item.ItemID + "... UPDATE FRAME IS " + this._updateFrameCnt); this._items++; this._UI.showCount(this._items); item.KillItem(); //inside this method I call item.kill() this._sceneObjectsLayer.remove(item); } Basically, it should just update the total amount of items taken in player UI. The problem is that same item is sometimes collected multiple times. That makes sense - one collision for torso, one for head, but I would expect it not to call this method for the same item after item.kill() is called. I already debugged this and I put the variable this._updateFrameCnt to update method. Result is this. You can see that the item with certain ID is collected, then it is killed and after few frames it is collected again like no kill() was called on it: State_game.ts:451 COLLISION SOURCE IS catHead State_game.ts:452 COLLISION! OBJECT ID IS 0... UPDATE FRAME IS 2034 GeneratedItem.ts:52 KILLING ITEM WITH ID 0 //called from item.KillItem //and after few frames: State_game.ts:451 COLLISION SOURCE IS catTorso State_game.ts:452 COLLISION! OBJECT ID IS 0... UPDATE FRAME IS 2040 GeneratedItem.ts:52 KILLING ITEM WITH ID 0 //called from item.KillItem Moreover, this sometimes happens for the same sprite (for example it is called twice for head sprite). Is this expected behaviour due the reasons how Phaser handles physics? Seems really strange for me, I would expect to make physics computation after each frame and therefore no second collision should occur, because the item should be dead at the time. Am I missing something here? Thanks in advance for your responses!
  25. Hey guys, So I've just started refactoring my codebase to Phaser 3 today and I've hit a few bumps. Nothing too bad so far, but one I can't get my head around is how to bring sprites/sprite groups to the front of the display in Phaser 3. In Phaser 2 we had, but I'm struggling to find the equivalent in Phaser 3. Any help appreciated, nice one thanks. Sam