Search the Community

Showing results for tags 'pixi5'.



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
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • 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 17 results

  1. I am working on a game that has few background graphics, these are stored in app bundle at big resolutions like 2000x2000 pixels to support bigger devices like iPad pro. Obviously something this big is an overkill for mobile and I wanted to ask if following optimisation assumption is correct: 1. I preload these assets with pixi loader 2. I create sprite for each texture 3. I then resize this sprite to fit device dimensions better i.e. 1000x1000 px for iphone When I inspect my sprites textures I still see them at 2000x2000 pixels even though sprite itself is 1000x1000. I am concerned that I am not optimising this correctly, especially because I use prepare plugin https://pixijs.download/dev/docs/PIXI.Prepare_.html for some of these assets, I upload my sprites not textures, but I still feel like I might be uploading those big 2000x2000 assets alongside which is a problem, as these occupy a lot of GPU memory. Hence this thread to clarify if my approach to this problem is correct. I don't want to create separate asset resolutions i.e. 2x / 3x etc if possible to avoid increasing final app bundle size.
  2. Can I draw this line in pixi and animate her? bandicam 2020-07-09 09-28-29-227.mp4
  3. Hello, I need help in drawing text vertically using using pixi. Ex: have to print text "NAME" in container as below; N A M E Ex 2: Text=" NAME PIXI" N P A I M X E I
  4. [SOLVED] We finally found out the culprit, I set the antialias to true in PixiJS while createJs didn't. My player reported that after turning off the antialias, it works better than the createJs. Hello everybody, my name is Draco. I am the creator of a web game called stabfish.io My game was built using createJS with Animate export plugin. Unsatisfied with the performance, recently I convert the whole game using PixiJS v5, with pixi-animate plugin. After revamping the game, the performance of the game on my computers has a significant boost. However, there are reports by 2-3 players that the performance has dropped after the update. I would like to know if you have any insight into what might be causing this. In case you guys interested to compare, these are the link: createjs: https://stabfish.io/old pixiJs: https://stabfish.io/pixi I had a debug session with the player who has a performance issue where I try to gather some information and try something to see if the performance improves, these are some clues: 1. The frame rate is dropping significantly when he is playing in full screen in a bigger resolution. (10fps he said) 2. He has 60 fps with createJs version. 3. Both versions have the same amount of displayed object. No special culling in either version. 4. The scripting part (logic/cpu) seems to run smoothly, as I have a built-in detection using setInterval to detect whether the game update frequency is not reaching 60 updates per sec 5. I asked him to turn off the 'hardware acceleration' in the chrome browser to fallback to canvas2d purposely, where he reported no significant change, however, it shows that the logic update is affected immediately in my log Please tell me if you know what's the difference between createJS and PixiJS that could cause such issue. Thank you .
  5. Hi, I've created text in PIXI, and have masked it because I want to allow scrolling. I'm using the latest version of pixi (5.3.0). However when the text loads with the mask, it appears differently on different browsers. I've attached an image for reference. I've tested it using Edge, Firefox and Chrome and all 3 show the text masked differently. Please help me understand why this could happen. Also, when I create a graphic for masking the text, the coordinates and size appear very different to how it functions as a mask. In the image below, the white rectangle is the position and size of a graphic which is used for masking the text below it. As a graphic, the mask(white rectangle) appears small. However when applied to the text behind, it appears bigger and position also changes.
  6. https://github.com/Hocti/PIXIMC you don't need any adobe animate plugin, just use the "generate texture atlas" function in adobe animate then you can read them in to pixi.js by PIXIMC. Here is a pixi.js demo: https://piximc.s3.amazonaws.com/demo/demo_scene.html and the original swf file: https://piximc.s3.amazonaws.com/demo/demo_swf.html I reproduce almost all animation and graphic functions, but it's not my final goal still. I will make some extra functions that adobe doesn't provided: 1) changing MC skin 2) playing with "action" like spine So I can draw some Stickman animations to create game sprites in a super quick way , and maybe find a better illustrator to redraw it as a new skin I hope someone will find it useful.
  7. Hello, I would really like to use normal maps in pixi.js but I don't know how. I've came across a good example with THREE.js and using webgl shaders - clickOnDemo (sometimes it's necessary to click once on the image to work). So I really wanted to replicate it but using pixi, I gave it a shot aand black screen - myDemo . I don't get errors and I'm not sure what I'm doing wrong. Could the problem be in the way I'm creating the mesh? I've checked other example from pixi's page in which shader with heightmap is used on a mesh and works perfectly fine - pixiExample. I'll be very grateful if I get this normal map thing working.
  8. Hi all, i've been messing with something for a couple days. I'm passing in a transparent blurred PNG to a shader, as well as a solid PNG background, and running it through a grayscale shader. If I simply display the pixels of the blurred PNG, it is output on top of the solid background as expected. The grayscale part of the shader works fine. However, the grayscale portion of the photo has a harsh transition to the background. It doesn't fade nicely and follow the alpha of the blurred PNG, like a blendMode would. I realize they are different things, but I feel like I am missing something obvious, and that it should work as I'm expecting. I have a playground setup to demonstrate the issue. Ignore the ugliness of the assets, it gets the point across better https://www.pixiplayground.com/#/edit/0ZaLP0UrUIPKfyHU_S3-o In the photo attached, the desired result is on the left (from Photoshop Color BlendMode). The right is the result from the playground. You can tell that the grayscale area on the right is much larger, since I believe that any alpha that is NOT 0, it being set to 1. I would like to try and maintain the alpha from the original blurred PNG. It may not seem like much but it really kills what I'm going for with the aliased edge like that. Thank you!
  9. I am developing a unique but really simple puzzle game that consist in just put all the players (astronauts) in the goal squares at the same time. Rules: All astronauts move at once. NOTE: Only puzzle games lovers would enjoy this game, so if you aren't, you can skip seeing it:). Some levels could be really challenging. Here it is: https://llpujol.itch.io/puzzle-astronauts Comments & improve suggestions are welcomed:), Hope someone could enjoy it:)
  10. There's a TileSprite implementation in my project that seems to offset and distort on live production kiosks. this.tileTexture = PIXI.Texture.from(ConveyorAsset.RED); this.tile = new PIXI.TilingSprite(this.tileTexture, 491, 50); animate: function() { this.tile.tilePosition.x -= 0.51; if (this.enabled === true) { this.frameId = requestAnimationFrame(this.animate.bind(this)); } } I've let this animation run for 12-hours at a time on my development computer, and never seen an issue. However, at production facilities on kiosks running 24-hours a day, eventually there's some offset to the tile data that corrupts the animation. Any insight as to what might cause this, or how to debug it? Kiosks are Intel i5-7300, onboard Intel HD Graphics 620 Conveyor.mp4
  11. Hi, probably one that crops up a lot - is there a good way to wait, or check load of webfont before displaying? The webfont, supplied by google, currently works fine on second load but on a hard refresh often defaults to a system font which makes literally the whole game look aweful. Also, I find that the font is anti-alised which looks bad against the games pixel art look, is the a setting that sorts this at all?
  12. Hi, all I need to show loading spinner until PIXIJS finish calc all nodes and before the going to render scene. do you now to give a callback to PIXIJS to call before first render ? @ivan.popelyshev do you have any idea?
  13. I am learning PixiJS inside a VueJS component following the Pixi tutorial and I the console shows this error : <template> <div> {{ displayPixi() }} </div> </template> <script> import * as PIXI from 'pixi.js' export default { name: 'HelloWorld', methods: { displayPixi() { return new PIXI.Application({width: 256, height: 256}) } } } </script> How do you load Pixi instances in VueJS ? Thanks for the help.
  14. I have image in pixijs app. I need to hide it then show it with door open like effect (as seen in attached picture) var pixiapp; var pixiloader = PIXI.Loader.shared; initpixiapp(); function initpixiapp() { pixiapp = new PIXI.Application({ width: 1280, height: 720 }); document.getElementById('canvas-container').appendChild(pixiapp.view); pixiloader.add('images/img1.png').load(handleimagesload); } function handleimagesload() { var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture); pixiapp.stage.addChild(img1); // here will the the code to hide and show image in door open effect // var ticker = new PIXI.Ticker(); // ticker.add(() => { // // }) //ticker.start() }
  15. Hi, I'm trying to load a Json form another Json loaded in the loader but don't know how to do. loader .add("map", "../../assets/map/map.json") .load(setup); It is a Tiled .json and inside there is the path to the "tileset.json", it looks like this : "tilesets":[ { "firstgid":1, "source":"..\/tiled\/tileset.json" }], "tilewidth":32, How to access this "tileset.json", how can I add it to the loader ? Knowing that I don't want to have to put it manually, I want the loader to find the json path inside map.json and load it. Thanks.
  16. Hi, I'm new to this forum so hi to everyone! :) Currently, I'm trying to build an isometric tilemap that also displays a certain height. Here is a demo: https://www.pixiplayground.com/#/edit/69C1wfNIowvu5wNNccv8w I have the following problems and maybe somebody could guide me in the right direction. 1. Shadows: When I remove the lineStyle, different heights and the depth of the scene are not really recognizable. I think this could be solved with proper lighting and shadows. Any suggestions on how to implement this? 2. Sprites & Performance: I'm currently calculating all vertices manually and then I draw a PIXI.Graphics-Polygon according to the vertices. Is there a more efficient way to do this. I'm not very experienced with PIXI.Mesh, SimpleMesh or SimplePlane. I wanted to use the PIXI.SimplePlane first but the documentation seems to be wrong... In addition to the mesh generation do you have any tips on how to properly cover the mesh with sprites, soften the edges and smoothly transition between different sprites. 3. Player movements & buildings: In the future I'd like to be able to add players and buildings. This is not so important right now but as the objects will heavily interact with the map, I'm happy if you have some guidance on this topic as well. Thank you very much! All the best Tom
  17. Been working with Pixijs for a month of so now and haven't found a good way of identifying sprites or containers in other containers. How do you get or adjust sprites and containers within containers? I'm been looking at: .getChildbyName but what name? And .getChildAt but how do i identify it amongst many other objects that could be returned? is there a design pattern I'm missing here, or a built in id for each created sprite that I can use to lookup or a name that I can assign? Cheers.