Leaderboard


Popular Content

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

  1. 3 points
    Hello, My goal is to update a small part of a texture the fastest way possible with WebGL2, preferably using Pixi.js v5 (RC 3 is out). Am I right that a RenderTexture is going to re-upload the whole texture whenever there is a change? (this would not be good for a big texture, hence why I am looking for another method) I'm a complete noob when it comes to OpenGL, but I've googled a bit and figured that I can use gl.texSubImage2D() to upload just the part of the texture that I need to change. I didn't find a way to get the WebGLTexture object of a PIXI.Texture, so to be able to use that command I did something like this (not the complete code): renderer.addSystem(PIXI.systems.TextureSystem) renderer.TextureSystem.contextChange() // needed to do this loader.load(main) // and could not use gl.texSubImage2D() on tex before the loader called main function main() { let tex = resources['test'].texture let imgData = new Uint8Array(32*32*4) renderer.TextureSystem.bind(tex) renderer.gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) renderer.TextureSystem.unbind(tex) } But I wish that I had the WebGLTexture available so I could avoid messing around with PIXI.systems.TextureSystem, because I don't really know much about it or when and how it should be used. I also want to read the previous data and change it, I figured it can be done with: gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But that needs the frameBuffer to be binded first... Hence I tried to also use the PIXI.systems.FramebufferSystem, lol: renderer.framebufferSystem.bind(fb) //fb = new PIXI.Framebuffer(tex.width, tex.height).addColorTexture(0,tex) gl.readPixels(0, 0, 32, 32, gl.RGBA, gl.UNSIGNED_BYTE, imgData) But it was not that easy, I didn't even find a way to unbind it. But I guess it is not supposed to be used for my little problem...? Maybe there should be some Pixi.js functions to do this? Maybe something similar to this: texture.getPixels(x, y, width, height, ArrayBuffer) texture.setPixels(x, y, width, height, ArrayBuffer) I'm new here btw, this is my first post I don't have much Pixi.js experience yet, but I really like it.
  2. 2 points
    Hey there, I made this little game called Life in the Static, the basic gist of this game is that you have an ability to stop time. LINK TO PLAY THE GAME: Tasty Link
  3. 2 points
    Does this help? https://www.pixiplayground.com/#/edit/sNKLacqLJenYpsQyc6mIp The issue you were struggling with is that Text is lazily updated. It only usally gets updated when it gets rendered; but you can force it to update with the updateText() function.
  4. 2 points
    Hello, I'm creating a front end for a graph display application. It displays a sort of fancy force directed graph, so there are nodes and lines. I'm using pixi-viewport to contain my main scene so it can be zoomed/panned/culled. Once you zoom in past a certain limit the nodes will start to display a text label across the center. I'm using PIXI.Text for these as I don't control what characters will be displayed. I want the text to look crisp so I'm willing to take the hit of generating new text textures on each zoom action. This isn't too expensive as you have to be so far zoomed into to activate the labels that there isn't to many of them on screen at one time. The problem I have is the the text is inside a container that has the hierarchy for a graph node, its shadow/outer selection, inner ring, icon etc so it inherits the world transform for scale and it causes the text to scale and then look bad. I don't want the text to scale as I regenerate it at a suitable text size each zoom to look perfect. I tried the naive solution of trying to apply an inverse 1/parent-scale which sort of works some of the time but not really. I tried putting the text on a layer above the viewport and manually positioning them and resizing them, this worked perfect till I dragged one node over another and realised z-indexing is broken now that they aren't drawn with the rest of their node display objects. Does anyone know if there is a way to stop the worldtransform from applying to a child/child container? I'm currently considering creating my own container subclass that somehow sets the world transform to identity and just position its local x,y at world co-ordinates inside the viewport, this container will be added into the node hierarchy and contain the text item. I'll need to browse through the code a bit to see how. But I'm not sure if it is possible, even a good idea, or complete madness.
  5. 2 points
    Yes, there is! Here's an example of Shockwave that you could include w/ a `<script>` element. https://cdn.jsdelivr.net/npm/@pixi/filter-shockwave@3.0.1/dist/filter-shockwave.js All filters are published to NPM with bundler file versions ("lib" folder) and a browser version ("dist" folder). You can use jsdelivr or other CDN that allows you to include files from published NPM versions.
  6. 2 points
    jonforum

    Line of sight triangles in v5

    It reminds me of what has been implanted in this game. https://ncase.me/sight-and-light/ I suppose that you have already got your hands on these articles, I share them in case. it in canvas no pixi but it will be cool to see this in pixidemo ! a codepen ** https://codepen.io/xno/pen/YOQZzw https://codepen.io/pandaec/pen/rzxYNB a jsfiddle ** http://jsfiddle.net/nLMTW/ http://jsfiddle.net/s2un50dp/ Shadertoy ** best performance i think https://www.shadertoy.com/view/4dfXDn Some code for do it in a shader GLSL https://stackoverflow.com/questions/34708021/how-to-implement-2d-raycasting-light-effect-in-glsl and a very good article https://www.redblobgames.com/articles/visibility/
  7. 2 points
    Exca

    creating a animated soft color

    You can do that with vertex shader by giving each vertice a color and then gpu interpolates between those points. Or you can do the calculation in fragment shader to get more refined look. Here's an example how it could be done with fragment shader https://www.shadertoy.com/view/tls3zS For info on how the color palette is done read this article http://www.iquilezles.org/www/articles/palettes/palettes.htm
  8. 2 points
    khleug35

    Space Shooter J Hit

    Hello Everyone. My new HTML5 shoot em up game made using Panda2 This game can play on mobile or desktop, but this game is no sound yet. Special thanks to @enpu, @Stephan and @Wolfsbaneteaching me coding skill, really thanks This game can play on mobile or desktop Try the game in here , hope you enjoy: https://superfranco.itch.io/space-shooterjh Android Version: Google Store Link ScreenShot: How to Play? For desktop control W key - Up A key - Left D key - Right S key - Down P Key - Pause the Game Space - use subweapon For Mobile control You can control the ship movement with JoyStick Click or press the icon to use subweapon and Pause the game. You can destroy the enemy and get money to buy a new ship and upgrade them. Mega Bomb - Mega Bombs damage and clears all forms of the enemy from the screen. When upgraded to level 3 or above,it can also clear enemy gunfire or bullet. Laser - Laser allows you to deal massive damage onto your enemies. Energy Shield - Energy Shield can protect player, When upgraded, it improves the duration of the shield. Mobile version. Android This is a classic vertically scrolling space shoot 'em up game. It has 9 levels with Easy and Hard unlocking regimen. The Hard mode can make double the amount of stars as your reward. You can go to store to upgrade your ship and buy a new ship. How to play -Control the ship movement with JoyStick -Click the icon to use subweapon and Pause the game. Item- Coin - Dropped from enemies , you can take this to upgrade your ship and buy a new ship. Health - Heals 20% of your ship. Subweapon item - increase one Subweapon amount of use. SupWeapon Mega Bomb - Mega Bombs damage and clears all forms of enemy from the screen. When upgraded to level 3 or above,it can also clears enemy gunfire or bullet. Laser - Laser allows you to deal massive damage onto your enemies. Energy Shield - Energy Shield can protect player, When upgraded, it improves the duration of the shield. Ship upgrades are Attack -power of bullets from main cannon. Speed - speed of ship. Health - endurance of the ship. SupWeapon - increase your SupWeapon power or improves the duration of the shield. If you clear all the stage with Hard mode. You are successful to complete the game. Made With: https://www.panda2.io/
  9. 2 points
    If you don't need gradients, there is this clever 3 sprites approach :
  10. 2 points
    themoonrat

    PIXI Interaction Touch

    You rang, m'lord? @JECKL try looking at `renderer.plugins.interaction.eventData.data.global` instead
  11. 2 points
    We are working on full example for playable ads with hacks for pixi loader that allow to bundle everything including Spine models into one file . You can either wait 2-4 weeks or do it yourself.
  12. 2 points
    That's exactly why a year ago we've added this awesome API into v5. Right now v5 is almost there, and you can experiment with v5-rc3. I really hope that you like that system because I made it exactly for cases like yours, it was VERY difficult to explain to everyone in the team and get an approval. People need access to textures, authors of PixiJS cant possibly know everything that user wants. This is how you get GLTexture: https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js if you call "baseTexture.update()" somewhere before the frame, it will notify TextureSystem that texture needs updating , and then when one of pixi renderers asks to bind that texture, it will call "TextureResource.upload" method. That's how it happens: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/TextureSystem.js#L139 According to our main image resource, https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/BaseImageResource.js#L64, you can track the state not only by dirtyId, but also by "glTexture.width/height" . Basically, if width and height are wrong you upload whole texture, otherwise you go for subImage. As for previous data, readPixels is tricky thing, its the only synchronous operation there. When I use it, I call it only after whole render(), only one time. I suggest to maintain your copy of teture independently from glTexture: in an array or in canvas in your TextureResource, that way you wont need to call readPixels(). SUMMARY: If glTexture width and height are wrong, upload whole array. Otherwise modify part of array you need, put that part into temporary array and call subImage. Dont forget to set width and height to correct values. and HAPPY DEBUGGING!
  13. 1 point
    for example we are loding this PNG file in base64: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAMAAACeL25MAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAz31IEhkAAAAQSURBVHgBY0AGjExAgokJAAAtAAiPjSHbAAAAAElFTkSuQmCC while debugging I noticed that it goes into prepareUrl method which splits the dataURI into two parts: directory: "image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAMAAACeL25MAAAACVBMVEUAAAD///////" file: "9zeKVjAAAAAnRSTlMAz31IEhkAAAAQSURBVHgBY0AGjExAgokJAAAtAAiPjSHbAAAAAElFTkSuQmCC" we used Texture.from("data:image/png;base64,..."); before and it worked fine. It's strange, but when pasting this dataUri in pixi playground - it works just fine, so the problem is somewhere in my code!
  14. 1 point
    It appears from your code that all of your sprites are the same. If this is the case, I suggest using a ParticleContainer instead as this will vastly improve rendering performance. const renderer = new PIXI.autoDetectRenderer({ width: 1920, height: 1080, preserveDrawingBuffer: true, transparent: true, backgroundColor: 0xffffff, antialias: true, }); let stage = new PIXI.display.Stage(); let spriteContainer = new PIXI.ParticleContainer(); stage.addChild(spriteContainer); for (let i = 0; i <= 150; i++) { let sprite = PIXI.Sprite.fromImage(tallLine); sprite.x = i * 10; spriteContainer.addChild(sprite); } requestAnimationFrame(rafGameLoop); //move all the sprites left 10 pixels per frame const rafGameLoop = () => { requestAnimationFrame(rafGameLoop); spriteContainer.children.forEach(sprite => { sprite.x = sprite.x - 10; }); renderer.render(stage); }
  15. 1 point
    Just started playing today and I'm already addicted. Awesome I really like this game.
  16. 1 point
    Yeah, one more, VERY SIMPLE way to do that, just for Sprite internals: hack calculateVertices. https://github.com/pixijs/pixi.js/blob/dev/packages/sprite/src/Sprite.js#L221 "myText.calculateVertices = hackyFunction" , and function uses only "tx ty " part of transform.
  17. 1 point
    Howdy! Brand new to Pixi.js and JS development in general. I have a quick question regarding InteractionManager. I have two objects on the stage: a box with a scroll listener for mousewheel events and multiple boxes "underneath" with pointertap listeners. Is there a way to capture these scroll events and the pointertap events on the objects underneath? The current behavior is.. the scroll events are fired, but because that scroll box is interactive and above the click boxes, the pointertap events are not fired. Any thoughts? Thanks in advance!
  18. 1 point
    Hello, I'm started with pixijs for the web since few weeks ago, I readed the documentation and also readed different post of recommended tutorials in this forum, but not understand well all the pixijs parts, for example the container child events etc. Anyone knows any videotutorials o video courses? any book? Thanks for all!
  19. 1 point
    In v4 there's that plugin that allows to apply filter to any part of screen: https://github.com/pixijs/pixi-picture Demo: https://gameofbombs.github.io/examples-heaven/?v=v4.8.7#/picture/displacement-backdrop.js Unfortunately, its not ported to v5 yet, so you have to wait a week or two or get back to 4.8.7
  20. 1 point
    Hello, nerds ! Happy v.5 release also ! So I`m making pinch to resize(zoom like), stretch and shrink(which is basicly resizing to constant values) over class that extends Sprite or Container. I`m not defently sure what I should extend. My class has methods resize(newWidth, newHeight), stretch() and shrink() . For ease I will call the class Player which extends Sprite or Container with the 3 additional methods. Everything was okay when the parent was Sprite with texture. Then I had to add as child different sprites. So the composition went complex and the algorithm went to the trash. The composition is: Player - extends Sprite or Container, methods resize(newW, newH), reposition(newX, newY), stretch(), shrink(); Background1 - extends Sprite, has texture; visible only when stretch() is called; size - 50x50 Background2 - extends Sprite, has texture; visible only when shrink() is called; size - 100x100 Video - extends Sprite, has texture; always visible; initial size - 500x500 Label - extends Sprite, has texture; visible some times only; size - 70x70 Text 1. At the begining the Player instance has to be shrinked. So the size has to be 50x50. If user tab it, it has to stretch with size 100x100. 2. If user use pinch when it is stretched it has to resize. The question is: In my methods resize(newWidth, newHeight), stretch() and shrink() which children I have to scale, change width and height and so on. Where the factors are - the Background sprites are with different sizes and changing its visibility and the Video sprite is with bigger size than the need. Additional(useless): I tried a lot of things but there is no success. And maybe I`m wrong with something small. If the problem is not clearly defined I`ll make changes! Thank you very much !
  21. 1 point
    Still on vacation. I cant check the example, but it sounds like you need custom shader and attributes, like in https://pixijs.io/examples/#/mesh/triangle-textured.js
  22. 1 point
    I've made a fork and changed keydown handler a bit https://plnkr.co/edit/EPyxbRDmSg0tstD5Q55h let me know what you think about it.
  23. 1 point
    My example shows a very simple Snake game in TypeScript and pure WebGL. And it shows how to place a TypeScript multi file example on SandBox. If you know how to improve the code let me know. Sandbox: https://plnkr.co/edit/7gjdZi2GNHZvtHQEMc4Y?p=preview
  24. 1 point
    Too bad that the forum was down for so long... anyway I peeked at the problem that Ivan encountered in his V5 demos, and found out that syncUniformsGeneration function generates empty function (full story can be found here). Having done that I went back to v4 and got the thing working, with one little caveat that I feel like is worth mentioning. When testing out filters I found out by default the last shader is set active.So if you have multiple shaders setup, you'd have to manually "activate" appropriate shader before writing to uniforms, otherwise webgl would swear at you in console with red errors. In order to do that, however, you'd need access to shader created by this line (cached one will also be fine) 19478: shader = new _Shader2.default(this.gl, filter.vertexSrc, filter.fragmentSrc); However, it is a local variable of FilterManager's applyFilter function, so I ended up using this monstrocity as a workaround PIXI.InjectedApplication = class InjectedApplication extends PIXI.Application { constructor({width = arguments[0], height = arguments[1], options = arguments[2], noWebGL = arguments[3], sharedTicker = arguments[4], sharedLoader = arguments[5]}) { super(width, height, options, noWebGL, sharedTicker, sharedLoader); var oldSyncUniforms = this.renderer.filterManager.syncUniforms; this.renderer.filterManager.syncUniforms = function(shader, filter) { //shader is NOT of type PIXI.Shader but of _Shader2 ! //Call "vanilla" sync uniforms oldSyncUniforms.call(this, shader, filter); //Then call custom one if(filter.syncUniforms) { filter.syncUniforms(shader); } //Save references to filter //in order to be able to switch active shader. filter.__program = shader.program; filter.__shader = shader; }; } updateShader(shader, func) { //this.shaders is just a map of PIXI.Filter shaders let shdr = this.shaders[shader] || shader; let prev = this.renderer._activeShader; this.renderer.bindShader(shdr.__shader); //Make shader use program (openGL terms) func(shdr); //Execute function app.renderer.bindShader(prev); //Bind previous original shader back } } And the use example is simply this: function mouseMoveHandler(e) { let newpos = e.data.getLocalPosition(app.stage); app.updateShader('squareshader', function(shader) { //_uniforms are my custom uniforms and squares is array of structs in GLSL shader._uniforms['squares[0].coords'] = new Float32Array([newpos.x, newpos.y]); }); } Thank you, I already knew that. To my knowelage this also applies to arrays, ex. struct SomeInfo { vec4 color; }; uniform SomeInfo c[2]; to access 1st color the correct string for position getter would be "c[0].color"
  25. 1 point
    Exca

    Line of sight triangles in v5

    The method was based on this: https://github.com/mattdesl/lwjgl-basics/wiki/2D-Pixel-Perfect-Shadows
  26. 1 point
    Exca

    Line of sight triangles in v5

    I have done similar thingie with v3, though it was heavily optimized with assumptions about what kind of lights there were, what was the world size etc. What I did in short was this: - Build a texture (2048x2048) with all the shadow casters in it. - For each light, do a raycast to 512 directions (on gpu) and build a 1x512 texture with each pixel value telling how long the light can go from that point. - Render lights using that texture (calculate angle, check if distance is over the value in texture, if it is, ignore pixel, otherwise draw light with light settings). - Draw lights into a single texture and blend that with diffusetexture. - Split the lights into static & dynamic groups for performance. That solution also included normal mapping but in this case that's not needed. Maximum world size was 2048x2048 in this case, as everything had to fit inside a single texture.
  27. 1 point
    Dude, you're amazing. You always reply right away! > Need ES6 or something like that in the libs., I dont remember exactly. I trid that, no luck > Workaround: If you dont use webpack and other things you can just copy that file to your libRoot or somewhere in your project and remove those lines. Unfortunatelly I do use webpack > That's how pixi-spine works: https://github.com/pixijs/pixi-spine/blob/master/tsconfig.json#L13 I tried the different parameters in that tsconfig.json without sucess. So I'm likely missing something. Anyway, I solved it by removing those 3 lines out of pixi.js.d.ts Now I'll spend some time porting the existing code Very excited to finally try 5.0! Cheers
  28. 1 point
    RagingPixel

    Google Web Toolkit (GWT)

    Google Web Toolkit (GWT) is awesome in my opinion. I made simple mini game in Java and it works perfect in browser. Im looking into LibGdx project too - it uses GWT for compiling game into HTML5. https://libgdx.badlogicgames.com/
  29. 1 point
    mazoku

    Blocks Puzzle

    Simple classic Blocks Puzzle game where you make rows and columns of blocks. Play Blocks Puzzle Get Blocks Puzzle for Android
  30. 1 point
    You can use safari remote debugging also https://www.lifewire.com/activate-the-debug-console-in-safari-445798 Though that only works on macos.
  31. 1 point
    DrSnuggles

    JavaScript nested array stumper

    yes, init of the new object in the array is important. It's important because later you want to access gear.something and gear has not yet been created. That's where the error is coming from. JS can not DIM an array from begin like it is possible in other languages. You can DIM with var myArray = new Array(20) but this just creates empty entries and not objects, so you cant set the property "cost". Have look here: https://www.w3schools.com/js/js_arrays.asp var myArray = []; Dim(myArray, 20); // maybe you like this more than the for i=0;i<myArray.length;i++ loop for (key in myArray) { myArray[key].cost = 20; } // another way to fill it myArray.forEach(setDmg); console.log(myArray); // shows filled array function Dim(arr, size) { for (let i = 0; i < size; i++) { myArray.push({}); } } function setDmg(entry) { entry.dmg = 10; } Working with the good old arrays is absolute no problem and a clean way to do that. Try to make it easy for you to understand that code again if you dig it out in some years.
  32. 1 point
    Hey @vsudakov Take a look at https://jsbin.com/nikikirova/edit?js,output Best regards,
  33. 1 point
    JECKL

    PIXI Interaction Touch

    @themoonratPerfect!!! Very Very Thank you! I solved the problem!! @ivan.popelyshev Thank you so much for trying to help me!
  34. 1 point
    It should work. Don't forget to clear() graphics. Also, it depends on pixijs version, some of v5 versions were unstable, I recommend to use latest dev http://pixijs.download/dev/pixi.js One of ideas is sprite with full circle and mask that you modify each frame. If mask is somehow leaking please report it to us, it should work.
  35. 1 point
    bubamara

    Low fps particles

    Don't know why Firefox is so slow. But you could reduce number of particles shown/computed. Draw that texture to off-screen canvas, read pixels, check whether yours 2x2 particle is pure black and don't create it in that case
  36. 1 point
    Some time ago there was a bug report of a problem with rendering SVGs in iOS and MacOS, at least older ones. You can see it there: https://github.com/pixijs/pixi.js/issues/3433, but here is a short description as far as I've digged it. On some old Apple devices, iPad 4 / iOS 10 for me, if you load a number of SVGs, make sprites of them and place said sprites on stage, some of these sprites will 'leak' on one another. For example, if you load a green rectangle SVG and then blue circle SVG, sprite made from second one will contain expected circle drawn above unexpected rectangle. This is an old bug still found in v5.0.0 rc-3. Sadly, I found no solution to it. There are cases when it shows and cases when it doesn't, but no way to be sure. Since it is crusial for the project I'm working on, I've made a short test code to check if the current device have this bug, so I can switch to PNGs. In case anyone needs this, you can see it below. It is written for Pixi v5.0.0 rc-3 https://codepen.io/takopus/pen/EJpjXL The idea is simple: I load assets - rectangle and circle - make sprites, place them on stage and render it (you have to do it to catch the bug). Then I extract circle into Uint8ClampedArray of pixels and get alpha value of some corner pixel. If there is no bug, it will be 0 (since there is no pixel there). If the bug is here, it will be 255 cause of rectangle rendered below the circle. Hope this will help someone until this bug gets fixed!
  37. 1 point
    Wolfsbane

    Link It Up!

    It's a nice little game! Don't think I've seen design quite like this before, so kudos for getting your own twist in a platform puzzler. The visuals are really nice. Got through till level 14. If you want feedback/critique, I'd just say I'm not sure about the controls. Mouse and then keys, and then space. I've got big hands, and game a little bit but my having to use arrows + space with one hand, and then mouse is a bit awkward. Generally this type of game you might aim for a casual audience(or even think about making it work on a smart phone). The simpler the control schema, the better.
  38. 1 point
    trevordev

    AmmoJS support

    Hey, AmmoJS physics plugin has been added to Babylon preview. It should work well with composite meshes which we've had trouble with in the past with other engines. Let me know if you find any issues or have any feedback. Note: Support for motors, soft bodies, other ammo specific features are not yet supported so yell if you need anything specific for your project. vid.mp4 Examples: Basic impostors: https://playground.babylonjs.com/#7149G4#31 Loading mesh and colliders from file: https://playground.babylonjs.com/#66PS52 Loading and adding colliders manually in Babylon: https://playground.babylonjs.com/#FD65RR Loading and adding collider with joints and pointer interactions: https://playground.babylonjs.com/#DGEP8N WebVR grabbing and throwing: https://playground.babylonjs.com/#ZNX043#1 Docs: https://doc.babylonjs.com/how_to/using_the_physics_engine
  39. 1 point
    jerome

    AmmoJS support

    BRAVO !
  40. 1 point
    OK, so i was wrong about place, its here: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/canvas/utils/CanvasMaskManager.js#L76 https://www.pixiplayground.com/#/edit/wJM_TMiQGVGBuLCdXmKQ4 I made a patch in the end of that fiddle. That patch works only if you specify holes in different direction than the shape. Pixi is not an engine, its open-source lib that can be a part of your engine, and whoever uses it also patches whatever he needs and submits PR. There's no guarantee that certain bug will be fixed, it all depends on the mood of core team and contributors. Holes were added only a year ago, because they weren't available in WebGL version and we cant add canvas-only features. They are passed to "earcut" triangulator lib. When it was done, those changes didnt affect CanvasMaskMakager.
  41. 1 point
    Hey Guys! Yesterday I released a free PICO-8 tileset, free for everyone to use, so grab it! https://s4m-ur4i.itch.io/pico-8-pixelart-free-tiles If you like it, check out my other projects, I just released a big Metroidvania / roguelike / platformer Tileset: https://s4m-ur4i.itch.io/2d-metroidvania-tileset-16x16 Everything is low cost because of Indies Check out everything: https://s4m-ur4i.itch.io
  42. 1 point
    SinhNQ

    Combine Babylon.js with Pixi.js

    Hello, * Introducing a bit of pixi.js: pixi.js has full webgl support, a best framework for 2D game with rendering very fast. Would be great if you want make UI game with pixi.js and combine with babylon.js. (Will I get paid for advertising? NO..🤣) Demo babylon.js + pixi.js : https://jsfiddle.net/y5q7Lb1v/21/ This is a perfect duo for your web game world, which you can create high quality games. 😁 Moreover, you can also use GSAP for creating high-performance animations. Demo babylon.js + pixi.js + GSAP lib: https://jsfiddle.net/y5q7Lb1v/28/
  43. 1 point
    The debug.cameraInfo line of code is from Phaser 2. It doesn’t do anything in v3 (I’m surprised it didn’t throw an error to be honest!)
  44. 1 point
    An update here if anybody else is looking for guidance on building menus of the style above, here's what I did to make mine. Hope this helps. This is how it looks from the code below, more or less; With pages: https://imgur.com/TlpNWcJ Here is the relevant code, it's a lot, but I hope that whatever you might need is given somewhere as an example here: function preload () { //bgs this.load.image('bg', 'assets/bg.png'); //bodies this.load.spritesheet('catbody', 'assets/catbody.png', { frameWidth: 297, frameHeight: 397 }); //eye sprites this.load.spritesheet('cateyes', 'assets/catpupils.png', { frameWidth: 297, frameHeight: 397}); this.load.spritesheet('catface', 'assets/catface.png', { frameWidth: 297, frameHeight: 397}); this.load.spritesheet('catfacegoth', 'assets/catfacegoth.png', { frameWidth: 297, frameHeight: 397}); this.load.spritesheet('catfaceshifty', 'assets/catfaceshifty.png', { frameWidth: 297, frameHeight: 397}); //arrows this.load.image('leftarrow','assets/arrowleft.png'); this.load.image('rightarrow', 'assets/arrowright.png'); //tiles this.load.image('tile', 'assets/tile.png'); this.load.image('smalltile', 'assets/tilesmall.png'); //text menu this.load.image('bodytext', 'assets/textbody.png'); this.load.image('eyestext', 'assets/texteyes.png'); this.load.image('toptxt', 'assets/texttop.png'); this.load.image('bottomtxt', 'assets/textbottom.png'); this.load.image('accessoriestxt', 'assets/textaccessories.png'); this.load.image('bgtext', 'assets/textbg.png'); } function create () { tiles = this.physics.add.staticGroup(); arrows = this.physics.add.staticGroup(); smalltiles = this.physics.add.staticGroup(); text = this.physics.add.staticGroup(); this.add.image(500,300,'bg'); //text menu options bodytxt = text.create(500, 170, 'bodytext').setInteractive(); eyestxt = text.create(500, 220, 'eyestext').setInteractive(); toptxt = text.create(530, 270, 'toptxt').setInteractive(); bottomtxt = text.create(530, 320, 'bottomtxt').setInteractive(); accessoriestxt = text.create(530, 370, 'accessoriestxt').setInteractive(); bgtext = text.create(530, 420, 'bgtext').setInteractive(); //arrows leftArrow = arrows.create(650,290, 'leftarrow').setInteractive(); rightArrow = arrows.create(950,290, 'rightarrow').setInteractive(); //colour tile objects red = smalltiles.create(695, 470, 'smalltile').setTint(0x85251B).setInteractive(); orange = smalltiles.create(725, 470, 'smalltile').setTint(0x874E0F).setInteractive(); yellow = smalltiles.create(755, 470, 'smalltile').setTint(0xB2B037).setInteractive(); green = smalltiles.create(785, 470, 'smalltile').setTint(0x4C7940).setInteractive(); lightblue = smalltiles.create(815, 470, 'smalltile').setTint(0x7F9293).setInteractive(); darkblue = smalltiles.create(845, 470, 'smalltile').setTint(0x383A4B).setInteractive(); purple = smalltiles.create(875, 470, 'smalltile').setTint(0x6F5F78).setInteractive(); pink = smalltiles.create(905, 470, 'smalltile').setTint(0xD6A16B).setInteractive(); //player layers player = this.physics.add.sprite(200, 370, 'catbody').setInteractive(); playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive(); playerface = this.physics.add.sprite(260,350,facekey).setInteractive(); //playershirt; //playerpants; //playershoes; //playeraccessories; //playerbg; //MENU ICONS //eyes normaleyeicon = this.add.image(735,185,'catface').setScale(0.35).setInteractive(); gotheyeicon = this.add.image(812,185, 'catfacegoth').setScale(0.35).setInteractive(); shifteyeicon = this.add.image(893,185, 'catfaceshifty').setScale(0.35).setInteractive(); //MOUSE INTERACTIONS //click colour tiles red.on('pointerdown', function (pointer, red) { colour = 0x85251B; }); orange.on('pointerdown', function (pointer, orange) { colour = 0x874E0F; }); yellow.on('pointerdown', function (pointer, yellow){ colour = 0xB2B037; }); green.on('pointerdown', function(pointer, green){ colour = 0x4C7940; }); lightblue.on('pointerdown', function(pointer, lightblue){ colour = 0x7F9293; }); darkblue.on('pointerdown', function(pointer, darkblue){ colour = 0x383A4B; }); purple.on('pointerdown', function(pointer, purple){ colour = 0x6F5F78; }); pink.on('pointerdown', function(pointer, pink){ colour = 0xD6A16B; }); //click menu text bodytxt.on('pointerdown', function (pointer, bodytxt) { selection = 1; page =0; }); eyestxt.on('pointerdown', function (pointer, eyestxt) { selection = 2; page = 0; playereyes }); toptxt.on('pointerdown', function (pointer, toptxt) { selection = 3; page = 0; }); bottomtxt.on('pointerdown', function (pointer, bottomtxt) { selection = 4; page = 0; }); accessoriestxt.on('pointerdown', function (pointer, accessoriestxt) { selection = 5; page = 0; }); bgtext.on('pointerdown', function (pointer, bgtext) { selection = 6; page = 0;}); //click item icons normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){ facekey = 'faceblink'; playereyes.anims.stop(); playerface.anims.stop(); }); gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){ facekey = 'gothblink'; playereyes.anims.stop(); playerface.anims.stop(); }); shifteyeicon.on('pointerdown', function (pointer, shifteyeicon){ facekey = 'shiftyblink'; playereyes.anims.stop(); playerface.anims.stop(); }); //click arrows leftArrow.on('pointerdown', function(pointer, leftArrow){ page -= 1; }); rightArrow.on('pointerdown', function(pointer, rightArrow){ page += 1; }); //ANIMATIONS var keys = ['cat', 'pupil', 'faceblink', 'gothblink', 'shiftyblink']; var spritesheets = ['catbody','cateyes', 'catface', 'catfacegoth', 'catfaceshifty']; for(var i = 0; i < keys.length; i++){ this.anims.create({ key: keys[i], frames: this.anims.generateFrameNumbers(spritesheets[i], { start: 0, end: 13 }), frameRate: 10, repeat: -1 }); } } //end create //custom functions //helper function, sets individual icon to active/visible to inactive/invisible function setActivity(icon, bool){ icon.input.enabled = bool; icon.setVisible(bool); } //Sets each item icon in an array to active/visible or inactive/invisible function setAllActivity(array, bool){ for(var i = 0; i < array.length; i++){ setActivity(array[i], bool); } } //Displays the desired item menu icons as listed in the current page function setJustOne(all, desired, page){ //i = icon category index for(var i = 0; i < all.length; i++){ //j = array for each page of icons for(var j = 0; j < all[i].length; j++){ if(all[i] != desired || j != page){ setAllActivity(all[i][j], false); } if(all[i] == desired && j == page){ setAllActivity(all[i][j], true); } } } } //tints text icon and clears tint from all other text icons function selected(icon, array){ for(var i = 0; i < array.length; i++){ if(array[i] != icon){ array[i].clearTint() } if(array[i] == icon){ array[i].setTint(0xff0000); } } } //plays the animation key given to the player body function playBody(bodyKey){ player.anims.play(bodyKey, true); } //plays the animation key given to the player's face function playFace(facekey){ playerface.anims.play(facekey, true); playereyes.anims.play('pupil', true); } //helper function for menuOptions(). Ensures page index does not go out of bounds. function pageCtrl(page, max){ if(page >= max){ this.page = max; } if (page <= 0){ this.page = 0; } } //When user clicks any text section it triggers displaying of relevant item icons. function menuOptions(selection){ //icon arrays //2D, bodyIcons[0] = first page array, bodyIcons[0][0] = first item on first page var bodyIcons = [ [], [], [] ]; var eyeIcons = [[normaleyeicon, gotheyeicon, shifteyeicon], [], [] ]; var topIcons = [ [], [], [] ]; var bottomIcons = [ [], [], []]; var accessoriesIcons= [ [], [], []]; var bgIcons= [ [], [], [] ]; //3D array //allIcons[0] = bodyIcons, allIcons[0][0] = First page, allIcons [0][0][0] = first elem in first page var allIcons = [bodyIcons, eyeIcons, topIcons, bottomIcons, accessoriesIcons, bgIcons]; //just an array of interactive text objects. var textIcons = [bodytxt, eyestxt, toptxt, bottomtxt, accessoriestxt, bgtext]; //body selection if(selection == 1){ currentobj = player; selected(bodytxt, textIcons); pageCtrl(page, bodyIcons.length); console.log('selection 1 page:' + page); setJustOne(allIcons, bodyIcons, page); } //eyes selection if(selection == 2){ currentobj = playereyes; selected(eyestxt, textIcons); pageCtrl(page, eyeIcons.length); console.log('selection 2 page:' + page); setJustOne(allIcons, eyeIcons, page); } //top section if(selection == 3){ //currentobj = top; selected(toptxt, textIcons); pageCtrl(page, topIcons.length); console.log('selection 3 page:' + page); setJustOne(allIcons, topIcons, page); } //bottom section if(selection == 4){ //currentobj = bottom; selected(bottomtxt, textIcons); pageCtrl(page, bottomIcons.length); console.log('selection 4 page:' + page); setJustOne(allIcons, bottomIcons, page); } //accessories section if(selection == 5){ //currentobj = accessory; selected(accessoriestxt, textIcons); pageCtrl(page, accessoriesIcons.length); console.log('selection 5 page:' + page); setJustOne(allIcons, accessoriesIcons, page); } //bg section if(selection == 6){ //currentobj = bg; selected(bgtext, textIcons); pageCtrl(page, bgIcons.length); console.log('selection 6 page:' + page); setJustOne(allIcons, bgIcons, page); } } var colour = 0x85251B; var selection = 1; var currentobj; facekey = 'shiftyblink'; bodyKey = 'cat' var page = 0; //Game Main function update () { //sprite layers playBody(bodyKey); //body playFace(facekey); //face/ eyes menuOptions(selection); //select section currentobj.setTint(colour); //tint section }
  45. 1 point
    I have updated the game to 0.4.5. There is a new mission with a new playable fighter, and I've done lots of performance optimizations on the engine (preparing for an upcoming version playable on mobile phones)
  46. 1 point
    Just to say that destroy is now working in Phaser 3 official release as follows: this.phaserGame.destroy(true); Thanks very much! This is going to be awesome. Teaching my kids phaser at the moment too!
  47. 1 point
    Okay, I figured it out. new Phaser.Game(((window.innerWidth * window.devicePixelRatio) / (window.innerHeight * window.devicePixelRatio)) * 240, 240, Phaser.AUTO) this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; backgroundLayer.fixedToCamera = false; backgroundLayer.scrollFactorX = 0; backgroundLayer.scrollFactorY = 0; this.collisionLayer.fixedToCamera = false; this.collisionLayer.scrollFactorX = 0; this.collisionLayer.scrollFactorY = 0; this.mapOffsetX = (this.camera.width - this.map.widthInPixels) / 2; backgroundLayer.position.set(this.mapOffsetX, 0); this.collisionLayer.position.set(this.mapOffsetX, 0); I'm using Typescript so I'm just including the important snippets from various files. Create the height of the game to be the size of your tilemap. In my case I'm using 240 currently and then calculate the width based on the height as you can see above. Scale the game using SHOW_ALL so it will take full vertical space and not stretch. Then for each layer you create you must set the fixedToCamera and scrollFactor to be 0. Without these it won't work. I don't know why and would love an explanation as to why. Then finally calculate the X offset needed to center everything horizontally and apply it to the tilemap layers. Everything else you place in your game will need to be offset as well.
  48. 1 point
    mattstyles

    TypeScript vs JavaScript?

    Type correctness is a fallacy, and can not be implemented into a dynamic language without injecting into the runtime, which typescript does not do (although alternatives like flowcheck and some other libs for implementing flow do, it still does not make type checking a silver bullet). Much more info in this article. Having worked with it for an Angular 2 build (which was a horrific experience coincidentally) I can say that using TS creates so many headaches. Importing simple modules becomes an issue and often breaks your build, do you really want to spend half and hour importing a module you want?? Totally bonkers, it should just be a few keystrokes, a bit of network, and boom, get coding. I continually found inaccuracies in documentation as implementations changed which was a pain. I was worried about how TS performs some of its transforms without producing a horrible tangle of inefficient code, turns out that does happen, although a lot of people do work on making these transforms as efficient as possible, its just that some patterns are either not needed or don't work well in a dynamic language. There is also a barrier for every other JS dev, you force them to use TS and not everyone will want to do that (this depends on your project though). The additional killer is that TS is not spec, whilst a lot of what it started considered spec, and certainly its implementation helped the spec to evolve, its a worry. Every time you move away from spec (like Webpack does with modules) you are at risk of moving further away from your chosen language, which is crazy, if your language doesn't support the stuff you want to do then choose another, don't mutate your language beyond recognition, as a web dev you are in a position of luxury here because if the web is your chosen platform then its JS so everything has a pipeline to output JS these days. Typing is useful for large teams as it can make the code easier to understand, but I could dispute this by saying that it introduces a load of clutter and types can be gleaned by a bit of inline documentation, although you wouldn't get static checking (but, see the earlier link, static checking won't secure your program, to the point where it could be pointless). On that, the number of times in TS code I've seen the type specified as <any> because devs haven't put enough effort in (or ran out of time, or, sometimes, been forced in to it because typing is square peg round hole for JS) is shocking and clearly unhelpful. Having said all this, it is gaining popularity so its certainly worth checking out, particularly if you're fond of strongly typed languages (just remember JS is not, and without killing your performance nothing will make it so). Nothing can get you away from this, despite the newer ES2015 class syntax, JS is NOT a classical language. The class syntax is simply sugar around creating a class-like abstraction in a prototypal world. There is nothing superior about OOP or classes, it is simply a different style/flavour/design choice. The reason I bring it up is that if you keep up with a mindset that one thing is superior over another you will overlook anything you deem inferior which means you won't learn its pros/cons and you'll get stuck in your superior world even when you start working on something where that does not make sense. Feel free to ignore, but I'd be wary of pigeon-holing yourself or your tech choices. Learn it all and learn when each different thing makes sense and when it does not. Particularly in the fast-paced JS world, something only remains superior for 6 months, so unless you want to become a dinosaur, keep moving!
  49. 1 point
    luckylooke

    Rotate Camera

    Live DEMO p2 used http://jsfiddle.net/luckylooke/uL37am1h/6/