Search the Community

Let's say there is an arbitrary composite (wall.png) shape in PixiJS. I need to project a texture onto it by some kind of a grid warp in a way, so the result would be similar to output.png. I have tried to do it via PIXI.SimplePlane and it seems that default projection algorithm at this framework is affine transformation. And the result have to be based on quad bi-linear projection. let pattern64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAEACAIAAABK8lkwAAAACXBIWXMAAAAnAAAAJwEqCZFPAAAFIGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMTAtMDdUMTk6MDI6NTErMDM6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMTAtMDdUMTk6MDI6NTErMDM6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTEwLTA3VDE5OjAyOjUxKzAzOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0Mjc0YWNkZS05OTYwLTQ3YTQtOTQyOS1kMGQ0MmZkNzAwZDIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDI3NGFjZGUtOTk2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"; const app = new PIXI.Application({ width: 512, height: 324, antialias: true }); document.body.appendChild(app.view); app.loader.add('pattern', pattern64).load(inits); function inits() { const graphics = new PIXI.Graphics(); let path = [34, 100, 176, 100, 176, 224, 34, 224]; graphics.lineStyle(0); graphics.beginFill(0xBCBCBC, 1); graphics.drawPolygon(path); graphics.endFill(); path = [176, 100, 258, 60, 258, 264, 176, 224]; graphics.lineStyle(0); graphics.beginFill(0xCDCDCD, 1); graphics.drawPolygon(path); graphics.endFill(); path = [258, 60, 422, 104, 422, 220, 256, 264]; graphics.lineStyle(0); graphics.beginFill(0x606060, 1); graphics.drawPolygon(path); graphics.endFill(); path = [422, 104, 478, 104, 478, 220, 422, 220]; graphics.lineStyle(0); graphics.beginFill(0x909090, 1); graphics.drawPolygon(path); graphics.endFill(); app.stage.addChild(graphics); const texture = app.loader.resources.pattern.texture; const plane = new PIXI.SimplePlane(texture, 5, 3); app.stage.addChild(plane); let buffer = plane.geometry.getBuffer('aVertexPosition'); // graphics.beginFill(0xFF0000); // graphics.drawRect(buffer.data[20], buffer.data[21], 8, 8); // graphics.endFill(); //manually set just for this demo buffer.data[0] = 34; buffer.data[1] = 100; buffer.data[2] = 176; buffer.data[3] = 100; buffer.data[4] = 258; buffer.data[5] = 60; buffer.data[6] = 422; buffer.data[7] = 104; buffer.data[8] = 478; buffer.data[9] = 104; buffer.data[10] = 34; buffer.data[11] = 162; buffer.data[12] = 176; buffer.data[13] = 162; buffer.data[14] = 258; buffer.data[15] = 162; buffer.data[16] = 422; buffer.data[17] = 162; buffer.data[18] = 478; buffer.data[19] = 162; buffer.data[20] = 34; buffer.data[21] = 224; buffer.data[22] = 176; buffer.data[23] = 224; buffer.data[24] = 258; buffer.data[25] = 264; buffer.data[26] = 422; buffer.data[27] = 220; buffer.data[28] = 478; buffer.data[29] = 220; buffer.update(); } The code returns output2.png Yes, PixiJS has additional projections plugin (https://pixijs.io/examples/#/plugin-projection/quad-homo.js), but it seems that output could be controlled just by four corner points. In my case, I need more. At least 10 or even 15. If I couldn't use projection plugin, maybe there is a way to implement a custom shader for aVertexPositions and UVs?!

I'm totally new to pixijs and to game development in general. I need a help in fixing this error in devices that use canvas if webGL is not available. Im using projection plugin and it is seems like the error is from projection.sprite2d. I am researching about the issue and found PIXI.CanvasRenderer.registerPlugin but don't know how to use it. please help I'm stuck with this issue. TIA

Howdy, I've recently completed the prototype phase of a little project I'm working and wanted to reach out here for some feedback. The game is more of a demo at this point. I have a few ideas on where I want to take this game (RPG/leveling mechanics, more content, etc.) and I'd really like to change from single player to multiplayer. I've toyed around with a previous multiplayer project before. It's a lot of work, but honestly I think multiplayer would just be more fun for this type of game. Anyway, have a go and let me know if you think I'm on the right track or not. About the code The game uses only vanilla JavaScript, HTML5, and CSS. It's all my code- no frameworks. I found a couple of helpful tutorials on how to do the projection and I've spent quite a bit of time learning how to build my own implementation. It is a really fun project to work on and I'm excited to actually turn it into a playable game... eventually. Your feedback in these areas would be most helpful: Is the gameplay fun? Can your device run the game well enough to play? There are resolution settings in the menu that may help. Is the third person camera confusing or a strain on the eyes? Would you like to play the game again, assuming it was built into a complete game? (more abilities, proper UI, leveling, more mobs and maps, etc.) Would you rather play if the game was multiplayer? Caveats I'm not an artist- this is just placeholder art for demo purposes. Sadly, it's the best art for a game I've ever made. I'll stick to coding. The UI is pretty terrible, especially the touch controls. Honestly, it's just enough so the game is playable. Major redesigns are needed going forward. There's no sound. I've been lazy on that side of things, but I'll get to it eventually. The shop currently doesn't function because it doesn't exist. Each party member only has 1 attack at the moment. The game should run on mobile without issue, but I've only tested on my junky old Android phone with Chrome. I really have no idea what state it is in outside of that. There is exactly 0 direction in-game and will be absolutely confusing to a first time player. My bad. Instructions Controls are listed on the "start screen". WASD to move and J to attack. Click/touch the Start Game button to begin the game in the Hub. Press Escape to bring up the in-game menu which allows for changing the graphics settings. Walk up to the Quest "NPC". Once in range, a Quest button will appear on your UI. Click/touch the Quest button. A randomly selected dungeon quest will be presented. You may decline or accept. Upon accepting the quest, a Portal will appear on the map. Move to the portal. Once in range, a Portal button will appear on your UI. Click/touch the Portal button to be transported to the dungeon. Move through the dungeon and defeat enemies. Using 1 & 2 or clicking/tapping on the party member plaques will change your selected party member. Once all enemies have been defeated, a Portal will appear and allow you to return to the Hub. There are 3 total dungeons. I would suggest to avoid The Arena. It's way too hard, but was a great way to test the game over functionality! Please click here to access the game. And thank you!

Hi! I'm hoping that someone else has tried this already. I want to reshape the texture in a projecting spotlight. I tried adjust the uScale and vScale on it and they did not work for me. I tried the same texture on a surface and obviously got the result I was looking for. I'm looking for an effect where I can reshape the spotlight into other shape than circle really. I think I figured out why it is shaped like a circle because of the math involved. My idea was actually to produce a video projector scene very much like this PG here (Hit Run after loading for first time, otherwise video won't play): https://playground.babylonjs.com/#CQNGRK#7 I basically pasted in the video texture from elsewhere and thought to make a drive-in scene from that. Then the spherical light really would not do there. Help? Thanks!

I have a game with a lot of containers and sprites. I used GPU-Z for testing. After I replaced all containers and sprites with 2D, GPU load decreased on 20% What is the reason of that? What is the difference between container / sprites and container2d / sprite2d?

Hi guys. I want to create a effect in PIXI, that looks like first frames in this video -> http://hubblesite.org/video/513/news_release/2006-01 (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?

Hey all, Sorry to bother you with yet another shadow related question, but i'v ran into trouble. I'm doing some tests with dynamic world creation and shadows. So i'm using directional light to cast shadows, but for every mesh i import the shadows get more and more "crispy". This is fine as long as i keep light.autoUpdateExtends as false.., BUT i ran into another issue; the "shadow projection" from the light is very slim and parallel with light angle, i simply don't know how to enlarge the shadow projection so it would fit with camera view. Any ideas? - eljuko EDIT: added image. As u can see, the shadows from the rocks doesn't fit in the projection.

Hello everyone... sorry for another noob question but I am learning and loving babylon! I am curious if babylon can project a texture onto multiple objects... similiar to how this is: http://playground.babylonjs.com/#1215MA but I want to be able to project from a specific point in the scene.. not from the active camera but maybe another camera in the scene? Thanks!

Hello guys, I'm doing an app to control objects via a Kinect sensor. I finally managed to control two hands (they are just images) on the screen, and the next step is to be able to put a Hand in front of a sphere and allow this sphere to follow the position of the hand. My hand is just an Image on the screen I move it by changing his left and top css properties, and my problem is how to know when my hand "touched" the sphere. I've tried with BABYLON.Ray(hand.x,hand.y) but it's like the ray is pointing somewhere I don't know, and the "touch" occurs somewhere far from the sphere. Any ideas ? Thank you in advance.