Search the Community

Showing results for tags 'sprite'.



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

  1. 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!
  2. 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.game.physics.arcade.overlap(this._cat, 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!
  3. 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 (http://phaser.io/examples/v2/arcade-physics/angle-to-pointer#gv) 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): https://codesandbox.io/s/k0mq2lj533 ~~~~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!
  4. 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.
  5. 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
  6. Hello I have spine animation created by https://github.com/orange-games/phaser-spine 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?
  7. 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... ?
  8. 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: https://www.babylonjs-playground.com/#9RUHH#29 Expected result: Player clicked will be triggered instead of Sphere clicked.
  9. 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?
  10. 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: https://codepen.io/rhernando/pen/8fb06d28861d63ca5a6868f88c71f150?editors=0010 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.
  11. 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.
  12. How can one create group sprite at intervals? Here is my code <code> function createPlate() { this.add.group ({ key: 'goodPlate', repeat: 4, setXY: { x: 70, y: 100, stepX: 120, stepY: 20 } }); } this.time.events.loop(3000, createPlate, this); </code>
  13. 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?
  14. 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.
  15. 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?
  16. Hi guys, I'm facing a problem.I have a leaderboard .The profile pic in those should be rounded masked.So I put mask for all profile pics.But when i scroll leaderboard ,masks are not moving with respect to their sprite.Please help guys.Its urgent
  17. Hi guys, How do I make it that the black square moves with the red square but NOT scale? Example: jsfiddle When you click on the small blue square the big white square gets smaller. The big red square scales with the white square. This is what I want but... the little black square should not scale but change position, is that possible? The black square should be in the red square BUT with the same height and width.
  18. 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: https://puu.sh/Bi2bS/e442b24781.mp4 . It makes use of normal maps to create semi 3d lighting, together with shadows that I have been working on: https://github.com/TarVK/pixi-shadows . 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: https://github.com/TarVK http://ludumdare.com/compo/author/thegunmaster/ 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
  19. Has anyone encountered a problem with the load progress reporting incorrectly when loading sprite sheets? I'm loading a large sprite sheet and loading goes from .5,.33,.66, to 1.00 immediately and loads these numbers every time. The game does eventually load fine, but way after load progress reports 100%. Here's the code: this.load.multiatlas('sprite_sheet1', 'sprite_sheets/sprite_sheet1.json', 'sprite_sheets'); this.load.on('progress', function (value) { console.log(value); }); I'm using Phaser 3. Anyone see any problems with the way I'm doing this?
  20. I would like to increase a sprite's hit area so that its easier to tap on it on mobile. I would like to keep its body the same size however as there are collisions in the game that depend on it. How can I accomplish this? I tried paddle.body.setSize(500, 200, 0, 0); but this seems to increase the body size, screwing up collisions. Thanks!
  21. How to pass the cursor object to a method that belongs to a class that inherits the Phaser.Sprite class? I have a class that inherits from Phaser.State in which I create a cursor object and pass it to the update method from another class. class Play extends Phaser.State { create() { this.physics.startSystem(Phaser.Physics.ARCADE) ... this.player = new Player({ game: this.game, x: 32, y: this.world.height - 150, asset: 'dude' }) this.game.add.existing(this.player) } update() { const cursors = this.input.keyboard.createCursorKeys() this.player.update(cursors) } } Player class - problem occurs in the if condition: class Player extends Phaser.Sprite { constructor({ game, x, y, asset }) { super(game, x, y, asset) this.game.physics.arcade.enable(this) this.body.bounce.y = 0.2 this.body.gravity.y = 300 this.body.collideWorldBounds = true this.animations.add('left', [0, 1, 2, 3], 10, true) this.animations.add('right', [5, 6, 7, 8], 10, true) } update(cursors) { this.body.velocity.x = 0 if (cursors.left.isDown) { this.body.velocity.x = -150 this.animations.play('left') } } } Error message: "TypeError t is undefined"
  22. jd.joshuadavison

    Overlap ignores scroll factor

    I'm using a callback function on the overlap method, but it's firing at the wrong time. After a bit of calculation/trial and error I worked out that it is firing where the sprite would have been if the scrollFactor of the sprite was the default setting of 1. I assume this is a bug? See demo on jsFiddle. Update: it also ignores the objects origin and assumes its origin is the default 0.5. I've updated the demo. Update 2: I'm now fairly certain this is not expected behaviour, so I've raised an issue on GitHub. Thanks, Josh
  23. Sammdahamm

    Trying to implement "moveToPointer"

    Hi Guys, so Phaser 2 had a method, game.physics.arcade.moveToPointer() which moved a sprite with a given velocity towards the cursor. It seems like this has been replaced in Phaser 3 by a "moveTo()" method in ArcadePhysics, so I'm trying to reimplement it myself. I create a spriteGroup: this.projectiles = this.physics.add.group({collideWorldBounds: true}) and then later create & attempt to fire a projectile from within a "fireProjectile" method: this.firePlayerProjectile = function(projectileType){ let projectile = this.projectiles.getFirstDead(true, this.player.sprite.x-16, this.player.sprite.y-32, projectileType); this.scene.physics.moveTo(projectile, {x: this.scene.input.x + this.scene.cameras.main.scrollX, y: this.scene.input.y + this.scene.cameras.main.scrollY}, 750); } This does create the projectile sprite in the correct location, but rather than then travelling towards the target location, it just sorta of flashes and disappears after a second. Can anyone tell what I might be doing wrong? How do I get the projectile to move to a given location (and beyond) at a constant velocity? Thanks, Sam
  24. andrei.nicolae

    Sprite with alpha

    Hi guys, I have a tiny sprite placed in a png sized like the game, with alpha, so I only see my tiny sprite surrounded by blank space. It's done this way because I want to place it in (0, 0) and be displayed in it's original position. So, I'm trying to place this sprites and they all go in the same place, center of the screen, like they are trimmed sprites. Any solution for this? Thank you.
  25. alexoy

    Hide a sprite

    Hi, Looks like there is no option to hide a sprite, like sprite.isVisible = false; - could you add it please? But please don't mention setting the size to 0 or removing/recreation the sprite it's an ugly hack, we do not do that with meshes and other things, right?!