Search the Community

Showing results for tags 'sprites'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • 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

Found 187 results

  1. How to quickly rip sprites from pictures? (let's say I have 10 screenshots from Mario Brothers game and would like to extract Mario from each picture then save it as png with transparent background). GIMP has 'foreground select' option but it's far from being perfect, there is also clippingmagic but not free.
  2. var game = new Phaser.Game(400, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); //creating score value and onscreen text var score = 0; var scoreText; function preload() { // preload assets game.load.image('sky', 'assets/img/sky.png'); game.load.image('ground', 'assets/img/platform.png'); game.load.image('star','assets/img/star.png'); game.load.spritesheet('baddie', 'assets/img/baddie.png', 32, 48); } function create() { // place your assets //enabling Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); //adding a background game.add.sprite(0, 0, 'sky'); //a group containing the ground and platforms to jump on platforms = game.add.group(); //enabling physics for any object in this group platforms.enableBody = true; //creating the ground var ground = platforms.create(0, game.world.height - 64, 'ground'); //scaling to fit the width of the game ground.scale.setTo(2, 2); //stops ground from falling once player jumps on it ground.body.immovable = true; //create five ledges var ledge = platforms.create(-300, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(200, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(100, 300, 'ground'); ledge.body.immovable = true; ledge = platforms.create(-200, 200, 'ground'); ledge.body.immovable = true; ledge = platforms.create(300, 100, 'ground'); ledge.body.immovable = true; //create the player and its settings player = game.add.sprite(32, game.world.height - 150, 'baddie'); //enabling physics on player game.physics.arcade.enable(player); //giving player a slight bounce player.body.bounce.y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; //walking left and right animations player.animations.add('left', [0, 1], 10, true); player.animations.add('right', [2, 3], 10, true); //create group for stars stars = game.add.group(); stars.enableBody = true; //creating 12 stars evenly spaced apart for (var i = 0; i < 12; i++) { //create a star inside of the 'stars' group each 33 px apart var star = stars.create(i * 33, 0, 'star'); //giving it gravity star.body.gravity.y = 6; //giving each star a random bounce value star.body.bounce.y = 0.7 + Math.random() * 0.2; } scoreText = game.add.text(16, 16, 'Score: 0', {fontSize: '32px', fill: '#000'}); } function update() { // run game loop //collide player and stars with platforms var hitPlatform = game.physics.arcade.collide(player, platforms); //built in keyboard manager cursors = game.input.keyboard.createCursorKeys(); //reset players velocity (movement) player.body.velocity.x = 0; //moving with arrow keys if (cursors.left.isDown) { //move to left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { //move right player.body.velocity.x = 150; player.animations.play('right'); } else { //stand still player.animations.stop(); player.frame = 2; } //allow player to jump if touching ground if (cursors.up.isDown && player.body.touching.down && hitPlatform) { player.body.velocity.y = -350; } //checking for collision with stars and platforms game.physics.arcade.collide(stars, platforms); //checking if player overlaps with star game.physics.arcade.overlap(player, stars, collectStar, null, this); } function collectStar (player,star) { //removes star from screen star.kill(); //add and update score score += 10; scoreText.text = 'Score: ' + score; } I can't seem to figure out why, but once I changed the sprite (which has fewer animation frames than the original), some strange errors popped up. The two error messages say: Uncaught TypeError: Cannot read property 'getFrameIndexes' of null Uncaught ReferenceError: stars is not defined The animation frame ranges don't seem to go out of bounds and I've already defined my 'stars' variable in the create function. Any ideas on why I'm getting these weird error messages? (the spirtesheet of the player is attached below)
  3. I'm at my wit's end. I've tried across several game engines and drawing programs now, tried every little setting and have really read everything there is to read. I just cannot get a sharp appearance on any asset as soon as they are rendered in an HTML Canvas or WebGL. In desktop applications, they look fine. Here, for example, is a good asset - it's sharp and clear and as it as a PNG, it should scale down nicely (I need it about 25% of this size): As soon as I load it as a sprite via Phaser, I get a result like this (don't mind the money-man): It's blurry and it's even worse when scaled down (here scaled to 0.1x, 0.1y): I'm on an iMac, so maybe it has to do with the retina display, but I am getting similar results on lower quality monitors as well. What am I doing wrong? When I load other assets in, such as the ones used in the Phaser 2 tutorial, they look crystal clear. I feel like there's something really simple that I am missing. :-( My old (finished) build was in Unity 2D, and I was having the exact same issue. This is why I swapped to Phaser instead of using the Unity WebGL build. I've tested on both engines, and some assets render perfectly (particularly, pixel art renders perfectly. Other, more vector-like assets render poorly). Really hope there's somebody here who can help. :-( Yolanda
  4. Sprites are overlapping on collide

    Hello, Im making a game where you have to jump some cars, you only lose if you touch the left side of a car. the problem is when the character lands over a car both sprites overlap, and if another car comes behind you will collide with it instead of pass over it I'm using arcade physics. I'll let you a couple screenshoots of this. Is there some way to avoid this?
  5. Just finding my feet directly in Phaser3 (no Phaser2 exp) [and indeed this forum! Hello there!] The sprites created with this.load.image('sky', 'assets/skies/space3.png'); does the name need to be unique to 'game' or to the 'scene' or not at all? (which i imagine causes problems or is there also a 'spriteID' system too?)
  6. The Canvas doesn't show sprites

    Hi community, I'm having a problem with canvas and sprites. I'm new in this matter and I hope that you could help me The problem, as the title says, is that I can't see the sprites on canvas. I've tried to call the functions preload() and create() manually in the browser's console and I get a warning that says: Phaser.Cache.getImage: Key "bg" not found in Cache. The warning appears for every Key that I'm using for. There is my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Cat Catcher</title> <script src="./js/phaser.min.js"></script> <script> var game = new Phaser.Game(800, 600, Phaser.CANVAS, {preload: preload, create: create, update: update}); var cat, catcher, cursors, txtScore, score; function preload() { // load assets game.load.image('cat', '/img/cat.png'); game.load.image('catcher', '/img/cat.png'); game.load.image('bg', '/img/bg.png') } function create() { //setup game game.add.sprite(0, 0, 'bg'); catcher = game.add.sprite(400, 300, 'catcher'); catcher.anchor.setTo(.5,0); game.physics.enable(catcher, Phaser.Physics.ARCADE); cat = game.add.sprite( Math.random() * game.width, Math.random() * game.height, 'cat' ); game.physics.enable(cat, Phaser.Physics.ARCADE); score = 0; var style = { font: '20px Arial', fill: '#FFF' }; txtScore = game.add.text(10, 10, score.toString(), style); cursors = game.input.keyboard.createCursorKeys(); } function update() { //game loop code if(cursors.left.isDown){ catcher.x -= 5; catcher.scale.x = 1; } if(cursors.right.isDown) { catcher.x += 5; catcher.scale.x = -1; } if(cursors.up.isDown) { catcher.y -= 5; } if(cursors.down.isDown) { catcher.y += 5; } game.physics.arcade.overlap(catcher, cat, catHitHandler); } </script> </head> <body> </body> </html> I'm using Phaser v2.10.0 I wish you could tell me where the problem is, Thanks!
  7. I was hoping someone could point me in the right direction here. I see that I can set world bounds to detect when a sprite is out of bounds of that world. But I don't think that will help in what I am trying to do. I have a background image and a sprite. When the sprite reaches near the edge of the screen, the camera needs to pan the screen. My question is, is there a way to determine when the character reaches, for example, the edge of the screen to the left(minus 20 pixels or so) so that I can begin panning the camera then?
  8. Hi! My name is Andrei and I am looking for a pixel artist to help with my hobby game project. The game I'm working on is called Feudal Tactics and it is a multiplayer turn-based wargame, similar to Advance Wars. You can find out more about Advance Wars on Wikipedia: Advance Wars - Wikipedia. Feudal Tactics will be a completely free browser game built on HTML5 & JavaScript, with asynchronous play mechanics. I am looking for a pixel artist that can draw low-res terrain tiles, military unit sprites (with animations), a logo for the game and a favicon for the website. The graphics must have an old, feudal period Japan look & feel. I can provide three sources of inspiration so that you can better understand what type of art I want: first, the pixel art of EyeCraft posted on the Pixelation forums, which is pretty much exactly what I'm looking for: GR#060 - Super Daimyo - Low Res Game Art; check his last posted images on the 4th page of the topic or open the following direct links: http://i188.photobucket.com/albums/z212/gastrop0d/shog_mock10.png http://i188.photobucket.com/albums/z212/gastrop0d/dai_mock_2_0-1.png second, Toen's Medieval Strategy Sprite Pack: a lovely graphics pack which I'm actually using as a placeholder for now and last but not least, the original Advance Wars graphics: a quick search for the terms "advance wars gba screenshots" will get you plenty of results (you can also find the entire spritesheet ripped from the game) I am looking to pay around 30$ per hour or I can pay per asset. Please note that I am looking for just one person for this job and it will not be full-time employment. If you are interested please drop me a message: pixelart@feudaltactics.com It would be great if you could provide me with a link to your portfolio and showcase some work in a style similar to what I'm looking for (low-res top-down tiles & sprites). If you can only work on the game graphics, or only on the logo, but not both, please state so in your email. Thanks for reading this and have a nice day!
  9. Best way to handle Character with shadow

    I was wondering what is the best way to handle shadow for a "character". I made a character and i want to put a shadow at the bottom a kind of "circle" with opacity, for convenience let's say it's gonna be a transparent PNG. The way i can think of : - (1) Just add the sprite to the game, this leads to duplicated calculations in the update part cause i have to update both the "character" sprite and his shadow; - (2) Add the shadow as a child sprite of the "character", this leads to having the shadow on top of the sprite instead of back to it; - (3) Add the "character" sprite as a child of the shadow sprite, this seems not logical, but it works somehow; - (4) Create a group and add both the shadow and the sprite, (havn't test it but most likely) this leads to define specific property to the group for the size, the position and the overflow boundaries for collision relative to the "character" sprite and the shadow; - (5) Using a filter (Shader) applied on the hole game, with my character position as uniform to render the shadow directly on the "groundLayer". What do you think please ? Is there a better way that i am missing ? Thanks.
  10. Collisions without velocity

    Hi, I'm making a top-down game with the camera that follows the player. Early on, I realized there was a persistent camera jittering effect when using velocity, so I switched my movement to manually change the players x & y coordinates. However, when I started adding enemies to the game that also had arcade physics bodies, I realized that my bodies would not collide. Looking into this, I found this response from the Phaser devs, saying that the problem would be solved in P2. I switched both my bodies to P2, but they still will not collide. Is there a way I can work around both the camera and collisions issue? Thanks in advance for the help.
  11. Hi, I'm making a top-down game with the camera that follows the player. Early on, I realized there was a persistent camera jittering effect when using velocity, so I switched my movement to manually change the players x & y coordinates. However, when I started adding enemies to the game that also had arcade physics bodies, I realized that my bodies would not collide. Looking into this, I found this response from the Phaser devs, saying that the problem would be solved in P2. I switched both my bodies to P2, but they still will not collide. Is there a way I can work around both the camera and collisions issue? Thanks in advance for the help.
  12. hi im new to programming and phaser im making a game where i need to drag a "chip" onto a "chipreader" and when they overlap hide both and replace with a 3rd sprite which is a "chipped reader" and first i tried funtcion preload(){ game.load.images("chipreader"', images/chipreader) game.load.images("chip"', images/chip) game.load.images("chippedreader', images/chippedreader) } function create() { game.input.mouse.capture = true; game.physics.startSystem(Phaser.Physics.ARCADE); var chipreader=game.add.sprite(260, 535, "chipreader"); chipreader.anchor.setTo(0.5, 0.5); chip.inputEnabled = true; chip.input.enableDrag(true); game.physics.arcade.enable([chip,chipreader]); if (game.physics.arcade.overlap(chip,chipreader )) { chipreader.visible= false chip.visible= false game.add.sprite(260, 535, "chippedreader") }; but nothing happened and i tried so many other ways but it just isn't working :S
  13. Hi, probably I dont fully understand how phaser engine works. For my test I inicialize 10k sprites and than immediately kill them ( sprite.kill() ). Unfortunately I have 15FPS, but I render nothing.. Why I have I have this FPS drop, I need kill sprites and revive it when I need them so I dont need any sprites's update, render, postupdate... functions. The debug plugin says slow around 20ms on preUpload-stage and 20ms postUpdate-stage. Can you someone help me please? Thank you very much Daniel
  14. Animating Sprites

    I'm trying to add some new animations by adding a new "if" section in my "update:function" code. All of my "walking" and "sprinting" animations following the first "if" section play as they should. However, when I attempt to animate my crutch attacks under the second "if" section, only the first frame of those animations is played. I'm using the same attack button because it's the same attack being animated in all directions. I combo'd with my arrow keys so that I could use the same attack key. When I change them to all to "else if" statements under my first "if" section they don't play because it is my understanding that once a key is used in an "if" statement all other attempts to use that key under that section will be ignored. My code is listed below. Solution? if(cursors.left.isDown) { player.body.velocity.x = -200; player.scale.setTo(.7, .7); player.play('walking'); } else if(cursors.right.isDown) { player.body.velocity.x = 200; player.scale.setTo(-.7, .7); player.play('walking'); } else if(cursors.down.isDown) { player.body.velocity.y = 200; player.scale.setTo(.7, .7); player.play('forward'); } else if(cursors.up.isDown) { player.body.velocity.y = -200; player.scale.setTo(.7, .7); player.play('backward'); } else if(sprintl.isDown) { player.body.velocity.x = -400; player.scale.setTo(.7, .7); player.play('sprinting'); } else if(sprintr.isDown) { player.body.velocity.x = 400; player.scale.setTo(-.7, .7); player.play('sprinting'); } else if(sprintu.isDown) { player.body.velocity.y = -400; player.scale.setTo(.7, .7); player.play('backsprint'); } else if(sprintd.isDown) { player.body.velocity.y = 400; player.scale.setTo(.7, .7); player.play('forwardsprint'); } else{ player.animations.stop(); player.frame = 29 player.body.velocity.y = 0; } if(cursors.left.isDown && fireButton.isDown) { player.body.velocity.x = -50; player.play('sidecrutch'); } else if(cursors.right.isDown && fireButton.isDown) { player.body.velocity.x = 50; player.play('sidecrutch'); } else if(cursors.down.isDown && fireButton.isDown) { player.body.velocity.y = 50; player.play('frontcrutch'); } else if(cursors.up.isDown && fireButton.isDown) { player.body.velocity.y = -50; player.play('backcrutch'); }
  15. Sprite Animations

    I'm trying to add some new animations by adding a new "if" section in my "update:function" code. All of my "walking" and "sprinting" animations following the first "if" section play as they should. However, when I attempt to animate my crutch attacks under the second "if" section, only the first frame of those animations is played. I'm using the same attack button because it's the same attack being animated in all directions. I combo'd with my arrow keys so that I could use the same attack key. When I change them to all to "else if" statements under my first "if" section they don't play because it is my understanding that once a key is used in an "if" statement all other attempts to use that key under that section will be ignored. My code is listed below. Solution? if(cursors.left.isDown) { player.body.velocity.x = -200; player.scale.setTo(.7, .7); player.play('walking'); } else if(cursors.right.isDown) { player.body.velocity.x = 200; player.scale.setTo(-.7, .7); player.play('walking'); } else if(cursors.down.isDown) { player.body.velocity.y = 200; player.scale.setTo(.7, .7); player.play('forward'); } else if(cursors.up.isDown) { player.body.velocity.y = -200; player.scale.setTo(.7, .7); player.play('backward'); } else if(sprintl.isDown) { player.body.velocity.x = -400; player.scale.setTo(.7, .7); player.play('sprinting'); } else if(sprintr.isDown) { player.body.velocity.x = 400; player.scale.setTo(-.7, .7); player.play('sprinting'); } else if(sprintu.isDown) { player.body.velocity.y = -400; player.scale.setTo(.7, .7); player.play('backsprint'); } else if(sprintd.isDown) { player.body.velocity.y = 400; player.scale.setTo(.7, .7); player.play('forwardsprint'); } else{ player.animations.stop(); player.frame = 29 player.body.velocity.y = 0; } if(cursors.left.isDown && fireButton.isDown) { player.body.velocity.x = -50; player.play('sidecrutch'); } else if(cursors.right.isDown && fireButton.isDown) { player.body.velocity.x = 50; player.play('sidecrutch'); } else if(cursors.down.isDown && fireButton.isDown) { player.body.velocity.y = 50; player.play('frontcrutch'); } else if(cursors.up.isDown && fireButton.isDown) { player.body.velocity.y = -50; player.play('backcrutch'); }
  16. Spritesheets with 2d array of sprites

    Apologies if newbies ask this all the time, but I'm new to Phaser and don't know what to search for. I want to make a spritesheet with m rows and n columns, where every sprite on the top row is the first cell of an animation that plays when the sprite is at that orientation. So if I have a sprite sheet that is 5 cells across and 3 cells deep, I want the middle top cell to represent a spaceship when it is facing forward with cell 1 of the animation of the spaceship jets, then the middle middle cell is the spaceship facing forward with cell 2 of the spaceship jets animation, and the middle bottom cell is the last cell of the spaceship jets animation. How do I tell phaser to loop through these cells on the spritesheet when no key is pressed? The left turn animation is similar - how do I tell phaser to loop through 3 cells of left turn animation in the 2d spritesheet plane? Is there any speed advantage to having sequential animation cells next to eachother, or does it not matter so I could place all the animation cells in a line on the spritesheet and display any of them whenever? (The spritesheet attached isn't finished, but you can imagine)
  17. Hey guys, is it possible to select a sprite (via actionManager or scene.pickSprite, whatever) so the sprite transparency is taken into account? For example, in this playground the sprite is a circle: https://www.babylonjs-playground.com/#PVYYAQ , but it is clickable on the invisible corners of the square image. Is there any way to avoid that? Thanks,
  18. is there any way to do a gradient tint in sprites/images in phaser? i'm using canvas mode , not auto or webGL Thanks. Sorry, for bad english :|
  19. Proper way to animate sprites

    I'm wondering what the best way to animate a sprite is. Is there a basic example or tutorial out there somewhere? I have ten images in a spritesheet that are part of an idling animation, and I made a texture for each of the images. I put the textures in an array, and my plan is to just change the texture of my sprite each frame in the gameloop, looping through the array of textures over and over again. Maybe using Sprite.setTexture ??? Is that a good way to go about it? Any links to info or tutorials would be much appreciated. Thanks,
  20. Hi, I'm currently preloading in a single sprite atlas (png image with a json data file) for one sprite (by this i mean a character i want to animate). However, the problem is that the sprite atlas image file is pretty big (over 8000x6000 sometimes) and there's FPS drops on lower end machines/older browsers. I'm not 100% sure that the FPS drops are caused by the large image file, but when i reduced the sprite atlas image file's size, it fixed the issue. My question is, is there a good way I can assign multiple sprite atlases to one character/sprite? Also, would that even help the issue? I want to keep decently high resolution frames so in the end this solution doesn't actually reduce the total size of images being preloaded, just preloads multiple smaller images instead of one huge one. I want to do something like: game.load.atlas('mysprite', 'assets/sprites1.png', 'assets/sprites1.json'); game.load.atlas('mysprite', 'assets/sprites2.png', 'assets/sprites2.json'); this.sprite = game.add.sprite(game.world.centerX, 300, 'mysprite'); // 'walking' is part of the sprites1.png this.sprite.animations.add('walking', Phaser.Animation.generateFrameNames('walking', 1, 6), 5, true); // 'flying' is part of the sprites2.png this.sprite.animations.add('flying', Phaser.Animation.generateFrameNames('flying', 1, 6), 5, true);
  21. Hi guys, So, I stuck in a little problem here. I'm building a chat system for my casual game, but I'd like to put icons in the middle of the text, like Whats App messages with emoticons. Does anyone know how can I do it or have any ideas to solve it? EDIT: Just to clarify, the text and emoticons (images/sprites) must be rendered in the same sentence, like when we sent a message with emoticons on the WAPP chat. Thanks!
  22. Sprite Movement

    Hey Guys, I'm currently moving my camera around a series of sprites but the movement is painful to look at and jerky when moving the sprites and especially with higher speeds, is there anything you can do to fix/help the lag/poor performance as it isn't really usable as a build in this current state. I also as @Wingnut said have the issue that the transparent background is still clickable. Here is my current playground: https://www.babylonjs-playground.com/#41N19L#3 @Deltakosh @Wingnut @JohnK Any incites Guys?
  23. I'm trying to kill a sprite after it passes the bounds in my game. I've tried using the phaser example https://phaser.io/examples/v2/sprites/out-of-bounds this is my entire script, please help me <script type="text/javascript"> var game = new Phaser.Game(1040, 450, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var platforms; var player; var bot; function preload(){ game.load.image('sky','assets/rpg-bg.png'); game.load.spritesheet('player','assets/player-walk.png', 87,125); game.load.spritesheet('player-attack','assets/player-shot.png', 113, 132); game.load.image('player-death','assets/player-death.png'); game.load.spritesheet('bot','assets/bot.png', 112, 141); } function create(){ game.physics.startSystem(Phaser.Physics.ARCADE); // Backgrounds game.add.sprite(0, 0, 'sky'); bot = game.add.sprite(1000, game.world.height, 'bot'); game.physics.arcade.enable(bot); bot.body.gravity.y = 100; bot.anchor.setTo(0.5, 0.5); bot.body.collideWorldBounds = true; bot.body.checkCollision.none = true; bot.animations.add('run'); bot.animations.play('run', 10, true); bot.checkWorldBounds = true; bot.events.onOutOfBounds.add(killBot, this); // Player player = game.add.sprite(32, game.world.height, 'player'); game.physics.arcade.enable(player); player.body.bounce.y = 0.1; player.body.gravity.y = 100; player.body.collideWorldBounds = true; player.animations.add('run'); player.animations.play('run', 10, true); } function update(){ // Bot Movement bot.body.velocity.x = -150; } function killBot(bot){ bot.kill(); } </script> Thank you
  24. Controlling rendering of sprites

    Hello everyone, I have a case where I have lots of sprites on screen and each sprite has a Phaser.Text attached to it. Right now, I'm rendering in this order : renderSprite -> renderText, renderNextSprite -> renderNextText, thus having to flush the context every time I draw the text since it's not using a common sprite atlas. What I'd like to do is : renderAllSprites -> renderAllTexts So my question is, is there a way to tell Phaser not render any of these objects, and in the render() function of my current state, call what to render manually ? I'm opened to other suggestions, but please bear in mind that I cannot switch to bitmap fonts due to the fact that I need to support many languages. Thanks.
  25. I'm in search for a way to dynamically change a sprite. Let's say I have a spriteManager with spriteA.png. and a sprite called sprite linked to said manager. I want to change the sprite/spriteManager to spriteB.png. This might happen once every frame, so simply creating a new sprite won't quite cut it. I see the manager has a sprites array as well as a _spriteTexture, but I don't see any function that allows me to change these. Am I missing something that would allow me to do this, or are there issues I should be aware of?