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?!

3D perspective is perfectly possible in the plain 2D canvas of HTML5/JavaScript without the overhead of any frameworks or libraries. As an example I have recently created a small game in response to a GameDev challenge relating to DOOM. I was troubled by a bug in my display when the player moved close to walls. I sat down and made some diagrams to help me get my thinking straight and then I was able to solve the bug. I thought others might find my diagrams useful so I am adding them here. My aim is to demonstrate that 3D perspective is perfectly possible in the plain 2D graphics context. I believe that it is simplest for beginners to start in this way, getting familiar with JavaScript without the additional learning curves presented by the various frameworks. You can read about what I have just done in relation to DOOM here (which has a link to my little game): https://www.grelf.net/predoom/info.html The code was adapted from my earlier and more complex game, The Forest: https://www.myforest.uk/ (I now need to add a correction to the drawing of the mines in that program, having solved the bug).

Hi all, I am planing to build online black jack game. I wanted to create a perspective view environment for this game. I wanted to add animations like flipping cards, squeezing cads, dealing etc. I am looking for a game engine for this. I have not used Pixi JS before. But I do have experience with Cocos Creator. May I know whether something like this be done with Pixi JS? If it is possible can someone point to area I should be check? Greatly appreciate any help you can provide.

I have opened the same question on stackoverflow: https://stackoverflow.com/questions/47342853/perspective-correct-texture-mapping-in-pixi-js My purpose is making a simple 3d engine with 2D sprite (I choose Pixi.js this time as I can control the vertices of sprite arbitrarily), but I cannot understand how to map the texture to a perspective projected quad correctly. texture: https://imgur.com/Z5xDL8V I am using the PIXI.mesh.Plane for the quad, if the subdivision is low var verticesX = 2, verticesY = 2; this.field = new PIXI.mesh.Plane(resources['palette'].texture, verticesX , verticesY ); This will give out the result of screenshot01: https://imgur.com/a/m261h You can see the texture mapping is incorrect. Goes on I increase the division to 4 after the projection to screen vertices, and calculate the division point linearly. this.field = new PIXI.mesh.Plane(resources['palette'].texture, 5, 5); var lt = [this.field.model.screenVertices[0], this.field.model.screenVertices[1]]; var rt = [this.field.model.screenVertices[2], this.field.model.screenVertices[3]]; var rb = [this.field.model.screenVertices[4], this.field.model.screenVertices[5]]; var lb = [this.field.model.screenVertices[6], this.field.model.screenVertices[7]]; var segX = this.field.verticesX - 1; var segY = this.field.verticesY - 1; var vertices = []; for (var i = 0; i < (segY + 1); i++) { var l = (lb[0] - lt[0]) / segY * i + lt[0]; var r = (rb[0] - rt[0]) / segY * i + rt[0]; for (var j = 0; j < (segX + 1); j++) { var t = (rt[1] - lt[1]) / segX * j + lt[1]; var b = (rb[1] - lb[1]) / segX * j + lb[1]; vertices[(i * (segY + 1) + j) * 2] = (r - l) / segX * j + l; vertices[(i * (segY + 1) + j) * 2 + 1] = (b - t) / segY * i + t; } } this.field.vertices.set(vertices); that is 4x4 division as 5 points for each edges, the result is shown as screenshot02: https://imgur.com/a/6HREk, but the height of each division is the same, the illusion of perspective is broken How can I achieve the result as the screenshot: https://imgur.com/a/ZEUHu The height of division proportion to the depth respectively Or am I heading to a wrong direction to solve the problem, please suggest me some advise, thanks. PS. The debug message in the screen is describing the vertices coordinate of the field lay on ground in clipping space, not the screen space.

I'm trying to do collision detection for a game that has a camera perspective similar to NES classics like Metal Gear, Teenage Mutant Ninja Turtles 2, and double dragon. It's mostly top down, but at an angle so that you can see the sides of objects and characters. See the image for an example. Notice how the play sprite (green) can walk all the way up to the car until his feet touch the bottom of the car. So the collision is not on the whole character model, only his feet. Also, when attacking or being attached the player sprite and the enemy sprite must be on the same horizontal plane for their attacks to collide. I've been trying for ages to get something like this to work in Phaser, but I don't know how. Are there any solutions out there? Any games written in phaser that already do this?

Hello there, I'm new around here and also newbie using Phaser. I have only coded turn-based games and I recently learnt how to make classic 2D platform games with Phaser (which is incredibly easier than I thought). I'm interested on develop a tennis game. Watching some old NES tennis game, every tennis game use a vertical camera with some perspective which makes appear the closer half of the court bigger than the other one, does anyone knows how to approach that kind of camera/perspective? Thank you!

Hi guys, i've bring this example with Pixijs and i've done a test. I put the canvas inside a div (#content), this div has transform: perspective(900px) and rotate(20deg). The hit area is not ok, 'cause has the old coordinates without calculate perspective. (see attachment) So, how can i get the new coords to pass to hitarea ? Thanks

Hey guys. A thought just came into my head. How would you go about pulling off an Isometric Perspective in Phaser? I tried looking up some examples but many of them are using older versions of Phasers. I was wondering if anyone has a demo or example of a more recent game made in Iso using Phaser. Also some general information about how to achieve Isometric Perspective in Phaser would be greatly appreciated.

Hi, sorry, am noob. What is the name for this effect: Can you recommend me some example games/ tutorials(any language) using this style? Thank you