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


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 696 results

  1. Hirikgg

    Need help in resizing sprite sheet

    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
  2. 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!!!
  3. 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.
  4. 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.
  5. 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!
  6. 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.
  7. 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!
  8. 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
  9. 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'pop', 10, false, true);
  10. Hello everyone, When I display a sprite in front of a mesh that has emissiveTexture or emissiveColor, the mesh can be seen through the sprite. for example : Is there a way to occlude the emissive object with a sprite (prevent the emissive mesh to be seen through the sprite)?
  11. Shex

    Image is pixelated

    Hi I'm trying to run my game on a mobile device with the Phaser 3 framework and sprites are rendered as very pixelated images. I'm running the game through the Facebook web player. I'm using a Samsung Galaxy S6 device which the resolution is 1440x2560 with a device pixel ratio of 4. I have setup the same configuration on my PC through the Chrome mobile debug view (1440/2560 with pixel ratio of 4) and the images look way better. I have attached two screenshot of the PC (good) and mobile (bad) devices to show the difference. The game is rendered as CANVAS and I'm using the window.innerWidth and window.innerHeight to define the sizes. Does anyone have any insight about what's going on?
  12. Hi, I've checked a couple posts on this forum regarding extending classes in Phaser, but get confused on how it exactly works, below is the code I'm trying to implement to add stats to a sprite: class spriteStats extends Phaser.GameObjects.Sprite { constructor (scene, x, y,myExtra) { super(scene, x, y); this.setTexture('../assets/testsprite.png'); this.setPosition(x, y); } setStats(speed, jump){ var stats = { "speed": speed, "jump": jump, } } getStats(){ return stats } } But when I attempt to create the sprite: var hero = this.add.spriteStats(100, 450, 'hero',0).setInteractive(); hero.setStats(5,5); it gives me a: "Uncaught TypeError: this.add.spriteStats is not a function". I don't think I'm extending the class correctly. Please forgive me, as I'm still relatively new to JavaScript. Thanks!
  13. GivoNeedsHelp

    Angle to pointer and Anchor to sprite

    Hello! I'm trying to make a game like raze (flash game from 2010~ish) and I currently have a level import system and moving animated sprite. I am using matter.js for the physics. I am also using phaser 3 v3.12 as tiled hit detection(? idk how to say) breaks in the the newer versions. I saw the demo for angle to pointer ( and wondered if something like it existed in Phaser 3. and also, it would be great if i could anchor a sprite onto another moving one (the weapon on the player) as then it would work, but idk how to do it as I couldn't find anything for phaser 3. Thanks for your help, I might not respond right away! AND here is my project link(so i can work on it on the multiple different computers that I have): ~~~~technically I'm copying the code from the "making modular game worlds in phaser 3 part 5" demo, but this is how I get started on projects as I'm not good at setting things up!
  14. pitaman

    Custom Bitmap Font from Images Tool

    Hi everyone. I wanted to see if there was a good tool for creating bitmap fonts for games. One that can get an image created in Photoshop or Illustrator of a custom stylized font character set and create a sprite based bitmap font. I've used Shoebox for a long time, but it hasn't been updated for a few years and it's made in Adobe Air. Is there a more modern and better alternative that doesn't rely on Adobe Air? I've seen other tools that takes windows fonts and let's you create limited styling on them, but that's not what I'm looking for. Any help would be appreciated.
  15. Hey, I got a lot of ES6 classes for my game, so I use a factory, that is hooked into phaser as a plugin. Complete code below. However when I do 'const PLAYER = this.add.player(x,y);' it does not return the player object and the constant PLAYER is null. Can someone help me out here? What am I missing? class ObjectFactory extends Phaser.Plugins.BasePlugin { constructor(pluginManager) { super(pluginManager); pluginManager.registerGameObject('player', this.createPlayer); pluginManager.registerGameObject('overlay', this.createOverlay); } createPlayer(x, y) { return this.displayList.add(new Player({ scene: this.scene, x: x, y: y })); } createOverlay(x, y, w, h) { return this.displayList.add(new Overlay({ scene: this.scene, x: x, y: y, w: w, h: h })); } } Plugin config: plugins: { global: [ { key: 'Factory', plugin: ObjectFactory, start: true } ] }, cheers
  16. Hello I have spine animation created by and i need to attach sprite to it. I mean, when spine animation is in action, the sprite (weapon) should move with it. How can i do this?
  17. Hey, when I assign setDepth(number) to Groups and Tilemaps, it seems not to work. Only after setting setDepth(number) on an already added sprite, it works. Any Ideas on it? Complete code below. // Tilemaps already created // # Configure z indexes layer.background.setDepth(0); //dynamic tilemap layer layer.midground.setDepth(1); //dynamic tilemap layer layer.objects.setDepth(2); // group layer.enemies.setDepth(3); // group layer.player.setDepth(4); // group layer.ground.setDepth(5); //dynamic tilemap layer layer.effects.setDepth(6); // group layer.water.setDepth(7); //dynamic tilemap layer //later on const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); //result: SPRITE is not in front of layer.background .. // BUT when I also write: const SPRITE = this.add.sprite(0,0,'player') layer.player.add(SPRITE); SPRITE.setDepth(0); // Now the sprite is before layer.background... ?
  18. Refer to the playground url below, sprite is in front of the sphere, however the click / pick event triggered on backend sphere first regardless of the sprite's position. Url: Expected result: Player clicked will be triggered instead of Sphere clicked.
  19. I have a sprite of a character moving and I'm trying to apply physics collide on it that when it hits a rock for example health is decreased. I managed to achieve collision but as rectangular shape of the image, what I want to achieve is the collision happens on the boundaries of the character itself. I used PhysicsEditor to generate the JSON file, but I'm still not sure how to use it to achieve pixel perfect collision. Any thoughts?
  20. Rodrigo

    Sprite Tint on Canvas

    Hello, I'm seeing this behaviour that I can't understand, when applying a tint color to a sprite while using canvas as renderer. Right now for CORS reasons we're forced to use canvas in our app. I say this because in webgl the issue doesn't happen. The thing is the we're cutting images into stripes and applying a tint to each stripe, but this creates a line between the stripes: Just click the button to apply/remove the tint and you'll see the issue. Why this happens?, is there a way around this or is just what we get in canvas? Best, Rodrigo.
  21. dude78

    change sprite bounds

    Hello guys. I use: this.load.atlas('spriteName'); to load a sprite. To see its bounds and body (for interacting with other objects) we can use: this.debug.body('spriteName'); this.debug.spriteBounds('spriteName'); At the beginning these sizes are the same but we can change body size in such a way: (docs) this.spriteObject.body.setSize(width, height [, offsetX] [, offsetY]); The question: how to change sprite bounds? Is there any way? Thanks in advance.
  22. How can one create group sprite at intervals? Here is my code <code> function createPlate() { ({ key: 'goodPlate', repeat: 4, setXY: { x: 70, y: 100, stepX: 120, stepY: 20 } }); }, createPlate, this); </code>
  23. Zampano

    Group Alpha

    Hey everyone. Is there a possibility to use something like a "master alpha" for a group of sprites instead of them all having their individual alphas changed? If that's not clear enough: I have a group of overlapping sprites that make up a bigger element. Now I want to fade this in/out as one single object using a tween. Instead, the sprites fade individually which results in them overallbeing less transparent in overlapping areas as well as initially covered sprites to shine through for the duration of the fade. Obviously, I could alternatively just make it all one sprite, but due to multiple possible combinations, that would be quite costly. Does anyone have an idea? Thanks! EDIT: After some more research, I think rendertexture might be what I need, right?
  24. AlbertoVGDD

    Can´t manage AnimatedSprite to work

    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.
  25. I'm able to pick sprites with Scene.pickSprite, but is there a way to pick them with scene.pickWithRay? PickWithRay only seems to return meshes (I've set isPickable to true on the sprites and confirmed that they're pickable with Scene.pickSprite). The use-case is, I'm trying to pick sprites with a 3DoF VR Controller, so I don't have a 2d pointerX and pointerY to work with, only the controller's forward ray. I'm thinking that my options are: a. Use Vector3.Project to try to unproject the pickedPoint of pickWithRay (I'm using a skybox, so the ray will always hit something), then put that point into Scene.pickSprite. I tried this quickly, but I think the unprojected point might be off b. replace the sprites with billboarded mesh instances that can directly be hit with pickWithRay. I suspect this might be the easiest option? Or is there some easier way to pick a sprite with a ray?