Search the Community

Showing results for tags 'pixi'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

  1. PIXI and globalCompositeOperation

    Hi, Is it possible to change the globalCompositeOperation in PIXI CANVAS renderer? I can't find any info about this Thanks for your help, Fred for example: globalCompositeOperation = 'destination-out'
  2. Need advice for some project

    Hi guys. I want to create a effect in PIXI, that looks like first frames in this video -> (stars shooting/flying by). What would more experienced PIXI'oniers advice to achieve such effect? Performance is critical, I want it also to work on mobiles. For now I'm thinking: 1) Particle container, that's for sure? Maybe with some 1-3 star sprites? 2) Projection plane for start movement? Or just calculate it with some custom simple logic?
  3. 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,
  4. Hey! I've decided to build a simple 2D framework for building multiplayer/MMO games (similar scope to, I have significant experience in building multiplayer engines for windows/linux but I have never touched web. If you have any advice on libraries and development technologies, or general advice, I would greatly appreciate it. My current tech stack (if you think this is naive feel free to call me out, as I am indeed naive.): Language: Typescript Client Platform: Browser IDE: VS2017 Rendering: Pixi.js Physics: Box2D or similar Level Editor: Tiled or similar Animation: Spline Server Platform: Linux VM via google or aws Run time: Node.js Web Server: Apache Database: MySQL Shared Modules: UMD Networking: WebSocks / Data Structures: typescript-collections Logging: Log4ts (based on Log4js) My framework will be a microservice architecture that will used to create the basis for the client engine and the server authority engine and then a bunch of microservices that clients interact with (Authenticator, Inventory, Logging, etc). Q: Why don't I use Phaser or other for the client engine? From what I can see is that Phaser is hard and/or in optimal to run on the server side. I could use it on the client and then bunch together similar components and run them on the server but from what I can see Pixi provides a lot of runtime functionality that I will need, and I like the idea of using same physics and other libraries on both client and server. Thanks in advance! Edit 0: Object pooling: Opool
  5. I'm facing problem in getting screenshot of current state of canvas, which is get rendered dynamically using pixi.js library. Below written code i'm using to generate canvas and when i use toDataURL() function on dynamically generated canvas it always returned black image. /* PIXI Renderer object of the game. */ var renderer = PIXI.autoDetectRenderer(FIELD_SQUARE_SIZE_PIXELS, FIELD_SQUARE_SIZE_PIXELS, { backgroundColor: 0xF2F2F2 }); /* This code i'm using to change color of button on canvas. Which work fine.*/ var whiteButtonsArr = whiteButtons.graphicsData; for (i = 0; i < whiteButtonsArr.length; i++) { var button = whiteButtonsArr; button.fillColor = WHITE_BUTTON_FILL_COLOR; whiteButtons.dirty = true; whiteButtons.clearDirty = true; return true; } After some analysis i have changed the code to render canvas (added preserveDrawingBuffer attribute )to get current screenshot of canvas. After adding preserveDrawingBuffer attribute i'm able to get the current state of canvas using toDataURL() function. But button's color is not getting changed on UI. Although while debugging button.fillColor pick the color but doesn't reflect on UI. /* PIXI Renderer object of the game. */ var renderer = PIXI.autoDetectRenderer(FIELD_SQUARE_SIZE_PIXELS, FIELD_SQUARE_SIZE_PIXELS, { backgroundColor: 0xF2F2F2 }, { preserveDrawingBuffer: true }); Please let me know if any other approach or way is available to take screenshot. Thanks in advance.
  6. Word wrap in other languages

    Does anyone know if pixi.js takes into consideration word wrapping for languages like Japanese where there are no spaces?
  7. Performance

    I updated my iPhone to the new ios and immediately, my game's performance dropped... It was still ok, but noticeably not as smooth (I have an iphone SE which I appreciate is an older/weaker spec device.) What I found was that forcing the game to run on canvas fixed the issue (it also removed the flickering that I'd noticed on my kid's Kindles which are definitely older and very much weaker in spec.) For this game, it's fine, there's nothing that needs to be WebGL, but moving forward (i.e. next game) I was interested in using filters &c. So, is there anything I should be looking at from a code point of view to avoid poorer performance on older devices? Or, have we got to the point where trying to support legacy devices is impossible? Any other thoughts?
  8. Is Pixi GameEngine

    I'm wondering is Pixi Game Engine or Framework? I'm asking this because Companies in their job ads always refer Pixi as a GameEngine. My opinion is: it's framework and I always have problems with interview trying to convince other side: "come on guys, It's not Game Engine it's framework :-)" Thanks
  9. Mask out parts of an image?

    I have a layer (displayobject) with multiple sprites inside. I want to add a circular explosion that would remove the parts of the object they overlap. So, after adding the explosion circle the current display object should. Attached is a picture of what I want to achieve. I know that I could use a black & white mask, where everything is white and the explosion is black so it's masked, but this means creating a new bitmap as large as the entire canvas just to draw a tiny cutout and this would have to be done for each explosion. Also, new sprites might be added after the explosion occurred, so the new items shouldn't be masked by old explosions. The issue is that the background is a texture, not a solid color. If it was only a color I could have simply added a new circle with the background color over the shapes and it will look like a cutout. I think a WebGL solution such as using shaders might be used. Question 1: Can we add a mask in PIXI that says: "hey, keep everything from the original image EXCEPT for the pixels of this mask" ? Question 2: Do you have a better idea of how to create an explosion that removes parts of sprites that already exist and allow for new sprites to be placed over the explosion? What's the most efficient way to implement this? PS: The sprites are actually meshes, I tried converting them to bitmap using .cacheAsBitmap on the mesh, but it seems to be buggy (the quality drastically drops and the entire mesh is actually displaced by several pixels when it is cached as a bitmap).
  10. Hi all I was wondering if Pixi has a method for creating the appropriate sized text when within a scaled container. In my case, I scale the main container so that its height is 1080. In this container, I would create a Pixi.Text object with height 20px. From what I understand, this creates a 20px text object, which is then scaled down when placed in the container. This results in text which is slightly blurry. I'm planning on creating a method which would calculate the true pixel height required, which would then be scaled to the size needed. Is this something which Pixi itself supports, or would I need to build this myself?
  11. I want to make the camera follow my sprite around. (so my sprite is always in the center of the screen) What's the best way to go about this? Does Pixi have built-in camera functions? I thought about just moving everything else relative to my sprite, but I thought this wouldn't be the best way. I googled around a bit, but with no luck. Any tips or resources would be much appreciated. Thanks.
  12. Pixi Shader Texture size

    Hello everyone ! I'm pretty new in PixiJS and i can't figure out how to do this : Have a texture passed to a shader through uniforms and resize its sprite without "jumps" : (try to resize it...) What i want to have : My final intention is to perform video masking with resize. So I need the two textures (video and mask) to resize the same way...
  13. Found some unnecessary calculations

    Not sure if here's the best place for this but since it is not a bug etc I avoided opening an issue on github I stumbled upon some odd rotation code in phaser while reading From src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js and src/pixi/display/Sprite.js // Rotate matrix by 90 degrees // We use precalculated values for sine and cosine of rad(90) a = a0 * 6.123233995736766e-17 + -c0; b = b0 * 6.123233995736766e-17 + -d0; c = a0 + c0 * 6.123233995736766e-17; d = b0 + d0 * 6.123233995736766e-17; Ok. Some rotationcode with fancy precalculated values. But: the value given in e-notation is 0.00000000000000006123233995736766 and therefore effectively zero. Which makes sense since this was meant to be the precalculation of cos(rad(90)) - which equals exactly to zero. I suppose the literal resulted from a rounding error when someone typed Math.cos(Math.radians(90)) into a console So a better version would be: // Rotate matrix by 90 degrees a = -c0; b = -d0; c = a0; d = b0; Maybe someone sees this and is willing to fix it on the side...
  14. Pixijs free sprites atlas packer

    Hello everyone! I've been release my own atlas packer for pixijs. It's fast and easy to use command line tool. You can try it and send me your beedback. Main features: - scaling for multiple dimenstions - alpha trimming - multisheet textures if not all sprites could be allocated into a single texture - png, jpg - texture format - texture size limit - sprites border to avoid render artefacts Platforms: MacOS, Windows Download from:
  15. Hi All! Do you have experience in HTML Game Developement? And the following skill set? JavaScript, JQuery HTML/HTML5 CSS/CSS3 Pixi JS / Spine JS Google Closure Active knowledge of English Send me a PM if you would like to know more details about this. Relocation is required and VISA is supported. Please don't contact me if you are selling services from company's. Only looking for people who are willing to move to Prague and have a full time contract with us.
  16. Hi, I'm just getting started with Pixi. I made a little sprite that walks around and shoots things. Whenever I bump my sprite into the bad guys, I want him to disappear. So I ran stage.removeChild(mySprite) and he disappeared! But... He still shoots when I click and he still moves around with WASD. So it just makes the sprite invisible? Here's a link:
  17. When i am drawing any sprite usign pixi its looking blurry on both mobile (android mobile ) and pc (chrome browser) Then i tried setting (roundPixels: true). Then it becomes sharp on pc but still blurry on mobile devices. I have looked at forums but could n't get any help. I tried looking on stackOverFlow but i got nothing which could actually resolve my problem. I have used below code. var gs = {width:950,height:640}; var app = new PIXI.Application(gs.width, gs.height, { resolution: 1, antialias: false, forceFXAA: false, forceCanvas: false, autoResize: true, transparent: false, backgroundColor: 0x000000, clearBeforeRender: true, preserveDrawingBuffer: false, roundPixels: false }); var down = PIXI.Sprite.fromImage("images/icon.png"); down.anchor.set(0, 0); down.position.set(100, 150); app.stage.addChild(down); Please help.
  18. Remove SpriteSheet TextureCache

    I have loaded SpriteSheet using json. Like this below. const loader = new PIXI.loaders.Loader(); loader.add('bunny', 'data/bunny.png') .add('spaceship', 'assets/spritesheet.json'); loader.load((loader, resources) => { }); I want to remove all the TextureCache which was loaded using this spritesheet.json only. I have tried. PIXI.Texture.removeFromCache("spaceship"); PIXI.Texture.removeTextureFromCache("spaceship"); But in PIXI.TextureCache names of all the spriteFrame were included there. And still i am able to use image form frame. Using this. var bgSprite2 = PIXI.Sprite.fromFrame("ship1"); bgSprite2.anchor.set(0.5, 0.5); var pos = {x: 300, y: 200}; bgSprite2.position.set(pos.x, pos.y); stage.addChild(bgSprite2); I want to remove all the entries of spriteFrame in TextureCache and i want to load new set of spriteFrame. I am doing this because i have spritesheet animations of two diffrent spaceship but the individual symbol name of both spaceship are same. Please help.
  19. Sky Fight now live

    Announcing, made with pixi, html5, php with the servers in c++, it has taken me 12 months which is about 5,000 hours on the code/art, it has been localised into 6 languages, with more work and languages to follow. I hope you like it The game has 7789 lines of JavaScript, 9430 lines of c++, and 984 lines of PHP/HTML with pixi as the graphics engine. I have UK/European and USA servers. so don't just sit there, get one up!!!
  20. Stoping followcurve

    Hi everyone, I'm new to pixi.js, I have made sprite and moving it by followcurve function, I want to detect mouse collision with sprite and change followcurve path, but I can't stop sprite and starting new path until the sprite reach to the end of current path. xDestinition = yDestinition = 0; function play() { if (pointer.hitTestSprite(cat)) { console.log('*****************************************'); gotoNewPath(cat); } z = Math.floor(giveMeDistance(cat.x, cat.y, xDestinition, yDestinition)); if (z == 0) { gotoNewPath(cat); } } function gotoNewPath(movingObj, xD, yD, time) { xDestinition = (xD != null) ? xD : giveMeRand(fWidth); yDestinition = (yD != null) ? yD : giveMeRand(fHeight); let curve = [ [movingObj.x, movingObj.y], [giveMeRand(fWidth), giveMeRand(fHeight)], [giveMeRand(fWidth), giveMeRand(fHeight)], [xDestinition, yDestinition] ]; c.followCurve( movingObj, curve, 120, "smoothstep", false ); } Any advice? thanks.
  21. Displacement filter scale issue.

    Hi, I've long wanted to implement a neat looking invisibility effect for my game, tried using DisplacementFilter, but stumbled upon an issue with scale property. While it works correctly to displace areas under the displacement sprite I created, it also displaces entire container on which the filter is applied. I presume its from non existent knowledge about the subject and how those filters work, but I'm still hoping for either a fix or a reasonable explanation if anyone can help me with this please. Everything in my code follows DisplacementMap example on (one with the grass and magnifying glass). What is different is my stage tree. I have 3 containers for each layer and inside those there are separate containers for chunks that hold the map data, since it comes from the server. const playerSprite = new PIXI.Sprite(new PIXI.Texture(PIXI.utils.TextureCache['player.eyes'])); const displacementSprite = new PIXI.Sprite( new PIXI.Texture(PIXI.utils.TextureCache['player.normal']) ); let displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); playerSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); playerSprite.scale.set(globalScale, globalScale) this.scene.addChild(playerSprite); this.scene.addChild(displacementSprite); displacementFilter.scale.x = 20; displacementFilter.scale.y = 20; displacementFilter.enabled = true; displacementSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); displacementSprite.scale.set(globalScale, globalScale) return { scene: this.scene, filter: displacementFilter }; the return value from this block is added to the main stage container, and filters are applied to bottom 2 layers. Should i perhaps look into filterArea? Here is the undesired effect on the edges. You can also see the slanted top layer on the trees. so 2 layers are moved by the filters scale property.
  22. text height isue

    Hi, I have problem with getting height of text. Here is a example: = width; var height = text.height; Height is not correct value! After some time when i print in console "text.height" I get correct value! Is there a way to force text transform ?
  23. Disabling blending

    Hey everyone, I was looking at the documentation on BLEND_MODES and noticed there was actually no way to disable blending, equivalent of calling glDisable(GL_BLEND) on Desktop and ES OpenGL. On native mobile it increases performance when rendering fullscreen background images that do not need to blend (ie. they have no transparency in the image). Is there another way of achieving this I'm not aware of ? Thank you.
  24. Preparing the Sprite-sheet

    I am trying to learn how to make a sprite from a spritesheet and I'm following Kitty's tutorial as a reference on how to work with spritesheets. I am using Texture Packer to create my spritesheet. I was successful in exporting all my images the only thing that has me confused is why do I have a .json file for each of my images? I suspect this is because I had to enable multipacking because all my images wouldnt fit on one sheet. In a lot of the examples I've seen online most devs just import one tile-sheet and one .json file. I was expecting Texture Packer to do the same, now I am unclear how I would import all of this...just for one sprite. Is there a better method of doing this? Quick info about the images I am using, I made a 3d render in Blender and exported the final render into .png frames, the size on each frame is roughly 2000x1000. Perhaps there's another way I could export my render and have it ready for PIXI?
  25. I am using masks for eyes in my game. I have a black background for the eye and a white pupil. The white pupil uses the black background as a mask so that when the character blinks the pupil is hidden. The issue is that my white pupil is rendered grey (if i disable the mask the pupil is rendered white which is correct). I have looked at the alpha and it is set to 1 so it does not seem to be a transparency issue. Just wondering if anyone else has had into this issue?