Jump to content

Search the Community

Showing results for tags 'pixi5'.

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

  1. I'm working on a custom data-visualization for large data sets. I originally have been building it with svg, but I'm hitting a peformance bottle-neck quickly with the number of elements I can render and animate. I need to have thousands of elements rendered, animating periodically for key transitions, and support zoom eventually. Only a fraction of the total elements rendered will ever need to animate with dynamic geometry at any given time. Everything else will animate via fadeIn/fadeOut. So for an estimated medium sized data-set case, if I have ~ 1000 data objects, I need to render ~ 3000 ob
  2. Hello, I am working on a game with pixi js. to make the game look normalized on every screen, im scaled the stage as follows this.scale=Math.max(this.viewWidth, this.viewWidth) / (2048 * this.ratio); and on orientation change I am rotating the whole stage. now my problem is, if i have any buttons on stage, who are at top or at right side of stage, they do not respond to any touch event. Please help i'm in a very big trouble. I tried to use mappositiontopoint as well. but didn't understand how to correctly use here. Please help
  3. Hello. I'm trying to make a filter to transition between the current texture of a Sprite and a new one. I've put together a barebones example here: https://www.pixiplayground.com/#/edit/KozVneSNjCuVZKi_fgNJa When you click on the blue sprite, a filter is applied. Currently, this filter takes a new texture as uniform and uses it to sample the fragment color (I have removed all the blending code to make it clearer). And it seems as this texture is being upscaled? Both textures have the same size. As a reference, I have added a second sprite with the new texture being applied.
  4. Seemingly simple task, yet so unclear and confusing in Pixi. After searching for a while, found this and that is exactly what I need https://gameofbombs.github.io/examples-heaven/#/picture/displacement-backdrop.js And that is for Pixi 4. Once I copied the code into pixi examples window and fixed the method names, I saw this (Attachment) const shaderVert = ` attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; varying vec2 vTextureCoord; varying vec2 vFilterCoord; void main(void) { gl_Position = vec4((projectionMatrix
  5. I'am trying to create 5 sprites and combine them into 1 sprite only once. Then i create multiple objects and assign that 1 sprite to each one of those objects. My idea is that each object has 5 properties like name, image etc.. and if i create 5 sprites per object then it will cause alot of draw calls and sometimes fps drops if the objects are too many, so iam trying to combine the 5 sprites into 1 sprite then add that sprite to each object and inside the object i want to be able to change the sprites inside the 1 parent sprite for each object while that 1 sprite is acting as if it was ac
  6. I am working on a game view that has overlay modal with scrollable container (Parent container with mask and content container with y transforms on scroll). In general everything works fine, but I notice my phone heating up sometimes when scrolling this view for a while. I am not using any expensive things like antialiasing, however my stage devicePixelRatio is set at 3 (for iphone xs display). I assume that with every scroll my whole view is being re-rendered, hence causing this heating up? I was wondering if pixi has a mechanism to separate this scroll container onto a separate layer of
  7. Hey! I'm trying to make calculations in a shader, and use all 4 channels, but unfortunately the alpha channel does not work as expected. I was thinking that if I will set gl.blendFunc(gl.ONE, gl.ZERO) then the output should be only just the source, without any blending, but it's not. So I have tried to combine it also with premultipling alpha (and keep gl.blendFunc(gl.ONE, gl.ZERO)), I get sort of closer results to the expected, but still behaviour is strange. In the demo below I'm just filling mesh with one color, and console.log values of the first pixel, was expecting [25, 178
  8. 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 concerne
  9. Can I draw this line in pixi and animate her? bandicam 2020-07-09 09-28-29-227.mp4
  10. 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
  11. [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, t
  12. 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
  13. 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 St
  14. 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
  15. 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 somet
  16. 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:)
  17. 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-
  18. 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?
  19. 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?
  20. 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.
  21. 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 t
  22. 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.
  23. 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 vert
  24. 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.
×
×
  • Create New...