Jump to content

Search the Community

Showing results for tags 'pixi.js'.

  • 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
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

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

  1. I need to display a large number (for example 400) of high resolution textures at the same time, for this I used the ParticleContainer from the example - https://pixijs.io/examples/#/demos-basic/particle-container.js. But in the end, I get FPS = 10-15, the more sprites, the lower the FPS, even if you turn off the animation - there is no difference, the image in idle mode also heavily loads the browser, which is why the page scroll is very freezing. - https://codesandbox.io/s/admiring-lamarr-p8bvyf?file=/index.html I could not find a solution anywhere, so I will be grateful for your help.
  2. I have a game previously worked on with Cocos Creator long time ago. All sprite sheets used in the game are packed to work with Cocos, and they are in .plist format. Now I want to do some work with the same image. But pixijs does not work with the plist type sprite sheet. And I don't have the original images. I have to unpack the sprite sheet created by Cocos Creator and repack the sprite sheet for pixi. Is there any tools that can be used for this purpose?
  3. Hello, I need deltaTime for Planck.js (Box2D). But I do not understand what does the Pixi.js "delta" mean? app.ticker.add(delta => gameLoop(delta)); function animationLoop(delta) { console.log("delta = " + delta); } It prints: "delta = 0.99..." I read the documentation but I do not understand how to get the real deltaTime that equals to ~0.016. My temporary solution is: let lastTime = Date.now(); let currentTime, deltaTime; app.ticker.add(() => animationLoop()); function animationLoop() { currentTime = Date.now(); deltaTime = (currentTime - lastTime) / 1000; lastTime = currentTime; console.log("deltaTime = " + deltaTime); }
  4. Hello, I have TexturePackerPro v4.3.3 that I bought a few years ago (maybe 4 years). I cannot load a sprite sheet that I made using this tutorial: How to create sprite sheets & animations for PixiJS 6 I tried this example from the documentation: https://pixijs.download/dev/docs/PIXI.AnimatedSprite.html const sheet = PIXI.Loader.shared.resources["assets/spritesheets/spritesheet.json"].spritesheet; console.log(sheet); The animation object is empty: Source: spritesheet-pixi-js.zip src/client/main.js import * as PIXI from "pixi.js" // create a Pixi application let app = new PIXI.Application({ width: 800, height: 450 }); // add the canvas that Pixi automatically created for you to the HTML document document.body.appendChild(app.view); let background, animatedCapguy; const capguyFrames = [ "assets/sprites/capguy/walk_01.png", "assets/sprites/capguy/walk_02.png", "assets/sprites/capguy/walk_03.png", "assets/sprites/capguy/walk_04.png", "assets/sprites/capguy/walk_05.png", "assets/sprites/capguy/walk_06.png", "assets/sprites/capguy/walk_07.png", "assets/sprites/capguy/walk_08.png" ]; // load the sprite, call setup() when completed // app.loader // .add("assets/spritesheets/spritesheet.json") // .load(setup); PIXI.Loader.shared .add("assets/spritesheets/spritesheet.json") .load(setup); function setup() { // get a reference to the sprite sheet you've just loaded: // let sheet = PIXI.loader.resources["assets/spritesheets/spritesheet.json"]; // let sheet = app.loader.resources["assets/spritesheets/spritesheet.json"]; const sheet = PIXI.Loader.shared.resources["assets/spritesheets/spritesheet.json"].spritesheet; console.log(sheet); // initialize background sprite // background = new PIXI.Sprite(resources["assets/sprites/background.png"].texture); background = new PIXI.Sprite(sheet.textures["background.png"]); app.stage.addChild(background); // scale stage container that it fits into the view app.stage.scale.x = app.view.width / background.width; app.stage.scale.y = app.view.height / background.height; // create an animated sprite // animatedCapguy = new PIXI.AnimatedSprite.fromFrames(capguyFrames); animatedCapguy = new PIXI.AnimatedSprite(sheet.animations["capguy/walk"]); // configure + start animation: // animatedCapguy.animationSpeed = 1 / 6; // 6 fps // animatedCapguy.position.set(0, background.height - 350); // almost bottom-left corner of the canvas // animatedCapguy.play(); // app.stage.addChild(animatedCapguy); // app.ticker.add(delta => gameLoop(delta)); // set speed, start playback and add it to the stage animatedCapguy.animationSpeed = 0.167; animatedCapguy.position.set(0, background.height - 350); // almost bottom-left corner of the canvas animatedCapguy.play(); app.stage.addChild(animatedCapguy); app.ticker.add(delta => gameLoop(delta)); } function gameLoop(delta) { animatedCapguy.x = (animatedCapguy.x + 5 * delta) % (background.width + 200); } public/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "pixi.js": "https://cdn.skypack.dev/[email protected]" } } </script> <!-- <script type="module"> import { Vec2 } from "planck-js"; const vec = Vec2(1, 2) console.log(vec); </script> --> <script type="module" src="js/bundle.js"></script> </body> </html> rollup.config.js export default { input: "./src/client/main.js", output: { file: "public/js/bundle.js" } }
  5. Hi all, We are a small studio making our first game - Bon! Music. We built it with pure web technics, including Pixi.js, Tone.js & React, and finally will publish to Android and iOS platform. ## About the game A beginner guide to music composition, with cute animals! Form your own band, write your own music. If you are confused, watch tutorials! <iframe width="560" height="315" src="https://www.youtube.com/embed/dYp4CQ_R2PY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ## Featuring 8 gorgeous video tutorials about composition 40+ unique interactions in the tutorials 4 tracks: drum, melody, harmony, bass 17+ cute characters to play your music 23+ sounds in the playground ## Test Our App! Currently the Android version is in beta testing, you can download the APK from itch.io: https://nicestick.itch.io/bon-music. Let us know what you think. Thanks!
  6. Ninja.io is a fast paced, 2D multiplayer shooter inspired by games like Soldat, Unreal Tournament and N-game. Currently implemented game modes include Capture the Flag and Deathmatch. It uses the Box2D physics engine to enable convincing rigid body simulation. Players can make various moves including backflips, rolls, proning, running, flying and crouching. The game is still under active development and I'm willing to devote a great deal of time to finishing this project. I've made a test server available and you can join it by following these steps: - Go to ninja.io - Play as Guest - Enter a username - Join CTF or Deathmatch. - Select primary and/or secondary weapon Press H to display table of controls. Decrease the size of the browser window in case it runs slow. I've noticed that some laptops and older systems have trouble maintaining adequate fps. It is currently not possible to register a username, but I've been making progress on an account and highscore system. The game server is currently located in Europe. I plan on running additional servers on other continents and for the site to serve as a gateway to the nearest game server when players join in order to minimize latency. 2 European and 3 North American servers are available. Any thoughts, feedback or suggestions would be much appreciated! Thanks. Edit - 15-12-2017: New version! Sound effects have finally been added, weapons & items have been updated & tweaked, libraries have been updated and many improvements have been made along with numerous bugfixes. Edit - 15-05-2019: Several versions later: lots of new stuff! Running in Pixi.js v5 now. Party mode has been added, several new maps, new weapons, new sounds, new UI, new account/profile management (WIP), new FX! More to come! I'm currently finishing the implementation of the account system and I'm working on several new maps. More updates will follow soon!
  7. Made anything cool with pixi.js? Post it up here and share it with the world! Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it! To get the ball rolling, here are some pixi.js projects that exist out on the internets: games: http://www.goodboydigital.com/runpixierun/ http://www.theleisuresociety.co.uk/fightforeveryone/ http://flashvhtml.com/ experiments: http://gametest.mobi/pixi/morph/ http://gametest.mobi/pixi/balls/ http://www.goodboydigital.com/pixijs/bunnymark/
  8. Hi everyone! i made a new pixi project with pixi-viewport, which i based on this fullscreen demo: https://codesandbox.io/s/tb4qv https://tb4qv.csb.app/ Now i tested it on various smartphones, and on some phones (google pixl 3, samsung s10e, others...) its scale ration is distorted, so the red rectangle which should be a square is displayed higher than broad. Since its happening to the demo as well that i took as starting point, i think the problem should be reproducable there. Does anyone has an idea what could cause that? Greetings & thanks a lot for any idea! DiceHowl
  9. What I'm trying to accomplish is to basically write all my game logic in world units and use camera to see part of it rendered on the screen. Let's say my world is an infinite plane and I want to add a sprite, which will have dimensions of one unit in x axis and one unit in y axis. Then, I define a camera with dimensions of 4 units on x axis and 2 units on y axis. Visualization below. To get close to my desired result I followed the example in this blog post and used RenderTextureSystem to actually define source canvas dimensions equal to my world dimensions and target dimensions to the browser window size. Here is the code class WorldContainer extends DisplayObject { sortDirty: boolean; public content: Container; public camWidth = 4; public camHeight = 2; public camOffsetX = 0; public camOffsetY = 0; constructor() { super(); this.content = new Container(); } calculateBounds(): void { return this.content._calculateCachedBounds(); } removeChild(child: DisplayObject): void { this.content.removeChild(child); } removeChildren(): DisplayObject[] { return this.content.removeChildren(); } addChild(child: DisplayObject): DisplayObject { return this.content.addChild(child); } render(renderer: Renderer) { const targetWidth = renderer.view.width; const targetHeight = renderer.view.height; const targetRatio = targetWidth / targetHeight; const sourceWidth = this.camWidth; const sourceHeight = this.camHeight; const sourceRatio = sourceWidth / sourceHeight; let requiredWidth = 0; let requiredHeight = 0; if (sourceRatio >= targetRatio) { // source is wider than target in proportion requiredWidth = targetWidth; requiredHeight = requiredWidth / sourceRatio; } else { // source is higher than target in proportion requiredHeight = targetHeight; requiredWidth = requiredHeight * sourceRatio; } renderer.renderTexture.bind( null, new Rectangle(this.camOffsetX - this.camWidth / 2, -this.camOffsetY + this.camHeight / 2, this.camWidth, this.camHeight), new Rectangle((targetWidth - requiredWidth) / 2, (targetHeight - requiredHeight) / 2, requiredWidth, requiredHeight), ); this.content.render(renderer); renderer.batch.flush(); renderer.renderTexture.bind(null); } updateTransform() { super.updateTransform(); const { _tempDisplayObjectParent: tempDisplayObjectParent } = this.content; this.content.parent = tempDisplayObjectParent as Container; this.content.updateTransform(); this.content.parent = null; } } I have done some extra work to preserve aspect ratio of camera, when drawing to canvas, so it won't get stretched and will just fit the screen. However, real issue comes when I try to make sprites, because when I give it a texture and let's say dimensions of my texture are 64x64 pixels, then my sprite is huge filling the whole screen. That's when I thought just setting width and height of the sprite should be enough. For example to recreate the example in the picture above, I would make the sprite like this and add it to the content of world container. const sprite: Sprite = Sprite.from('sadge.png'); sprite.anchor.set(0.5); sprite.x = 1.5; sprite.y = 1.5; sprite.width = 1; sprite.height = 1; worldContainer.content.addChild(sprite); Now, what I don't like about this solution is, that when I add child sprite to that previous sprite and give it's x to be equal to 1, y to be equal to 0, I expect it to appear on second row and third column. However, not only the child sprite is not in my expected position, it's also not visible. After, hours of debugging I found out, that when setting width and height for parent sprite, under the hood pixi modifies scale and it ruins everything for child sprite. If, I set sprite's width height to be 1x1, it sets scale for sprite to be ( 4 / canvas_w, 2 / canvas_h), which is very tiny and because that scale is also applied to its children, they get so small that they are not visible. I know that I can manually multiply by inverse of the scale ratio for every child and cancel that effect, but to be frank it is very ugly solution. I was wondering if you could help me to fix this issue, or give me a directing advice on how to approach it. If feels like I am solving this whole world unit issue in a very wrong way and there is far simpler and neater solution. I've been struggling with this thing for weeks now and would really appreciate any help.
  10. Hello friends. I need a little help in my project. I have array of images with id and url. any part of those images can be rendered in different occasions, based on user filtering. I have custom resource manager which saves all downloaded images (or failed downloads) with id and resource returned by PIXI.Loader, and for each new image checks if texture is already available, if not adds id and url to Loader and loads. Now my problem is that image array itself is also user defined, so url's might be incorrect or duplicate. If there's two images (two different IDs) to be displayed and they have same url, I technically dont have them downloaded because I'm checking with id and they have different id, so I'm adding both to the Loader resource and load. I dont know how loader handles that but it throws this warning: BaseTexture added to the cache with an id [image url] that already had an entry Warning itself is not big of a problem, but I think loader still downloads the image twice and then tries to cache it, and then is this warning thrown. so I dont want download to be performed twice when I know that i already have a texture (or will have with different resource I guess). Can anyone please help me. I dont even know what can be the correct fix in this case, let alone how to do that
  11. Mambo vipi, fellow devs- I was wondering if anybody here has any experience with Pixi.js's PIXI.gif.AnimatedGIF runtime object, and its fromBuffer() method in particular? I have the following code: let gif = null; const _onError = () => { console.log(`error!`); }; const xhr = new XMLHttpRequest(); xhr.open(`GET`, `img/gifs/wp.gif`); xhr.responseType = `arraybuffer`; xhr.onload = () => { if (xhr.status < 400) { gif = PIXI.gif.AnimatedGIF.fromBuffer(xhr.response); } else { _onError(); }; }; xhr.onerror = _onError.bind(this); xhr.send(); However, when executed, I receive the following error: Now, according to the fromBuffer() documentation, it accepts two arguments- buffer and options. Buffer's type is ArrayBuffer, which is what I thought I was passing, so I am not really sure what is going on or whether I have to do something to xhr.response before I pass it? Any information or help would be much appreciated! Asante sana in advance
  12. Hello friends. My first post here. So, I'm working on a small project with around hundred images on big ViewPort. I have basic drag-and-drop functionality of images and I'm using manual requestAnimationFrame to render stage only during image dragging. Now I need to add drop-shadow on all Images. I have tried @Pixi/filters-drop-shadow package by bigtimebuddy but during dragging it significantly drops frame rate. Can anyone please suggest any other way to make drop-shadows with good performance. (P.S. I have thought of using pieces of shadow as a png and scale and skew them and assembly them in a way to look as real drop-shadow on any size of image on any zoom factor. But, that's kind of ridiculously complicated idea and I'm hoping for better suggestions. ) Thank you in advance.
  13. Pixi is a wonderful library to create html5 games and we love games to create with pixi.js Here is our last game that we create pixi. It took 2 weeks to develop this game with the graphics. We hope you like it. https://www.happykidgames.com/game/scrape-and-guess
  14. I think I have seen this question asked before, but I have not been able to implement a working solution in pixi.js v4.5.0. I am new to this, so bear with me.... I have a custom GLSL filter (the Game of Life, for now)-- I want to continually apply the filter to the sprite in a feedback loop. That is: Apply filter to sprite image Capture the result Set sprite image to result Apply filter to sprite image Loop I have attempted this with PIXI.Texture.fromCanvas(app.view) -> texture.update(), but that resulted in a black screen. I think using RenderTexture buffers with app.renderer.render may be on the right track, but I'm not sure how I should be applying them. I attempted to set my sprite.texture to a RenderTexture and it resulted in an error... I've also had various "Feedback loop detected" warnings in the console when I attempted to pass render textures as filter uniforms and read from those. Is there a way to set the sprite texture to the filtered sprite?
  15. 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
  16. Hi! I'm working on a project where I have a Map scene. I remove and add this scene to the phaser game a lot because I have to populate map depending upon the data I provide to this scene. After updating the map many times, it just vanishes and doesn't render and it happens randomly. I'm creating some images and texts in the map scene that change depending upon the data I pass in Init function of the scene. this.game.scene.remove('map'); let map = new Map(); this.game.scene.add('map',map,isLoaderComplete,mapData); I'm also attaching a screen shot. Any help would be much appreciated, Thanks!
  17. 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, 229, 25] but I got [255, 255, 255, 25] (without premultipled alpha) and [31, 184, 235, 25] (with premultipled alpha) https://www.pixiplayground.com/#/edit/785nGjqG5wSZoa9r2Xn7I Thank you in advance for a response!
  18. I tried to find answers to these questions online, but was only partially success-full and most of the info I found was for pixi v3 version. Given that we are now on v5 and few things changed, I decided to ask this here to better understand pixi and webgl in general for optimising big amounts of assets. A small intro to my project I am working on a mobile / web game that relies on images for it's ui / characters / items / backgrounds etc. In some places we are talking high detail, fullscreen graphics for characters, something similar to this: https://www.artstation.com/artwork/n616E that have more graphics on top of them (equipment slot ui / equipment item graphics). As you can imagine to have these appear nice and crisp on retina devices some images can be rather big i.e (1125x2436 for a full screen iphoneX screen). And my game has a lot of these. My current experience with pixi and what I am doing now Right now I am not doing anything crazy. I have a loader that generates sprites for all my textures. I did however ran into an issue where some of the bigger character graphics caused lag when their scene was displayed because they were being uploaded to GPU (I think?). I was able to solve this issue by using renderTextures, what I did was map through all loader resources, created sprites, rendered them on render textures and stored those references for future sprites. I actually had separate question about this here My questions / concerns In general my approach so far has been working good, I see smooth animations and memory usage (at least what I see in XCode when I run app on my phone) looks good. I did start noticing few small hick-ups here and there though further into my development and am concerned that I am loading too many assets now. Furthermore I saw few posts saying that webgl can't handle many textures / big textures and this concerns me. What I want to do now is create separate loaders, so I don't load everything at once and ensure I destroy and recreate my renderTextures as they are needed. I also want to start creating spritesheets to group my assets logically. I have following questions: 1. How big can these sprite-sheets be and how many of them can I have? (My lowest supported target is webgl 1 on safari) 2. Do I actually need to use renderTextures to ensure my graphics are ready to go at a moments notice, or is there a better approach? 3. When I use loader with my sprite sheets and create sprites from those sources, what do I need to destroy to cleanup? Just loader, or also sprites and texture sources? 4. And in general what approaches / practices would you recommend for handling 100's of assets like examples below in a game designed for high density displays? 5. Is pixi even suitable for this kind of project? examples (not from my game, but I guess you can picture how big in terms of pixels these can get and there are many of them) https://www.artstation.com/artwork/n616E https://www.deviantart.com/maumonts/art/ITEM-ART-World-of-Reos-795990267 https://www.deviantart.com/francescabaerald/art/Map-of-Middle-Earth-Lord-of-the-Rings-642266670 https://www.deviantart.com/evil-s/art/Burnblade-UI-516602551
  19. Hi, I am new to Pixi.js and I have been searching and looking for the custom blend mode usage with only WebGL in Pixi.js. I looked through the post( ) and the github PR (https://github.com/pixijs/pixi.js/pull/4049) to explore the possible to create my custom BlendMode. Here are my questions: 1. Does pixi v5 support the custom BlendMode like #4049 mentions, and it seems the version that above post uses is v4.5.3 2. I have no idea how to apply the custom BlendMode to the particle effect with reading the repo (https://github.com/pixijs/pixi-particles). I think I should make some change in ParticleUtils.ts, but I have no clue to begin. 3. I also looked the PR about more BlendMode(https://github.com/pixijs/pixi.js/pull/5391), and does this mean if I want to achieve the custom BlendMode, it can only happen in canvas2D but not in WebGL? 4. If I can not use the method: var gl = WebGLRenderingContext; var blend = new PIXI.BlendMode(gl.ZERO, gl.DST_ALPHA, gl.ONE, gl.ONE_MINUS_DST_ALPHA); sprite.blendMode = blend; then how do I construct the shader like blendFunc(gl.DST_ALPHA, gl.ONE_MINUS_DST_ALPHA) Any advices are appreciated! Thanks in advanced!
  20. I import pixi.js like this: import * as PIXI from 'pixi.js-legacy' But somehow when I visit the web-app using a browser having webGl disabled I get an error which tells me to use "pixi.js-legacy". How so? My package.json still contains the normal pixi.js and hence it's still installed, but not imported - could this cause the problem, i don't think right?
  21. Zapper.io is a free massive multiplayer online game. You can play it here: https://zapper.io Android app is now available: https://play.google.com/store/apps/details?id=io.zapper.zapperio It can be played in the browser on desktop and mobile devices. The game is fundamentally different from typical mmo snake-style games in several ways: - Players can always attack other players and bite their tail, although head-on collisions with larger players result in instant defeat. - The world is covered in an electrical grid that provides players with a speed boost. - Zapper worms are procedurally generated and over 2 billion combinations are possible. Players can store newly generated entities in their collection. Zapper.io uses the awesome Pixi.js renderer with the recently improved glowfilter. I also used Pixi.js for my other game, Ninja.io. Zapper.io went live today and I've decided to fill the server with bots to keep the minimum number of entities at 50 until it hopefully gains some traction. Any feedback, comments or suggestions is much appreciated! Thanks.
  22. I try to make my pixi.js scene to adjust its size to the window on resize. To do so I use the following: window.addEventListener("resize", () => { this.renderer.resize(window.innerWidth, window.innerHeight); }) It resizes the canvas, inspecting the element it shows the correct size, but somehow the scene is cut off. Both the text and image are pixi.js generated - all stored in several PIXI.Container()'s
  23. That's how I currently load an image as a sprite. As for now, some image are distorted due to a different ration than the sprite's: this.sprite = PIXI.Sprite.from(this.image); this.dimensions = { width: window.innerWidth * 1.05, height: window.innerHeight * 1.05, alpha: 0 }; // later in code getPosition = () => { if (!active) { this.sprite.position.set(window.innerWidth / 2, window.innerHeight / 2); this.sprite.width = this.dimensions.width; this.sprite.height = this.dimensions.height; this.sprite.anchor.set(0.5); this.sprite.alpha = this.dimensions.alpha; } else { const {width, height, top, left} = document.querySelector('.detail__image').getBoundingClientRect(); this.sprite.position.set(left, top); this.sprite.width = width; this.sprite.height = height; this.sprite.anchor.set(0); this.sprite.alpha = this.dimensions.alpha; } }; update = () => { if (!this.sprite) return; this.getPosition(); } As you can see, when active is true, the sprite is bound to a html element, if not it's about the size of the window. How can I make the image cover the sprite, without distorting? Just like `background-size: cover` or `object-fit: cover`. Tried to find something online, but couldn't make it work for me.
  24. I'm all new to WebGL and Pixi.js - I started digging into this, because of this exact effect I'm trying to achieve: Demo As of now I got a scroll with multiple text object created using PIXI.Text() - this works fine, it's scrollable etc. But unfortunately I'm stuck implementing that kind of old tube tv screen bend effect on the text - don't even know where to start. Can I achieve this using pixi.js? I'm thankful for every hint! Do I need a different approach? That's how I init each text of mine: constructor($el, stage) { this.stage = stage; this.title = $el; this.text = new PIXI.Text(this.title.innerHTML, { fontFamily: "Unno", fontSize: 120, fill: "transparent", stroke: "white", strokeThickness: 1 }); this.text.resolution = 2; this.getPosition(); this.stage.addChild(this.text); this.addListeners(); const font = new FontFaceObserver("Unno"); font.load().then(() => { this.text.updateText(); }) } getPosition = () => { const {width, height, top, left} = this.title.getBoundingClientRect(); this.text.position.set(left, top); }; ...
  25. I have a displacement filter using an radial map you can find attached to the post. This filter is bound to a sprite which is following the cursor. In addition to this displacement filter, I'm trying to also include an RGB split at the cursor's position. To do so I installed the type `RGBSplitFilter` and tried to use it the way I use the displacement filter: initDisplacement = () => { this.displace = true; new PIXI.Loader().add("/dis.png").load(((loader, resources) => { this.posX = window.innerWidth / 2; this.posY = window.innerHeight / 2; this.displacementSprite = new PIXI.Sprite(resources["/dis.png"].texture); this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite); this.displacementSprite.anchor.set(0.5); this.displacementSprite.x = window.innerWidth / 2; this.displacementSprite.y = window.innerHeight / 2; this.displacementSprite.scale.set(2); this.displacementFilter.scale.set(2); this.stage.addChild(this.displacementSprite); this.stage.filters.push(this.displacementFilter); document.querySelector(".detail__image").addEventListener("mousemove", (e) => { this.posX = e.clientX; this.posY = e.clientY; }) })) }; loopDisplacement = () => { this.displacementSprite.x = this.posX; this.displacementSprite.y = this.posY; }; As you can see I get the map's texture, define it as a sprite and kind of attach a displacement filter to it. Likewise I tried to use `this.rgbFilter = new PIXI.filters.RGBSplitFilter(this.displacementSprite)` - but this didn't work. What's the correct approach to implement such an rgb split at the cursor's position?
×
×
  • Create New...