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

  1. I'm having problems transferring sprite from another sprite to stage and then back to another sprite. The scenario is I have two rotating sprites (wheels) and another sprite (player). Initially, the player is added to wheelA as a child. Upon pressing fire, the player is removed from wheelA and its velocity is changed so that it moves away from wheelA. (Player is removed from wheelA so that it ignores wheelA's rotation). The player is also added to the game via game.add.existing(player); (Since it doesn't render after removing from wheelA). On update, I check if player overlaps with wheelB. On overlap, I disable the physics of the player and add it as child of wheelB. The result is player is not rendered on the scene although it is a child of wheelB.
  2. I am trying to leave the game on even if the game is out of focus with stage.disableVisibilityChange = true; However it seems to not work and I wonder if it is because my sprites aren't on the stage. I have followed tutorials that tell to add sprites into the game with game.add.sprite(x,y, 'name');. However it seems there is another way, something like stage.addChild(); if I am correct. What is the difference between these two. Should I use the second one and why? Is it the reason it is not working or something else. Currently I initialize the game and stage like this: game = new Phaser.Game(1000,600, Phaser.AUTO, 'gameCanvas', {preload: preload, create: create, update: update}, false, false); game.stage = new Phaser.Stage(game); game.stage.disableVisibilityChange = true;
  3. Hi all ! As the title said, I have a sprite sheet who has a strange behaviour. It's difficult to explain so you can see the uploaded file to see. I add my sprite sheet like this inside the preload() : level2.load.spritesheet('hil', 'dest/img/sprite-Level2.png', 373, 265, 8); In the create() : player = level2.add.sprite(380, level2.height - 430, 'hil', 1); player.frame = 0; player.enableBody = true; player.scale.setTo(0.5); player.animations.add('left', [0,1,2,3,4,5,6,7,8], 5, true); And in the update() : if (cursors.left.isDown) { player.body.velocity.x = -800; player.animations.play('left'); } I searched a lot but I didn't find anything to help me. I can't understand why it doesn't work. If somebody knowes, it could be very helpfull. Thanks by advance. spritesheet.mov
  4. Hi, I want to show 2 sprites. Why one sprite disapears if I set renderingGroupId = 1 ? Here is my demo: http://www.babylonjs-playground.com/#1MJ5GH#3 comment line 29 to see what i mean. I want one sprite always visible and one behinde the wall with normal behavior. With my old Babylon.js version 2.5 all works. So its a bug?
  5. Hello people! I ran into when issue when I was developing my new game. It is a game where arrows show up on the screen and you have to swipe in the direction that the top arrow is pointing to. You have to swipe when the arrow is within a certain area on the screen (check the screenshot), represented by a faded arrow in the circle. That arrow in the circle rotates to the direction that the closes moving arrow is pointing to. I use tween for the rotation animation. Here is the problem. When the arrow in the circle is pointed to the left (angle = -180) and the incoming arrow point down (angle = 90), the arrow in the circle is animated clockwise, meaning it goes through top, right and then finally down, not straight down as I want. I have set up an if statement to switch arrow's in the circle angle to 180, but it does not work. Changing it to 179 works as expected. Why can't I change it to 180 in the first place?
  6. 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!
  7. Hello. Is it possible by default to render sprite instead mesh at some LOD level?
  8. Hi everyone... I'm making a simple HTML5/JS program I plan to integrate into an existing game I have that is supposed to load an explosion sprite from a sprite sheet I created (375px by 25px, each individual sprite is 25px by 25px, 15 sprites total) onto the HTML canvas. It is not yet animated, as I haven't been able to make it actually show up (this is my problem) I'll leave the code below, if you see what's causing the problem, please leave a reply with a suggestion on how to fix (that would be really helpful as I have been making zero progress in the past hour). Thanks in advance! If it helps, I have been using code from this tutorial here: http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/ <html> <body> <canvas id="exploder"></canvas> <script> var canvas = document.getElementById("exploder"); canvas.width = 25; canvas.height = 25; var explosionImage = new Image(); explosionImage.src = "ExplosionFinal.png"; var explosion = sprite({ context: canvas.getContext("2d"), width: 25, height: 25, image: explosionImage }); function sprite(options) { var that = {}; that.context = options.context; that.width = options.width; that.height = options.height; that.image = options.image; that.render = function() { // Draw the animation that.context.drawImage( that.image, 0, 0, that.width, that.height, 0, 0, that.width, that.height); }; return that; } explosion.render(); </script> </body> </html> And when I run this in Chrome nothing is showing up in the canvas element. As far as I can tell it isn't an error with sourcing the file as when I hover over this statement here: explosionImage.src = "ExplosionFinal.png"; my text editor shows a preview of the file, with the sprite sheet showing.
  9. I have a dictionary of sprites displayed on the screen. I am trying to remove the sprite that the user clicks on. To do this I am trying to get the location of the mouse click, and get the sprite at that location. Is there a function to get a sprite on a stage based on location?
  10. Check link my demohttp://51.15.38.31/ PIXI.settings.DEFAULT = PIXI.SCALE_MODES.NEAREST; does not work
  11. Hey guys, hope you're having a great time. And I have a little problem you may be able to help me with. I'm making sort of RTS and there are lots of units marching to each other and killing each other. The problem is, they are stepping onto each other, and kind of pushing each other, and sometimes even jumping someplaces. This looks weird. Watch this video and you will understand what I'm talking about (I'm using Warcraft 2 sprites just for testing purposes, and also because they are great). https://www.youtube.com/watch?v=6htpVG8Shyc A little more details: I'm using Arcade physics. All units are objects of the same class, derived from Phaser.Sprite. All of them have a circle body, anchor set to 0.5 (if if matters), and are moving using velocity (before that I was modifying their poistions manually but with the same result). Units belong to 2 different groups, each group is collided with self and other group - so they won't walk through each other. What I want is that units would be standing still and no one could move them, not to mention these weird jumps. Is there some common techinque for handling this, do I miss something? Thank you in advance.
  12. Hello everyone, I'm new on this forum and in Phaser. First, I have to say that I've enjoyed using this framework so far, feels very complete; you don't have to implement all the boiler plate for yourself in every game (even sprite already has a `health` attribute), unlike LibGDX (which I have also used in the past). And almost every problem is solved either on this forum, or in examples. But I got a problem in my code that I don't seem able to solve, it might not even be possible to solve, so here it goes. I'm trying to create a sprite from a bitmapData, but then trying to add animations. The reason why I use bitmap is because I want to take advantage of the function replaceRGB and replace some colors (to make different teams), and add the sprite later. If I do this, it works: sprite = game.add.sprite(x, y, 'player'); sprite.animations.add('stand', Phaser.Animation.generateFrameNames('stand/', 1, 1, '.png', 3), 10, true, false); sprite.animations.play('stand'); But, if I try to set the bitmap, it fails on animations.play with this error: phaser.js:69099 Uncaught TypeError: Cannot read property 'index' of undefined at Phaser.Animation.updateCurrentFrame (http://localhost:8000/assets/javascript/lib/phaser.js:69099:36) at Phaser.Animation.play (http://localhost:8000/assets/javascript/lib/phaser.js:68796:14) var bmd = game.make.bitmapData(); bmd.load('player'); bmd.replaceRGB(255,255,255, 255, 250, 0, 0, 255); sprite = game.add.sprite(x, y, bmd); sprite.animations.add('stand', Phaser.Animation.generateFrameNames('stand/', 1, 1, '.png', 3), 10, true, false); sprite.animations.play('stand'); If you inspect the object sprite.animations, will notice that currentFrame is undefined. Is there any way to add the currentFrame afterwards ? or bitmaps are incompatible with animations By the way, my player is a atlasJSONHash game.load.atlasJSONHash('player', 'assets/img/player.png', 'assets/img/player.json'); Thanks in advance.
  13. Hi all, I'm new to Phaser and I want to ask about something that became a problem for me and sorry for my bad english. So I have shape sprite that I add child to the background sprite. I want to make the background fit the screen size and it working. I also make the shape sprite anchored to middle (0.5, 0.0) so whatever the shape the position still in the middle. The problem came when I try to create collision. If the size is original size then the collision is correct but when I resize the background the collider start to not fit the sprites. I search for this and found out that if I comment out the anchor then the collider is fit to the sprite again. I also already do setting on body size. Here is the list of code I use //scaling background background.scale.set(game.width, game.height); //add physics game.physics.arcade.enable(shape_sprite) //anchor sprite shape_sprite.anchor.set(0.5, 0); //reset shape_sprite collision shape_sprite.body.setSize( shape_sprite.width*shape_sprite.parent.scale.x, shape_sprite.height*shape_sprite.parent.scale.y, shape_sprite.width*shape_sprite.parent.scale.x/2, 0 ); I think maybe I'm doing it wrong. without anchor: with anchor:
  14. Hello, there is a small difference between the sprite body anchor between phaser 2.6 and older versions. In previous versions the body will anchor with the sprite anchor, meaning that if you set the sprite anchor to 0.5 in both axis the body stayed in the center of the sprite, changing the body size would keep it in centre, in the newer version the body is always anchored to the top left of the sprite regardless the anchor of the sprite. Is this behaviour intended? Just wondering if I should re-center my sprites bodies or if this will change to the old behaviour. Thanks.
  15. I think I may have stumbled across a rendering bug that occurs when graphic objects are added as children to sprite objects. This code: let graphics = this.game.add.graphics(); graphics.lineStyle(2, 0x0000FF, 1); graphics.drawRect(0, 0, 32, 32); let sprite = this.game.add.sprite(center.x, center.y); sprite.addChild(graphics); this.game.add.existing(sprite); Results in different dimensions for the sprite in (Safari / Firefox) and Chrome. Chrome reports the sprite's dimensions relative to the graphic object (32x32), however Safari and Firefox both incorrectly render the sprite's dimensions as (1x1) from a call to this.game.debug.spriteInfo(). It causes my tetris pieces to render differently in both browsers. In Safari / Firefox, I am forced to set the rectangle to the dimensions of (1x1) and use the sprite's width and height properties to set the dimensions correctly. However, this breaks the sprite in Chrome. EDIT: It appears the offender is this property: "sprite.texture.frame.width". In Safari it's 1 and in Chrome it's 32.
  16. I build my sprites from a canvas object I created, which is bascially a circle with a radius at most 28 pixels. I built it with Canvas API. Then I use Texture.fromCanvas(canvas); Then Sprite.from(texture); However when I try to watch the sprite's width and height, I get 300 and 150. I wonder how are these two values calculated. What I need is a sprite as big as 30 x 30 at most. Why does it give me a 300 x 150 sprite? If I need to do some hitTest check I can't use the sprite's width and height directly. I have to use the radius of my canvas object.This is very inconvenient.
  17. This is hastily thrown together code that I created as a solution for an idea that I have. I have texture gen data in objects and I wanted to merge various layers together. Reason being is if I create a number of various objects I wanted them to be placed on buttons later on. I plan on making a some code to replace various parts of the textures so that I can on the fly generate generated textures. This is handy for button and things of that nature which is why I created it. I decided to throw it out there in case anyone needed something like this or wanted to improve on the code. Also here is a working example of it on jsfiddle. Screenshot var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { create: create }); // taken from my code and striped out useless parts var gameScale = 2 var sprite = (function() { 'use strict'; var sprite = { creature: {}, misc: {}, object: {}, structure: {}, tile: {}, vehicle: {}, }; sprite.misc.buttonBackground = { size: [16, 16], data: [ '0000000000000000', '0999999999999990', '0999999999999990', '0999999999999990', '0999999999999990', '0999999999999990', '0999999999999990', '0999999999999990', '0999999999999990', '0999999999999990', '0999999999999990', '0999999999999990', '0999999999999990', '0999999999999990', '0999999999999990', '0000000000000000' ], }; sprite.object.table = { size: [6, 3], thumbOffset: [5, 8], data: [ '666666', '.6..6.', '.6..6.' ], thumbData: [ '666666', '.6..6.', '.6..6.' ], }; sprite.mergeData = function mergeData(bgData, fgData, xOffset, yOffset) { var bgDimensions = sprite.getDimensions(bgData); var fgDimensions = sprite.getDimensions(fgData); var size = sprite.getMaxDimensions(bgDimensions, fgDimensions); var newData = []; _.times(size[1], function(y) { var row = ''; _.times(size[0], function(x) { var s = '.'; if (yOffset || xOffset) { if (y >= yOffset || x >= xOffset) { if (fgData[y - yOffset] && fgData[y - yOffset][x - xOffset]) { s = fgData[y - yOffset][x - xOffset]; } } } else { if (fgData[y] && fgData[y][x]) { s = fgData[y][x]; } } if (s == '.' && bgData[y] && bgData[y][x]) { s = bgData[y][x]; } row += s; }); newData.push(row); }); return newData; }; sprite.makeTexture = function makeTexture(name, data) { console.info('Loading sprite `%s`.', name); return game.create.texture( name, data, gameScale, gameScale ); }; sprite.getDimensions = function getDimensions(spriteData) { if (_.isArray(spriteData)) { var y = spriteData.length; var x = 0; var count = 0; _.each(spriteData, function (row) { if (row.length > x) x = row.length; }); count = x * y; return [x, y, count]; } return false; }; sprite.getMaxDimensions = function getMaxDimensions(a, b) { if (!_.isArray(a) || !_.isArray(b)) return false; var x = Math.max(a[0], b[0]); var y = Math.max(a[1], b[1]); return [x, y]; }; return sprite; })(); function create() { game.stage.backgroundColor = '#2d2d2d'; // manually placed variables from itterated code; var groupKey = 'object'; var structKey = 'table'; var col = 0; var row = 0; var name = groupKey + '_' + structKey; var baseLeft = 100 + ((col * 16) * gameScale) + 2; var baseTop = 100 + ((row * 16) * gameScale) + 2; var bgData = sprite.misc.buttonBackground.data; var fg =sprite[groupKey][structKey]; var fgData = fg.thumbData; var newData; if (_.isUndefined(fg.thumbOffset)) { newData = sprite.mergeData(bgData, fgData); } else { newData = sprite.mergeData(bgData, fgData, fg.thumbOffset[0], fg.thumbOffset[1]); } var btnName = 'btn_' + name; var newTexture = sprite.makeTexture(btnName, newData); var objButton = game.add.sprite( baseLeft, baseTop, btnName); objButton.name = name; objButton.inputEnabled = true; objButton.input.useHandCursor = true; }
  18. I need to put thousands of shapes onto the stage and currently I am using PIXI.Texture. I draw a PIXI.Graphics object and then convert it into a PIXI.Texture using `RenderTexture.create().` Then I get a sprite from the texture. But when I draw 3000+ objects on my canvas I find the FPS drops from 60 to 30. If I draw 6000+ objects it slows down everything and my laptop's fan is roaring. I have found some article on https://stackoverflow.com/questions/23468218/draw-10-000-objects-on-canvas-javascript saying that in pure canvas javascript we can just put different layers/canvas on the screen to draw like 1000 object in one layer. But what is the correct way to do this in PIXI?
  19. I have placed hundreds of static sprites in my game and all goes well. But when I try to add 30 animated sprites (AI players) in the game, the FPS drops from 60 to 30. If I add even more it becomes very slow and unplayable. I have profiled my program on Chrome and found that this method CanvasSpriteRenderer.prototype.render is using too many CPU resources. Is there a way to reduce the CPU consumption and make my game smooth again?
  20. I've been creating a flying game in phaser yet I'm having issues with collision and any answers I've found online are of no use. My game js is this: window.onload = function() { var map; var layer; var sprite; var cursors; var game = new Phaser.Game(500, 160, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.tilemap('tilemap', 'level.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', 'tilesheet.png'); } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = "#a9f0ff"; //game.add.sprite(0, 0, 'sky'); map = game.add.tilemap('tilemap'); map.addTilesetImage('tiles', 'tiles'); groundLayer = map.createLayer('GroundLayer'); map.setCollisionBetween(1, 100); //backgroundlayer = map.createLayer('BackgroundLayer'); groundLayer.resizeWorld(); groundLayer.debug = true; sprite = game.add.sprite(0, 0, 'player'); sprite.anchor.set(0.5); // sprite.body.bounce.y = 0.1; // sprite.body.gravity.y = 2000; // sprite.body.gravity.x = 20; // sprite.body.velocity.x = 100; // TODO: add animations game.physics.enable(sprite); game.camera.follow(sprite); cursors = game.input.keyboard.createCursorKeys(); } function update() { game.physics.arcade.collide(sprite, groundLayer); game.physics.arcade.TILE_BIAS = 40; sprite.body.velocity.x = 0; sprite.body.velocity.y = 0; sprite.body.angularVelocity = 0; if (cursors.left.isDown) { sprite.body.angularVelocity = -200; } else if (cursors.right.isDown) { sprite.body.angularVelocity = 200; } if (cursors.up.isDown) { game.physics.arcade.velocityFromAngle(sprite.angle, 200, sprite.body.velocity); } } function render() { game.debug.body(sprite); } }; and my tilemap json is this: { "height":10, "layers":[ { "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "height":10, "name":"BackgroundLayer", "opacity":1, "type":"tilelayer", "visible":true, "width":100, "x":0, "y":0 }, { "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "height":10, "name":"GroundLayer", "opacity":1, "type":"tilelayer", "visible":true, "width":100, "x":0, "y":0 }], "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tileheight":16, "tilesets":[ { "columns":50, "firstgid":1, "image":"tilesheet.png", "imageheight":1280, "imagewidth":800, "margin":0, "name":"tiles", "spacing":0, "tilecount":4000, "tileheight":16, "tilewidth":16, "transparentcolor":"#5a5268" }], "tilewidth":16, "version":1, "width":100 } yet no matter what I try, the player just wont collide with ANY of the sprites. What could be the issue?
  21. how to make animation from group of sprites which difference size
  22. The Grim Panda Design team is currently accepting new art and design projects. We have a team of experienced and seasoned 2D & 3D artists and animators who have provided assets for many of the best-selling mobile game companies on the market today. We work with any budget, large or small, and can quote prices on a project level, per-diem, or hourly. With the ability to work in vector, concept, and realistic styles, our team is dedicated to making your project come to life. The quality of your assets will be precise, clean, and look brilliant in your mobile IP. We pride ourselves on bringing your player into the world you have envisioned. Due to legal obligations with many of our clients, we cannot publicly post our complete portfolio. Please contact me at jcogswell@grimpanda.com for samples. Thank you, and we look forward to bringing your creative design to the next level.
  23. Hello everyone, Is there any way to adjust the drag of a sprite in the air (I know you can do it on the ground)? Right now, when the character in my game jumps into the air off of the ground, it can move horizontally very easily. In other words, the horizontal movement sensitivity is extremely high. Is there any way to reduce this sensitivity and add some sort of drag to the sprite's body when it is in NO contact with any obstacles (i.e. no collisions)? Thanks in advance, srig99
  24. I make some PIXI.Graphics objects and put it on my stage, which contains a TilingSprite as background, then I scale my background and my Graphics objects. They look nice because they all scale to the same point. Then I put the PIXI.Graphics in Sprites and add the sprites onto my stage, scale them again. This time only the background scales. Sprites don't scale with the background. What happens? The Graphics and Sprites objects are at the same position. But they behave differently during scaling. I hope I use the right way to create sprites. My code: const array = new Array(COUNT); for (let i = 0; i < COUNT; i++) { const x = randomInt(50, 100); const y = randomInt(50, 100); array[i] = new Graphics(); array[i].beginFill(0xD48CFA); array[i].lineStyle(0); array[i].drawCircle(x, y, 10); array[i].endFill(); stage.addChild(array[i]); } for (let i = 0; i < COUNT; i++) { const x = randomInt(50, 100); const y = randomInt(50, 100); const g = new Graphics(); g.beginFill(0xD48CFA); g.lineStyle(0); g.drawCircle(10, 10, 10); g.endFill(); const rt = RenderTexture.create(g.width, g.height); renderer.render(g, rt); array[i] = Sprite.from(rt); array[i].anchor.set(0.5); array[i].position.set(x, y); stage.addChild(array[i]); }
  25. I want to process images on client side with JIMP (awesome library for image processing). I read png file with jimp, modify it with jimp, and then I've get stucked, because I don't know how to display it in pixi.js. The image read by jimp has bitmap property, and when I trying to create texture from it (with PIXI.Texture.from for example I gets errors). Thanks in advance!