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

  1. traxtrack

    Issue with Obstacle velocity

    Hello, I have an issue which keeps me stuck and I could not yet figure it out after being stuck for quite some time. I have a simple game in which obstacles ( spirtes of other cars) drop down from the top of the screen and I am trying to avoid those with my own car not to crash into them. The issue is that on some mobile devices the cars drop WAY faster than on my own device, I tested this from several different phones, the velocity differs depending on the phone, on some the obstacles drop faster on some they drop really slow. What oculd cause such an issue? I can provide code if it helps. Thanks,
  2. emilyso321

    2D Artist for Hire

    Hello, I'm Emily and I'm a freelance artist looking for paid projects, small or part-time. I'm currently booked up on revenue share projects, so I'm only available for gigs that pay as I work. I specialize in 2D game graphics, including: - UI - backgrounds - 2D animations - illustrations/concept art I'm also open to doing anything else 2D animated or fully illustrated (cover art, comics...) For samples of my portfolio, please visit: http://emilyso.com/portfolio/game-artgraphics/ http://emilyso.com/portfolio/concept-art/ http://emilyso.com/portfolio/2d-animations/ If you feel my style of art would be suitable for your project, please contact me at: emilyso321@gmail.com Otherwise, please feel free to check out/play some games I've worked on: http://emilyso.com/games/ Thank you for your time and consideration. I hope you enjoy my work
  3. Hi all, I've recently started a project that I gave myself to learn more about web based applications. I'm working on building character creation menu, (based on NITW by infinite fall), of which the design I had in mind would eventually look something like this: What I have so far is just a test of one of the sprites I put together: mae.mp4 The sprite is made using just one layer, at the moment. Essentially, while I don't think the concept is too difficult to put together, I'm having trouble finding examples of how to implement relevant sections of code using Phaser 3. If you might be able to give me some examples or resources to look into as to how I could build some of the features, I would greatly appreciate that. So, examples/tutorials/advice I'm looking for regards: -Building multiple menus of images, each accessible by clicking on relevant category titles. -Building one specific menu which gives options for choosing your starting sprite. (Will be cat/alligator/dog etc) -Clicking on images in a certain feature menu triggering that image to be layered onto the sprite. (Where only one of each category can be equipped at any one time) -How to tint the colour of the sprite and clothing objects. (I think layering of facial features may be necessary here, so I may have to restructure my sprite sheet? How does layering work in Phaser 3?) Thanks for having a look, hopefully gathering some examples in one place will help the next person trying to make a similar game too.
  4. 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.
  5. 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)
  6. 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
  7. ZyMonogatari

    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?
  8. 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?)
  9. lucasdavidferrero

    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!
  10. 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!
  11. 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?
  12. Nephelococcygia

    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.
  13. Shermz345

    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.
  14. 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.
  15. 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
  16. 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
  17. sbacuse15

    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'); }
  18. Meladyfreshness

    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)
  19. sbacuse15

    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'); }
  20. 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,
  21. 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 :|
  22. NITWIT

    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,
  23. 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);
  24. 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!
  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?