Popular Content

Showing content with the highest reputation since 08/16/19 in all areas

  1. 2 points
    That's nice using particles. Looks great. Using a shader would also be an option for water simulation.
  2. 2 points

    Latest version persists in browser

    Can you check what you have in your package.json to make sure npm is doing what you think it's doing? i.e. making sure it's explicitly setting 5.1.2 After that check the package.json inside pixi.js inside your node_modules folder for the version there. After that you need to make sure your bundler is not mucking around, as you mention a service worker it looks like you're already looking at this. _edit_ ooh, have you checked your package-lock.json file? it could well be the 'caching' issue is in there.
  3. 2 points
    Hello, Starting back from the Triangle Mesh Example, I would like to add it to a Container, and use the Container.alpha variable to act on my triangle (as it would do with a sprite). Please see this playground: https://www.pixiplayground.com/#/edit/5usZGTmqzQ4MtxP~QLUfF container.addChild(triangle); container.alpha = 0.5; // <- NOT WORKING (EXCEPT FOR 0.0) Triangle should be semi-transparent. What is the good way to do that? Thanks Romain
  4. 2 points
    Welcome to the forums! Congratulations with hitting a problem that is not possible to solve through docs in your first question on this forums. However, PixiJS is not a black box, it has sources: https://github.com/pixijs/pixi.js/blob/dev/packages/mesh/src/Mesh.js#L275 OK, either you override _renderDefault, either make "update" function that'll pass calculated alpha to uniform. https://www.pixiplayground.com/#/edit/dCSAWarvEMdFqWip1BcuO const shader = PIXI.Shader.from(` precision mediump float; attribute vec2 aVertexPosition; uniform mat3 translationMatrix, projectionMatrix; void main() { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); } `,` precision mediump float; uniform float alpha; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * alpha; }`); shader.update = function() { shader.uniforms.alpha = shader.alpha; } btw, that code in _renderDefault is low-level pixi over webgl, you can add hack more stuff if you override it
  5. 2 points
    One thing you may want to try and do is some more research regarding tile map engines. There are probably some GitHub repos for some. This way you can better learn how others are doing it. I have built tile map and scrollers a while back. The engine core itself was very different, since the engine was C++/OpenGL and specialized to handle it. Whereas in your case, you're using an existing engine and its methods to draw. If you are still truly destroying/creating 500 sprites per frame, you should rewrite your algo now. You definitely want to have a sprite pool you render from. Think of the problem as paging in 1-2 rows or columns. For most cases, those are your deltas. Take the simplified case of moving in the X axis. In this case, as you move to the right, for example, you will eventually hit the point where you will need to page in a column to the right. You can achieve this by simply grabbing the leftmost column and rebinding the texture (no destruction or creation) and updating positioning. Note at this moment I'm ignoring z order. The trick here is your overall tile area needs to be larger than your viewport so one doesn't see either side pop in or out. Now much overdraw will be dependent on individual tile size and the max speed you need to scroll through your map. Your "worse case" will be 2 dimension movement where it triggers both row and column swapping. However if you think about the problem more. You are no longer modifying 500 sprites. Rather in your case, about 150 sprites. Note in your code, you do far more than 500 sprites, you're doing 1250 sprites, but for consistency I'll use 500 as the high end number. This means that for the 350 other sprites, they should be "correct" and don't need adjustment. Now you have to address z order. You could opt to re-build z-order each round. The problem area really are when you need to insert versus append/push, since depending on implementation, that will move memory (unless it's a linked list ... I have't looked at the code). If it is a linked list, then it should be relatively cheap, but based on Ivan's comment, it sounds like it is not. One partial "cheat" you could do for draw order too is to have layer containers in your master container, and use that for your z. Note you'll still need to sort that. The other thing is clever art usage can minimize how much sorting is needed. A thing to look out for is how non-world objects interact. So, for example, if characters can look like they are "behind"/occluded by tiles, you need to have a method to control that draw order. In short: - Look for other tile engines and see if you can find some code to study. You want approach, engine type doesn't matter so much. You need to understand the basics of that type of engine more. - Don't destroy/create per frame. Reuse. In general this is a good rule. If you find yourself creating and destroying objects a lot during normal runtime, you should scrutinize your technique. This is not to say you never can do it. I do have some games where I actually create and destroy on the fly but it is for a handful of objects on a custom C++ engine. - Embrace object management. This is the unfortunate responsibility of the game dev. Sure you want to try and avoid it when possible, but world management ... in particular ones which incorporate a lot of animating visuals need to be managed.
  6. 2 points

    Why did the forums move?

    Sadly I share the same experiences. Lots of Facebook groups active on the gamedev subject but so goddamn toxic that there is no motivation whatsoever to stay there. I like forums like this, they are organised and structured, and when properly moderated, very fun. Completely agree with your opinion on Discourse there, just one big list with very user-unfriendly way to filter it.
  7. 2 points

    Why did the forums move?

    When I go to the Discourse site, I just see a list of messages. It doesn't look anything like this site. I guess I will have to make a fake username, and join, if that is where everyone is going. I can never fool these sites. Later some site will ask me "Vornay, do you know someone named <insert my real name>???", and I'm like, "No man, never heard of them." I guess if Phaser doesn't want to run a message board, that is the real issue. Having to moderate it probably distracts from working on Phaser. That is too bad. Social media is pretty toxic nowadays, with everyone apparently being either a Communist or a Nazi. If you get called a Nazi, these larger platforms will simply ban you. If one bans you, the others may ban you too. Your investment in their platform gets nullified. That is why I don't use Unity, Unreal, or other non-free engines. That is why I don't want to be dependent on the App Store or Play Store. That is why I don't work in Swift in anymore. One person gets a wild hair up their butt, and you lose everything. You find out your castle was built on their land, and you never really had a castle. That is why I wont use those forums. They are the opposite of free.
  8. 2 points

    Why did the forums move?

    I am not sure on Discourse policy of sharing data with 3rd party, but you can't really escape tracking. Most websites use Google Analytics. Your best bet is probably using Firefox with disabled tracking, using throwaway email for each service, (+ KeePass so you do not have to remember) and VPN.
  9. 2 points

    Need some help with a Free Drawing App

    Worked like a charm! You are a lifesaver, Ivan, thanks a lot.
  10. 2 points
    Usually its good to use "position" because it affects transform and not the shapes inside graphics. But in your case, you have to rebuild shape every time because UV's are changing, that means you have to change ONLY the shape, not the position. store position somewhere else, not in "position" field. this.brush.position.set(0, 0); this.brush.clear(); this.brush.beginTextureFill(this.resources.t2.texture); this.brush.drawCircle( event.data.global.x, event.data.global.y, this.currentWidth ); this.brush.endFill(); If you want to apply brush multiple times you can just drawCircle multiple points in it. I'm not saying that its best practice, but just if you understand how transforms and texture shift work (and they work like in a Adobe Flash), then this method is probably the best for the case. There's also "matrix" param in beginTextureFill that can help you . Of course when you experiment more, you can start using position + custom matrix inside beginTextureFill but at this point im afraid to suggest that, it will only confuse you.
  11. 2 points

    SpineBoy Mouse Track

    Hi, It should be something like that : // 0. Listen which Pixi mouse event that you want (here PointerDown) stage.onPointerDown = (pixiEvent) => { // 1. Get the bone/constraint that you want to move using mouse const target = mySpineObject.skeleton.findBone("target"); // 2. Modify it's coordinate with the mouse event of pixi target.data.x = pixiEvent.data.global.x; target.data.y = pixiEvent.data.global.y; } Not test..
  12. 2 points
    Hello, and welcome to the forums! I like drawing apps and i helped with several before. Basically, you want a textured brush, right? Graphics.beginTextureFill might help with that, you just have to clear() and drawCircle(x, y, r) every time you draw a brush. Usually I use multiple brushes (whole stroke!), and render() a container that has them - its more efficient per frame. There are other tricks, like, how to make transparent (alpha=0.5) brush and not override brushes in the same stroke. As for your original question - you have to wait some time before someone reponses, because my telepathic abilities aren't enough. My post was written without preparation, i didnt even look at your demo yet. Precise answer takes time to prepare.
  13. 2 points
    Igor Georgiev

    Load all assets in a folder

    How about a script like this: var fs = require("fs"); var list = fs.readdirSync("game/static/assets/audio"); var dynamicAssets = "{\n \"paths\":\n ["; for (var i = 0; i < list.length; i++) { dynamicAssets += "\n \"/assets/audio/" + list[i] + "\","; } dynamicAssets = dynamicAssets.substr(0, dynamicAssets.length - 1) + "\n ]\n}"; fs.open('build/dynamicAssets.json', 'wx', (err, fd) => { if (err) { if (err.code === 'EEXIST') { console.log('dynamicAssets.json already exists'); return; } throw err; } fs.write(fd, dynamicAssets); }); and then you load them like this: let bootLoader = new PIXI.loaders.Loader(); bootLoader.add('dynamicAssets', 'dynamicAssets.json?version=' + version) let dynamicAssetPaths = this.app.bootLoader.resources.dynamicAssets.data.paths; for (let assetIdx=0; assetIdx < dynamicAssetPaths.length; assetIdx++) { let assetPath = dynamicAssetPaths[assetIdx]; let regExp = /([^\/\\&\?]+\.\w{3,4})/g; let assetName = regExp.exec(assetPath)[1]; PIXI.loader.add(assetName, "." + assetPath + "?version=" + version, {loadType:"XHR", xhrType:"blob"}); }
  14. 2 points
    I wasn't aware that you guys had done this in 5.1.1. So I enabled PIXI.SCALE_MODES.LINEAR and went back to the default DisplacementFilter and ... it worked perfectly. The new shader code I was so happy about is completely unnecessary (on desktops at least - maybe I'll still use it if I want to be ambitious about mobile support). Oh well, at least I learned a lot the past few days. Don't worry about missing my issue, I'm sure I'll manage to wear you down with a million other questions in the next few months. In fact, I already have a tricky one in mind - I'll start a new thread right away.
  15. 1 point
    Hi everyone! Before anything I wasn't sure if this was the correct place to post this, please moderators move it as you consider if this should go to some other place like Projects and Demos. https://github.com/damian-pastorini/dwdgame Also, please consider that this is my first implementation ever! I've never used neither Node.js, even less Parcel, Colyseus or Phaser, my world before this first incursion in game development was all about PHP and Magento, so that should give you an idea from where I'm coming. This quite awful but working example took me 75hs, including the time I've used for research and for decide which platform use for the server and the client. After all the research, Node + Colyseus and Phaser 3 looked as the better start point since I was familiar with JS and HTML of course but had zero knowledge about Unity (the other option I would like to use), but I've prefered make the learn curve not so slow. So.... This is a really simple base MMORPG game created based on the Colyseus samples: https://github.com/gamestdio/colyseus-examples And on the Phaser 3 implementation from Jacky Rusly: https://github.com/jackyrusly/jrgame As you will see I've considerable modified how the jrgame was interacting with Socket.io in order to make it works as how the Colyseus example was working, I've thought that was the better way to do it (follow up on server ready samples and break apart the client sorry Jacky!) The game basics are login through DB, loader, scene change, players sync, but nothing like chat, items, or attacks was implemented here (so far). Here's the link to the repo: https://github.com/damian-pastorini/dwdgame Please feel free to create any tickets or pull requests for questions, fixes or improvements, I would love to get good feedback! I don't have a public link to show it yet but I'm planning to create a dev server soon (for now you will need to install it and run it to see it), at the end it will look like: https://jrgame.herokuapp.com But you will see the login screen first which in the server side will connect to the DB and all the players sync was done with Colyseus. I saw comments from people looking for Colyseus integrated with a DB engine (in this case I've chosen MySQL), so at least that part should be useful. I really hope this help more than one person, maybe someone like me who would love to get this as starting point. Best, Damian Reply
  16. 1 point
    Hello Gurus, I'm working on a project where I have 400,000 static rectangles (5px*5px) and a 20 rectangles that get added dynamically every second. At any given point in the frame, I only need to keep 3000 rectangles in the viewpoint. I'm using single graphics object and clear() method to render 3000 rectangles every sec (draw + clear). I have pan/zoom functionality added as well, and I'm using downsampling to remove overlapping pixels and reduce the number of points that I draw at any given point (to around 5000 rectangles). It works fine but the CPU/GPU usage is around 15%-23%. I'm looking for some suggestions to optimize CPU/GPU and memory usage and reduce the load on CPU/GPU. I set antialias:false on the app. It seems to help a bit. Any further suggestions to improve performance would be greatly helpful. Thank you. Here are couple of things that I tried, but no luck. 1)Instead of draw+clear, I created sprites using graphics and moved them around. That did not help either. 2)I cannot avoid clear and redraw because I have 400,000 points to draw. So I cannot draw all at once and have to downsample. Also, dependeing on the view window, I need to rescale the rectangles, which is extremely difficult to achieve without repaint.
  17. 1 point
    I assume when you ask "render it as canvas" you are referring to rendering the `PIXI.Graphics` as is? So in other words something like: const gfx = new PIXI.Graphics(); // Do stuff to make a graphic gfx.endFill(); app.stage.addChild(gfx); Yes, you are better off converting to a texture and the creating a sprite. The actual `_render` for a graphic does a bunch of work to display the parts of the graphic. Simplified graphic shapes like rectangles should be faster to draw. Just how much work is related to complexity and whether or not the graphic is batchable. Sprites on the other hand just update vertices (presumably only if needed, although looking at the code it doesn't look like it has any dirty bits) and then renders. Hmm, wondering. I'm not really a JS guy. But I've done some reading that seems like you can get some async stuff running. Has anyone dabbled with that? It would be super helpful if it is real async. Since then things like texture creation could be done off the main thread. The only caveat though ... which I don't know if pixi can handle is the need for some locks. I'm more used to multi-threaded game engines where one has those features to help better hide latency.
  18. 1 point
    actually, SVGResource is created automatically by loader, with baseTexture and Texture , its inside "res.svgTest.texture.baseTexture.resource" you can just create a sprite based on it: "new PIXI.Sprite(res.svgTest.texture" - that'll work Yes, there are 5 different objects here : 1. sprite - element of the stage tree, like in Adobe Flash. 2. texture - region of baseTexture 3. baseTexture - stores things in videomemory 4. texture resource - DATA that can be uploaded to videomemory, and how exactly to convert it to RGBA 5. raw data from loader When you get more experience, you'll understand why is it wrapped like that. Basically, if you have some other text vector format (not svg), you can make your own resource that have parsing and uploading algorithm and re-use it for many images.
  19. 1 point
    OK, if its relative to screen then we're fucked. Try change lineStyle internally and call "geometry.invalidate()". https://www.pixiplayground.com/#/edit/3AKL1vurX38ct_sY~43Ap That eats a bit less CPU but its still a re-upload. I know that there's a plugin in development that allows to change lineWidth relative to screen entirely on GPU, but cant give you code yet.
  20. 1 point
    The line thickness is always constant (3pixels) in relative to the screen. The line length however is varying as I have to resize it to the window size. i shared a picture below that shows exactly how it looks. https://ibb.co/Gkhzw7G I'm not clear on how to avoid repaint with just reposition and scale, without a way to hide/show dormant rectangles.
  21. 1 point
    Is line thckness constant relative to stage (zoom) or screen? You dont need to clear() and repaint every time if you just adjust position and scale. clear&refill is needed only for chunks that weren't visible in previous frame, or the one that is updated (new data). UPD: I love that kind of threads! When you make the main algorithm, while pixijs or any other renderer or framework is just your building blocks
  22. 1 point

    physics library

    Please tell me, what is the best physics library for Pixi.js or commonly used and do they all work with pixi.js v5?
  23. 1 point
    PIXI.Point.prototype.something = function() { ... }
  24. 1 point
    Okay, I think I found an answer to my own question. The trick seems to change the alignment if the lineStyle. Doing the following gives me the expected results. this.panel.lineStyle(this.menuDef.panel.stroke.thickness, this.menuDef.panel.stroke.color.color, this.menuDef.panel.stroke.color.alpha, 0);
  25. 1 point
    Hello, in my project i need to create a lot of sprites (we talking about 500 + something) every frame and destroy in next but alas, it seems that i dont dispose them properly and framerate drops extremely quickly, albeit at start it seems okayish I add each to some sprites container and clear it with sprites_container.removeChildren(); i dont keep references to sprites Id appreciate help regarding this issue
  26. 1 point

    [Beta] Retro RPG Online 2

    We use socket-io to parse messages back and forth from the server. We have currently one server, and each map is an instance containing the players and monsters. This is so less traffic is needed to maintain the world state. It uses what I call a message pump to avoid packet flooding the client in the initial packet and map changes. The renderer re-uses its previous render in optimized mode and loads only the new edges and in smaller screens which are then scaled to fit the user window. Checkout the open client for more information. Just thought I'd update the Player User Interface has had an overhaul and the window backgrounds are pure html/css without images (except the close buttons). I have yet to update the NPC windows as they will require more complex adjustments particularly for lower resolution devices. Enjoy!
  27. 1 point
    I say, just write something else and see if it works
  28. 1 point

    Loader in v5?

    Hi Everyone! `const loader = PIXI.loader;` is giving me a deprecation warning, but `const loader = PIXI.loader.shared` is coming up `undefined`. Can anyone tell me where the loader is hiding in v5? Thanks!
  29. 1 point

    Why did the forums move?

    Yes, pretty quiet here these days with most action happening in the (excellently supported) Pixi subforum. I understand why communities like to move and refocus but what I think sometimes gets missed in such evaluations is the value of "cross-pollination"? For example running Babylon (3D) posts alongside Phaser (2D) posts decreases the potential for tunnel-vision within both communities because more diverse eyes are exposed to the issues and challenges - even if few people from alternate arenas directly comment, the exposure effect is unavoidable, perceived walls come down, and expertise can come in from the side. Perhaps that is the strength of moving to a totally catch-all environment like StackOverflow etc - where all topics are entwined? Not always warm, fun and friendly though, whereas this forum has always been generous and decent.
  30. 1 point
    1. It's pretty common to use Apache Cordova (https://cordova.apache.org/) to bundle JavaScript into an app-like experience. There are some quirks with supporting old version of Android, but otherwise, there are lots of plugins available for interacting with native APIs (accelerometer, haptics, etc). 2. PixiJS uses WebGL which is very fast, especially on mobile devices. There are some performance tips on the GitHub wiki and I'm sure lots of advice here. You will probably be able to achieve 30+fps, if not higher, on mobile. Although, it's also easy to abuse performance, so make sure you understand issues of limited RAM and slower CPU, which are big limiting factors on mobile. 3. Yes for Cordova. In PixiJS v5, we have dropped support for CocoonJS. 4. A 2 second search revealed a bunch of Cordova plugins: "cordova in-app purchases", looks like there are a few options that would be worth testing. Good luck!
  31. 1 point

    Top Down Shooter Template

    Great work! 😃
  32. 1 point

    Why did the forums move?

    I am not sure what you mean by "forums". It sounds like you try to say as if everything and everyone from this website moved over to Discourse. The only thing I know for certain is that Rich and his team decided to setup a Discourse for Phaser to replace the existing subfora on this website with a new, official Phaser community forum. And since a lot of users here were using Phaser as their main engine, they also started moving over to there and stopped being active here. I mean, look at the stats. Barely 200 people visit this website daily (from which like 10-20 are actual members!) while it used to be like 4000 last year. That is a serious drop imho. I also don't see Rich being active here anymore, heck, wonder if any mod or admin is active at all. I sent the guys a message last month but have yet to receive a reply. I know many users check it daily but barely anyone replies anymore. I also have seen topics here on fora where they don't belong, let alone follow the rules if they do. If you tried such a thing last year, it got closed almost right away because mods still used to login daily, but now.. They got a lot of cleanup work to do if they do, I tell you that. That being said though, I looked at Discourse and I agree with point of view. I don't really can find it in my heart to like it either.. But than again, while there is lot to complain about Discourse, the forum software they use here is quite expensive on the other hand. I mean, look at the prices on the Invision website, bloody hell. Invision charges based on how many visitors you have daily while Discourse's pricing model is not based on your total daily visitors amount. So I completely get that Rich and his team started to look for alternatives. I mean, I respect the fact they use paid forum software without charging us anything at all, let alone pumping the website full of ads like any other company would do. You got to hand it to them, that is one damn respectful thing.
  33. 1 point
    Sent my videogame with rewarded videos, and they reject it because it doesn't show videos at any other time than from the "watch video" button 😩
  34. 1 point
    congrats! wow, you are doing it for drawing app! Yes, I think I helped people with that task for drawing apps before.
  35. 1 point
    For my app I also implemented freehand drawing but I use a two-stage approach: first I print circles on a renderTexture (that covers the viewport) wherever the cursor goes, and once the user emits a mouseup-event, I re-render the whole thing on a regular layer using a non-closed polygon along with simplify.js to reduce the number of vertices. For really quick movements there were 'gaps' in my implementation (since the mouse-emit-rate seems limited), so I also used interpolation to make that smooth. Works also really nice
  36. 1 point

    jump character in a game

    You should apply somekind of force in the button down handler and then update the character position in your ticker. The vy & vx are look like they would be your forces? Then the loop could be something like: character.y += character.vy; character.vy += gravity; if( character hits ground ) { character.y = groundy; character.vy = 0; } Or if you have something that has no gravity and you only wish to move the character from a to b on button press then I would suggest using somekind of tweening library. I use TweenJS myself. With that you could do something like this: up.press = function(){ Tween.get(character).to({y:0}, 1000); } up.release = function(){ Tween.get(character).to({y:255}, 1000); }
  37. 1 point
    Hello Ivan, Thanks a lot for your response! Yes, exactly, I want a textured brush, but the problem is it doesn't move as it should. Above are the 2 pics I attach one showing it should, one showing how it currently is after I added the Graphics.beginTextureFill part. How it currently looks like https://ibb.co/SXZvqzC How it should look like: https://ibb.co/HKJP8PD Below is my code snippet of how I prepare the brush this.brush.clear(); this.brush.beginTextureFill(this.resources.t2.texture); this.brush.drawCircle(0, 0, 50); this.brush.endFill(); and how I update the x,y,r of drawCircle this.brush.position.copyFrom(event.data.global); // this.brush.clear(); this.brush.beginTextureFill(this.resources.t2.texture); this.brush.drawCircle( this.brush.position.x, this.brush.position.y, this.currentWidth ); this.brush.endFill(); Obviously, I'm missing something about your advice, but I can't see it.
  38. 1 point
    Can't believe it, but I have just received a payment of 474,86 EUR for March, April, May and June. Let's see if others will receive their payments as well, so we can finally get rid of this topic...
  39. 1 point
    ok, i dont know need to replicate it somewhere but i dont have apple devices
  40. 1 point
    It looks like it might just be that Safari doesn't support Webgl 2.0. https://caniuse.com/#feat=webgl2 Cordova uses webkit 2 which is based upon the Safari browser...
  41. 1 point
    Thank You! How far did you play in the game?
  42. 1 point
    Really good, impressive. Made without any libraries too, must have taken a while to build the base! Really clean movement and animations are spectacular.
  43. 1 point
    Your translation project looks incredibly cool too. I know a bit about i18n
  44. 1 point
    Should be fine, give it a try. If you need someone to test it then take my contact details, I could use a PIXI contact.
  45. 1 point

    Error with Spine version 3.8.60

    quick fix for the time being: you can change the spine version in spine settings => Version =>to 3.7.x (dropdown) and it should work again.
  46. 1 point
    PIXI's DisplacementFilter works by using a (mostly) default vertex shader and does the actual displacement work in the fragment shader. In the fragment shader, it reads the x & y displacements from the red and green color channels of the displacement map. Then to determine what color should go at (x,y), it samples the color at (x + x_displacement, y + y_displacement). I wonder if this can be flipped around so that the displacement work is done in the vertex shader by displacing vertices according to the displacement map. For this to work, I think the displacements would be stored at the source pixel instead of at the destination pixel, so displacement vectors go in the opposite direction. I'm asking because in the application I'm developing I want to be able to extrapolate displacements outside the ordinary range. In the default DisplacementFilter I can vary displacementFilter.scale to change the warp smoothly from zero to full displacement. But I can't just plug in 150% to get an even larger displacement, or put -50% to go the other direction (because changing the scale only affects pixels that already get displaced). But if displacements were interpreted as vertex shifts, I believe I could do just that. Is this feasible? Has anyone already experimented along these lines? I've begun sketching on some code, but it's not working. No errors, but also no displacement. I hesitate to share it because I honestly don't quite know what I'm doing yet when it comes to shaders. But oh well, here it is. Please go easy on me. Vertex shader: attribute vec2 aVertexPosition; uniform mat3 projectionMatrix; uniform mat3 filterMatrix; varying vec2 vTextureCoord; uniform vec4 inputSize; uniform vec4 outputFrame; uniform vec4 inputClamp; uniform vec2 scale; uniform mat2 rotation; uniform sampler2D mapSampler; vec2 filterTextureCoord(void) { return aVertexPosition * (outputFrame.zw * inputSize.zw); } void main(void) { vTextureCoord = filterTextureCoord(); vec2 vFilterCoord = ( filterMatrix * vec3( vTextureCoord, 1.0) ).xy; vec4 map = texture2D(mapSampler, vFilterCoord); map -= 0.5; map.xy = scale * inputSize.zw * (rotation * map.xy); vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy; gl_Position = vec4((projectionMatrix * vec3(position + map.xy, 1.0)).xy, 0.0, 1.0); } Fragment shader (just the default): varying vec2 vTextureCoord; uniform sampler2D uSampler; void main(void) { gl_FragColor = texture2D(uSampler, vTextureCoord); }
  47. 1 point
    I finally managed to learn (just barely) enough shader programming to fix this myself. The problem was as I suspected that the displacement map wasn't getting interpolated properly by just by calling texture2d. So I added bilinear interpolation manually in the fragment shader, like this: varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; uniform mat2 rotation; uniform sampler2D uSampler; uniform sampler2D mapSampler; uniform highp vec4 inputSize; uniform vec4 inputClamp; uniform vec4 mapSize; vec4 texture2D_bilinear(sampler2D sampler, vec2 coord, vec4 samplerSize) { vec2 uv = coord*samplerSize.xy - 0.5; vec2 icoord = floor(uv); vec2 f = fract(uv); vec4 topleft = texture2D(sampler, (icoord + vec2(0.5,0.5)) * samplerSize.zw); vec4 topright = texture2D(sampler, (icoord + vec2(1.5,0.5)) * samplerSize.zw); vec4 bottomleft = texture2D(sampler, (icoord + vec2(0.5,1.5)) * samplerSize.zw); vec4 bottomright = texture2D(sampler, (icoord + vec2(1.5,1.5)) * samplerSize.zw); vec4 top = mix(topleft, topright, f.x); vec4 bottom = mix(bottomleft, bottomright, f.x); return mix(top, bottom, f.y); } void main(void) { vec4 map = texture2D_bilinear(mapSampler, vFilterCoord, mapSize); map -= 0.5; map.xy = scale * inputSize.zw * (rotation * map.xy); gl_FragColor = texture2D(uSampler, clamp(vTextureCoord.xy + map.xy, inputClamp.xy, inputClamp.zw)); } The vertex shader is the default DisplacementFilter shader. I also had to pass in a new uniform ("mapSize") to tell the fragment shader the dimensions of the displacement map. But it works 100% - the warped result is just as smooth and pixel perfect as my manual canvas version linked above. So now I can warp large images at 60 fps instead of taking roughly one second per frame. But I still don't understand why this was needed. I was under the impression that Pixi used bilinear interpolation by default in texture2D calls (by passing GL_LINEAR). Or am I wrong about this? To Pixi devs: feel free to add this as an boolean option to DisplacementFilter. Call it accurateDisplacement or smoothDisplacement or something. But it probably shouldn't replace the default shader since the bilinear interpolation makes it run slower than the default (4x the number of calls to texture2D).
  48. 1 point
    This prototype has a ship selector. Each scheme is random. The goal is to fill the blue bar by killing the mothership. When our ship collide with enemies we loose energy (red bar). You have to tap on the screen (or click with the mouse on the game area) and the ship will try to join the selected point (till you maintain active the area with the mouse or your finger) shooting in the same direction. The enemies, when killed, release some stuff to recover the energy. To create a new level you only need to fullfill the transparency of the file Grigliato_20x20_V2.xcf with black blocks (the game will replace the black blocks with random sprites), see the Map files for examples. You can use my script as you want, they are free. If you use this prototype for commercial purpose, please, change the graphic/music/fx assets I’ve used (these are Opengameart’s assets (opengameart.org), for the credits see the Prototypes HUB section). Please, let me know if you use my scripts, thanks. Play it online: https://www.magratheaworks.net/shooter/ Download the sorce code: https://www.magratheaworks.net/Prototype_Space_Shooter.zip
  49. 1 point

    Pixi.js Showcase

    Yes i made https://skyfight.io and i had submitted it to your pixi gallery a while ago, but it appears to have been ignored, which i don't understand as its a game that really shows what can be done with pixi. About Skyfight Skyfight is a multiplayer dogfighting game where the players control a fighter aeroplane and fly around the game zone trying to destroy other players' planes. Each fighter is equipped with basic machine guns which can be temporarily upgraded by catching falling parachutes, there are also upgrades for manoeuvrability, shields, speed and our favourite Kamikaze. As the players play they gain rank and as they progress through the ranks, the more features such as custom and team games become available at those ranks, also as you play you will also be awarded medals for completing some of the 49 achievements which are distributed throughout the game. How to Play Skyfight The objective of the game is to shoot down as many planes as possible while increasing your score and rank. As you enter the game for the first time there is a keyboard layout which consists of up down left and right and of course shoot which is the space bar. It’s not complicated just lots of fun. Skyfight Strategy The strategy is to kill everyone, but there are some hidden gems like looping which always gets you out of trouble when someone is on your tail. Collecting the health parachutes should keep you alive, but if you do get shot down then just hit enter and take off again as your rank and medals is automatically saved no matter how many times you go down. So don’t just sit there get one up!
  50. 1 point

    Pixi.js Showcase

    This is the isometric engine I'm working on, it use Pixijs v3 for rendering. Nothing playable for now, but I'll share an online demo soon