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
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 157 results

  1. 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: [email protected] 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
  2. I recently started experimenting with Filters (shaders) and while it runs well when using a single filter on the world, applying a filter to my sprites seems to be killing performance. Even a simple filter that does nothing but output the color set on just 50 sprites is dropping my framerate from 50 to 18, even when sprites are offscreen. Is that to be expected? It makes filters virtually unusable unless very sparingly.
  3. Here is my code: https://pastebin.com/iH355eYP. The problem is, when a "bullet" collides with a "character" from an area above the character's "head", it is being counted as a collision. I've tried all of the advice I could find on the forum such as setting the height/width of the sprite body and whatnot, still no success
  4. Hi, I notised pixels at the edges of my sprites are getting cropped, adding a 5 px margin around the textured areas have fixed it, but it still seems odd so i wanted to report it incase there's a bug somewhere. var grass_SPM = new BABYLON.SpriteManager("grass", "./grass.png", 2500, 400, scene); zoomed screenshot, original is 400*400 (transparent area above the texture) as can be seen on the following screenshot, the top is fine, but both left, right and bottom are being chopped. (the visible seams are just a missing adjustment from changing sprite size)
  5. sprites

    Hi all, been trying to dig into PixiJS a little more. Sorry if this has been covered before but struggling to find anything relating to V4. Is there a plugin or something that enables 9-slicing of sprites? Mainly for the use in UI elements, (buttons borders, frames etc?) Thanks in advance!
  6. I'm starting to use Phaser, and am mystified by the subtle complexities of how the API differs for sprites vs groups. Let's look at the process of creating a display element, and then adding it as a child of another display element at a given x,y. 1. Creating a sprite and adding it as a child of another sprite at a given x,y parent.addChild(game.make.sprite(x,y,"artkey")) 2. Creating a sprite and adding it as a child of a group at a given x,y parent.add(game.make.sprite(x,y,"artkey")) Why do we need to use add here, instead of addChild? 3. Creating a group and adding it as a child of a sprite at a given x,y g = parent.addChild(game.make.group()); g.x = x; g.y =y; Why is there no way to make a group with a given x, y in one step like sprites? Why the need to manually set position in two extra steps? 4. Creating a group and adding it as a child of a group at a given x,y g = parent.add(game.make.group()); g.x = x; g.y= y; For this, we use add and then we also need the two extra steps. Did I get the taxonomy correct here? Why is every combination different? Thanks.
  7. Hey! I've been getting started on developing a game for Phaser, and I've run into an issue. It's a bit hard to describe, but I linked an image of my game to kind of describe it. The balls that you see on screen are meant to go inside that box. They move across the screen. I want them to not be visible outside the box, that way it looks like they ease into it. The problem is, I'm not sure how to do this without it going over my background (the lines that you see on the outside of the box). How can I make it so the sprite is only visible inside the box?
  8. Does this behavior sound familiar to anyone? Working on a multiplayer client. I have a player prototype that is created when the client is told that a new player has joined the server: Player = function (id, game, player) { this.x = 300; this.y = 300; this.id = id; this.dir = "-1"; this.game = game; this.player = player; this.sprite = game.add.sprite(300, 300, 'ms',1); this.sprite.anchor.set(0.5); this.sprite.animations.add('right', [6,7,8],4,true); this.sprite.animations.add('left', [3,4,5],4,true); this.sprite.animations.add('down', [0,1,2],4,true); this.sprite.animations.add('up', [9,10,11],4,true); game.physics.enable(this.sprite, Phaser.Physics.ARCADE); this.sprite.body.setSize(72, 32,28,96); this.nametext = game.add.text(236, 364, this.player, { font: '14px Arial', fill: '#ffffff' }); this.nametext.anchor.set(0.5); }; That player creation is stored in an array... Then whenever I receive an update i pool through the array and update accordingly: // Update User Info socket.on('userupdate',function(data) { info = data.split(','); if(info[0]!=myid){ info = data.split(','); for(a=0; a<totalplayers; a++){ if(playerArray[a].player == info[0]){ playerArray[a].sprite.x = info[1]; playerArray[a].sprite.y = info[2]; playerArray[a].dir = info[3]; } } } }); I've checked that the data comes in is proper. Here is the REALLY weird thing. When im clicked on the screen the sprite does not show up at all. When i click OFF the browser and lose focus, the sprite appears and updates correctly... I`m sure I am making a dumb mistake??
  9. I'm working on a small card game and I'd like to make an array of sprites to make the code more readable. What I mean is I have hearts,spades,clubs and diamonds and I'd like each to be its own array when I load my images from my assets. Below is similar to what I have: PIXI.Loader .add("hearts10","hearts10.png") .add("hearts9","hearts9.png") ... .load(start) I'd like to be able to access the cards via an array of arrays, sort of like: var current_card = new Sprite(resources.cards.hearts.10.texture);
  10. I was looking around at the tutorials and the examples and I did not see anything about how to access via the game object or some other object a collection of the added sprites. I am new to Phaser so I might have missed it. I also searched the forums but I did not see anything. However, if you all know where a thread is or how do to it I would really appreciate a nudge in the right direction.
  11. Hi, I was wondering if someone had experienced slight differences in "offsets" using sprite2D texture and wether it might be related to caching. As an example I have a fairly small texture of 16*16 here in svg, but i tried also using png, same problem. That's the begining of the sprite texture zoomed in 4800% When using it in chrome with a code like this: const crossSheet = taskObject.cloneAssetIntoScene(R.get.crossSheet, scene) crossSheet.hasAlpha = false const cross = new BABYLON.Sprite2D(crossSheet, { parent: canvas, id: 'cross', marginAlignment: 'v: center, h: center', spriteSize: new BABYLON.Size(16, 16), spriteLocation: new BABYLON.Vector2(0, 0), }) cross.spriteFrame = R.get.cross_predict The texture is at the center of the screen here, in chrome the top misses 0.5px In Safari there is a difference in colors and width of strokes: If now I am using a 16,17 sprite size i get a correct sprite in chrome: But somehow it is seems worst in safari: Any clue ? Do you think it is related to the caching strategy ? @Nockawa Here is the link to the texture: https://drive.google.com/open?id=0BxggOFF8_iXkb3JRRjg0YkJtRzQ Here is a playground, on the playground it is the BOTTOM 0.5px that get cutoff.. http://babylonjs-playground.com/#20MSFF#64
  12. Okay, so a lot of the tutorials for Pixi.js seem a bit outdated. Most of the information out there still uses the old way of creating a new Pixi application by not using the newer 'convenient' Application class and setting up the renderer, container, and ticker by hand. A lot of the guides and articles also seem to be written before Pixi adopted and extended on a third-party loader module. Anyway, could someone explain to me how loading assets works, and what it means exactly? Normally, to start displaying some visuals with Pixi, you need to create a texture, and then a sprite from that texture, yes? Example: var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"]; var sprite = new PIXI.Sprite(texture); But then comes the 'loader' to the rescue. From my understanding, the Pixi loader is an object that simplifies handling assets because it creates the textures for you? For example: const loader = PIXI.loader .add('image1', '/assets/images/image1.png') Am I correct? I can't wrap my head around this. Here's my code altogether (it doesn't work by the way): const app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); const sprites = []; const loader = PIXI.loader .add('image1', 'assets/images/image1.png') .load(function(loader, resources) { sprites.image1 = new PIXI.Sprite(resources.image1.texture); init(); }); function init() { app.stage.addChild(sprites); } Do I need to render the stage in the 'init' function as well? Do I have to call 'load()' at some point? I'm so confused! However, this code works and I'm not sure why: const app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb}); document.body.appendChild(app.view); const loader = PIXI.loader; loader.add('image1', '/assets/images/image1.png'); loader.once('complete', function(loader, resources) { init(); }) loader.load(); function init() { let sprite1 = new PIXI.Sprite(PIXI.loader.resources.image1.texture); app.stage.addChild(sprite1); } EDIT Okay, it's making a lot more sense to me now. Here is the cleanest way I've come up with when using loader: const app = new PIXI.Application(800, 600); document.body.appendChild(app.view); const loader = PIXI.loader; loader .add('image1', '/assets/images/image1.png'); loader.on('complete', function(loader, resources) { let sprite1 = new PIXI.Sprite(loader.resources.image1.texture); app.stage.addChild(image1); }); loader.load();
  13. Hello all! I have a sprite with some children, 3 sprites and a text. The text floats above the sprite and moves with it. I have 4 layers that in my map and the sprite is rendered after layer 2. The problem is that the text ends up behind part of the map that sits in layers 3 and 4. Is there a way to force the text to the top of everything?
  14. I looked at the documentation on how to create a sprite https://phaser.io/docs/2.6.2/Phaser.GameObjectFactory.html#sprite It takes in the following parameters x y key frame group It's very easy to add a sprite with just the first three parameters car1 = this.game.add.sprite(800, 400, 'car'); But it fails when I try to add the car to a group car1 = this.game.add.sprite(800, 400, 'car', objects); If I went with the first declaration and then added objects.add(car1) it will then work I need to use the second declaration because my codebase is becoming way too large, and I need fewer lines. Not sure, why this is failing. Maybe an update killed this functionality?
  15. Hello, I am creating a game with Phaser and I guess it is quite large, at least there are a lot of sprites. Using Phaser.AUTO which went to Phaser.WebGL on my desktop (i7-4770k @ 4ghz, 16gb RAM, GTX 970 4GB) I can't even maintain a 60fps (usually around 48-55fps) and there is noticeable stutter on 720p. The same is true for my 2015 Macbook Pro 15". I doubt I'd get any better results on a less powerful computer. I heard that using text with WebGL slowed it down a bunch? but that is a question for a different thread I guess. Anyway, I was searching for a way to speed up my game and came across the idea of switching from WebGL to Canvas. I did that, and on my Mac I got a solid 60fps (haven't tested on desktop yet). The only problem is that Canvas does something weird to some of my sprites (specifically ones with thin borders). I have attached two partial screenshots of my game with box sprites. As you can see, one of the box sprites is perfectly box-like, that one is running on WebGL. Once I switch over to Canvas the box sprites look like the other screenshot - lopsided. Is there a way I can fix this?
  16. Hi all, I have a problem with collision. All my game is based on these codes: game.physics.arcade.collide(bullets, chest2,collision_handler); And it works. But... how to code collision two identical bullets? When I write like this: game.physics.arcade.collide(ebullets, ebullets, collision_handler); Only one of them is dying. How to do it? function collision_handler (object1, object2) { object1.kill(); object2.kill(); }
  17. Can someone tell me, please, why collision does not take place during animation? Here is a game : https://oobarbazanoo.github.io/JumperKisame/.
  18. Hi All i was wondering if someone could help me with a phaser state query. I have been learning phaser from phaser.io and its all for a html index file however the code seems to be different then to what i need if i was to build a game with states. For example i have a player walking animation but converting it for js states seems to be very difficult, i cannot find a tutorial anywhere. Any chance someone could point me in the right direction? happy to share the code Thanks
  19. I'm having an issue which I'm unsure what's happening and can't find anyone else having a similar issue. Basically, I create a group, create them, add a tween to animate them across the page. I create a player sprite and whenever the player collides with the other sprites in the group kill them and render another one. however, this only works on the first item I create. var group = game.add.group(); group.enableBody = true; group.physicsBodyType = Phaser.Physics.ARCADE; So create my group and then do a `for loop` to create all my enemies for (var i = 0; i < 2; i++) { c = group.create(game.width, 20, 'seacreatures', 'octopus0000'); c.name = "enemy" + i; c.body.immovable = true; c.alive = true; c.alignIn(laneArr[Math.floor(Math.random() * laneArr.length)], Phaser.RIGHT_CENTER); game.add.tween(c).to({ x: -200 }, speedArr[Math.floor(Math.random() * speedArr.length)], Phaser.Quadratic, true, 0, 0, false); } group.callAll('animations.add', 'animations', 'swim', Phaser.Animation.generateFrameNames('purpleFish', 0, 32, '', 4), 30, true, false); group.callAll('play', null, 'swim'); game.physics.enable(c, Phaser.Physics.ARCADE); Below this I also render the player currPlayer = game.add.sprite(50, game.height / 4 * 2 + 45, "playerFish"); game.physics.enable(currPlayer, Phaser.Physics.ARCADE); currPlayer.body.immovable = true; currPlayer.physicsBodyType = Phaser.Physics.ARCADE; currPlayer.alignIn(laneRect_three, Phaser.LEFT_CENTER); currPlayer.scale.set(1.5); So in short, the enemy travels across the `x` axis and once it collides with the player it triggers a function which looks like this, my update function: game.physics.arcade.overlap(playerFish, enemyFish, collisionHandler, null, this); then the function it calls, `collisionHandler` looks like function collisionHandler () { killedEnemies += 1; c.destroy(); c.alive = false; text.setText("You have killed " + killedEnemies + " enemies !"); console.log("<<<<<<<<"); } But like I said, it only kills the first item it hits, am I missing anything?
  20. Hello, I have a problem with handling the collision between sprites. I have a group of enemies and a player sprite. I want none of the sprites to be able to move trough each others. At first I had the enemy body set to immovable and that disabled the player from pushing the enemy around upon collision. However, when I added more enemies to the group, I found that if the enemy bodies is set to immovable = true - they will be able to walk straight trough each others even if they have an internal collision detection (as that is the case between two immovable bodies). So if i set immovable to false - the enemies will appear solid when colliding with each other, but the player is able to push the enemy. What is it that I have not understood? I just want all the sprites solid.
  21. Okay so I have a rectangle boundary and I have 4 circles. Each of which I want to collide within this boundary. Is there a way to collide each sprite within this boundary without using p2? var rectangleBoundary = new Phaser.Rectangle(0, 120, 900, 1800); var c1 = game.add.sprite(200, 350, 'qcircle'); var c2 = game.add.sprite(500, 190, 'qcircle'); var c3 = game.add.sprite(120, 30, 'qcircle'); var c4 = game.add.sprite(590, 120, 'qcircle');
  22. sprites

    Hello all, I am new here and playing with Pixi.js using latest build but learning with old tutorials and examples. My question is I am working on a Board Game: Jackpot game Problem: I want to generate 3 Random Sprite images on canvas but how to do that. I tried but it's not working, how to pass random fruit image into sprite and display it on canvas. Thanks in Advance. PIXI.loader .add("images/48.png", "images/49.png", "images/50.png", "images/52.png") .load(setup); function setup() { var randomFruits = ["images/48.png", "images/49.png", "images/50.png", "images/52.png"]; function getRandomFruit(fruits) { var num = Math.floor(Math.random() * fruits.length); if (num === 0) { num = 1; } var fruit = fruits[num]; console.log(fruit); } getRandomFruit(randomFruits); let orange = new PIXI.Sprite.fromImage(fruit); orange.scale.set(0.6); orange.x = (app.renderer.width / 2) + 230; orange.y = (app.renderer.height - container.height) / 2 + 20; app.stage.addChild(orange); }
  23. Hi guys may I ask a quick question? I'm working with Phaser and I'm using the module pattern, creating a module that has a prototype of Object.create(Phaser.Sprite.prototype) and creating an instance of that in the main module. The problem is the sprite seems to be created in the main module in the create function but the image of the sprite is not loading and i cant find the problem or set the image. Thanks so much!!
  24. I am having a really weird issue. I am creating a sprite from an image as follows: var grid1_texture = new PIXI.Texture.fromImage("whiteSquare.jpg"); Now this works fine and I am able to add this to the stage. I basically want to add all my images to a folder called resources. So I changed the code to this: var grid1_texture = new PIXI.Texture.fromImage("/resources/whiteSquare.jpg"); When I do this, I can see in Brackets editor that the link is being made however, the sprites do not get rendered on the stage. Please help!
  25. Hi, I implemented a two finger zoom using the game.camera.scale propierty to zoom the game. I also implemented a drag functionality using game.camera.x and game.camera.y propierties. But now I need to add static floating sprites, such that they are always in the same position on the screen regardless the zoom or the drag movement. But when I add them as sprites (game.add.sprite) they are affected by the camera propierties (x,y,scale). I read this and set fixedToCamera to true, it works partially, the (x,y) is static, but the when I zoom in (increase game.camera.scale) the size of the floating sprites also increases. Is there any way I could add sprites that are not dependent on the camera? Thanks!