Leaderboard


Popular Content

Showing content with the highest reputation since 03/10/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. 3 points
    No bans are happening here (yet). @5neia_opo2@google-mail.ooo, try to understand the frustration people are experiencing. A new user came to the forum and in nearly every post they made trashed the project they were asking about. A lot of people here put in a lot of time and effort to not only to develop the project, but answer questions here as well. I was definitely frustrated reading your responses as someone who has put 6+ years of their life into this project. @botmaster did a poor job of handling that situation, but has apologized and I'm sure will do better in the future, as will you as well. Let's all be adults about this, acknowledge we did something wrong, and move on. @5neia_opo2@google-mail.ooo you are free to ask any question you need help with, but I definitely recommend reading through some tutorials, the examples, and checking the API docs before asking questions. It will often lead to you finding the answer yourself, and there will be less fatigue for the people answering here on the forum. I'd also recommend you approach things you don't understand, or decisions you disagree with, with a more open mind. Try to learn and grow the new library, not all libraries are alike and different problem spaces call for different solutions. Having a bad attitude is a good way to earn ill-will in the community and you may no longer get the help you expect if you are ungracious about it. When you find inconsistencies, or things you think should work differently, then change it! Pixi.js is an open source library built by the community. Everyone gets a chance to make the library better by contributing to it. The best way to get problems you have fixed, are to fix them yourself.
  3. 3 points
    I had some similar problems with this yesterday so I wrote up the workflow I found to work step by step. Hope this helps anyone else who finds this thread in the future. https://www.adammarcwilliams.co.uk/creating-bitmap-text-pixi/
  4. 2 points
    themoonrat

    PIXI Interaction Touch

    You rang, m'lord? @JECKL try looking at `renderer.plugins.interaction.eventData.data.global` instead
  5. 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!
  6. 2 points
    TheBoneJarmer

    The future of web games

    Oh yeah, I remember reading that discussion. Well, to give my two cents. I think that discussion was pointless to begin with. I understand the question since there are not many popular hmtl5 games, but I would not call it dead, far from it. Web is a platform like PC, console and mobile. Most game devs use an engine like Unity3D or Unreal and export their game to platforms they can support. But games get exported more often to platforms where their game can run native because most games are too big to run smoothly in the browser. I mean, just look around and see how many devs actually created a 3D game in html5. Barely. And if someone did, is it probably low-poly. But that being said, that would be the only con I can think of. The biggest pro, and the reason I decided to go for HTML5 game dev, and not Unity or Unreal or any other engine, is because it is soooo damn easy compared to writing your game in C# or C++. I mean, all you need is a good IDE for web dev and your browser. And players don't even have to download your game. Heck, if you want to, you can put your game in a cordova container and export it to Android or iOS as if it is nothing. And just look at all the available resources. There are engines like Game Maker or Construct that allow you to export your game easily, as well as lots and lots of frameworks like Phaser, Pixi, MelonJS and so on. And also, since your game is actually a webpage, it can be integrated easily in many front-end technologies like Angular, ASP.Net, PHP and even NodeJS with Electron. That is also a very powerful benefit. Not to mention webhosting. I mean, a basic webhosting service is enough to host your game on since html5 games do not tend to be gigabytes big. Give it time. I admit I cannot think of a popular html5 game, but I am sure other forum members can fill me in on that one. I do see some gems once in a while. But those are often not only for web, but native too. They just have a web variant. You wont find yourself a whole RPG, but smaller games. But I like those, I am often very tired after work and to be able to play some small games while being half braindead is awesome, and very relaxing.
  7. 2 points
    I am making UI Components Framework for Phaser 3, that is driven by JSFL-generated jsons and atlases. It means that you can build your UI in Abode Animate, export it with given script, and forget about manual code positioning and building stuff! Please, try it out. https://xense.github.io/phaser-ui-comps-docs/tutorial-showcase.html Docs, examples, tutorials: https://xense.github.io/phaser-ui-comps-docs There are two basic things in this framework. First is ComponentClip, which is a view instance, it is recursively self-build by provided json and atlases. Second is UIComponentPrototype, which is clip controller. It can be easily extended to create any components, windows or whatever you need. Essential meaninig of it is that it doesn't need a clip to exist always. For example, you can change states of a root clip, and child clip can get new clip instances, ore lose them, and nothing bad happen. Some base components are already included UIButton has 4 states, "up", "over", "down", "disable" UIButtonSelect same as button, but behaves like checkbox, has 8 states, by adding "_select" suffix to UIButton's states when selected. UIButtonRadio Selectable buttons, that can be grouped to select only one of them. UIButtonDraggable same as UIButton, but also emits drag event, drag bounds can be self externally. UIScrollBar vertical or horisontal bar with draggable thumb and prev/next buttons. UIProgressBar Setup only start and end elements positions, scale, rotation or alpha, and this component will interpolate them according to provided progress value. UIScrollPanel Helper for scrolling any element with UIScrollBar. UIContainer Base container component to add other dynamically created components inside. Can be easily extended to create any types of lists, for example. I'm still working on new components and extending existing functionality. Tell me, would you use it, what other components you may need, and whatever you think about it. Any feedback is appreciated! Also I'll be thankful for any collaboration. Available at GitHub and npm
  8. 2 points
    b10b

    ctx.clearRect() not working with Image.

    @James432213 hi, many issues here, all solvable. 1) The function named "canvas" rename this and avoid some confusion, call it "init" or similar 2) doKeyDown function has parameter "e" but references "event" in the switch - be consistent. 3) the functions doKeyDown, updateCanvas, drawPlayer are scoped "above" the "init" function, so they can have no easy reference to the "canvas" variable defined within "init". Notice also the name collision of "canvas" if we ignore step 1. Easy fix is to move these function declarations inside the "init" function. 4) There's nothing wrong with ctx.clearRect Some basics in how to debug your code will be beneficial, in particular the developer console (F12) is great, and using "console.log" can send helpful messages there from your code. Use that as a start towards watching the flow of your code when it runs, and where things are not actually working as might be expected on a first draft of code. This will lead to more advanced debugging techniques and more elaborate (and working) code.
  9. 2 points
    Do you draw something else than the video to canvas? If something taints a canvas then it stays tainted no matter what is rendered in the future. Or it might be due to stream becoming unavailable at some point for short duration and that could cause tainting (though the bug report I found on this should be already resolved, it was 5 years ago). Pretty sure it's some kind of edge case in security constraints which causes canvas to become tainted (by something), which causes security error when pixels are read from it.
  10. 2 points
    -AAG-

    I hate designing levels!

    There! I said it! 😡
  11. 2 points
    mattstyles

    I hate designing levels!

    Procedural generation can be a load of fun, but its a butt-ton of work to get working well. You could even use a genetic algorithm (GA) to create levels, have an automated actor play them, test the 'success' of the actor using fitness functions and then loop that process until you get levels (again, based on a heuristic function) that are fun to play. The up-shoot is that you can, potentially, create a near infinite number of levels like this. Or at least generate a manageable amount (say, 30) and manually curate them. Depending on how good your heuristics are you can create levels that are harder or easier for humans to play. It's a ton of work though. So depends on your mindset. Some crazy people find that a wonderful coding challenge.
  12. 2 points
    there is no public property available but you could use the following private property timer._pause working example: var timer = game.Timer.add(1000, function() { sprite.remove(); }); if(timer._pause){ console.log("paused") } else{ console.log("Not paused") }
  13. 2 points
    @dataj, I am pretty sure you can find all the information in the documentation. Maybe you forgot to associate your game to your business? https://www.facebook.com/help/publisher/709041312624617/
  14. 2 points
    ivan.popelyshev

    Fading trail

    Here's the second one, super-v5 stuff: https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js Yes, you can use it as an alphamask. Why do you need though? Your trail is simple rectangle, right? In fact, that's one of common mask use-cases in Flash: alpha gradients. Its shame we cant replicate all that Flash stuff even after several years of coding.
  15. 2 points
    ivan.popelyshev

    Fading trail

    First demo will be here in 5 minutes or so : https://pixijs.io/examples/#/textures/gradient-basic.js It took me only one cup of soothing tea.
  16. 2 points
    jonforum

    Fading trail

    What about create you gradient in other canvas. https://www.w3schools.com/graphics/canvas_gradients.asp var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); and than, create `generate` a texture from this canvas context ? Am sure it can work ... but at the expense of performance. I do not remember which one, but there is a rpgmaker plugin that used this process with pixijs.
  17. 2 points
    I've got a situation my physics simulation is running at high framerate (60fps), but some devices my app runs on cannot run the graphics (PIXI) at 60fps without causing the physics simulation to stutter and jump, causing undesired artifacts. So, in pursuit of performance, I shoved the physics simulator (in my case, matter.js) into a web worker, but then still found that some devices couldn't handle updates at 60fps in the main thread. So I started setting an interval to apply updates from the simulation to PIXI at a fixed rate - 30 fps to start. However, sometimes even on some devices that was unsustainable. So, the question came down to - what FPS *should* my app run at? And when I say "run", I'm talking about changing the position of PIXI objects base on updates from the physics simulation, not about changing the speed of the PIXI's ticker. Since the speed at which I could apply updates from the physics simulation and still achieve sustainable render speeds without lagging varied from device to device, I decided the best way to decide on the FPS to run at would be ... let the app itself decide at run time. So instead of coding a fixed FPS, or giving the user a slider to adjust, I let my app measure and adjust it's FPS based on what it measures as sustainable while it's running. Enter my solution for my app, FpsAutoTuner: https://gist.github.com/josiahbryan/c4716f7c9f051d7c084b1536bc8240a0 - contributed here to the community in case it may help someone else solve a similar problem. It's framework-agnostic, no external dependencies, written as an ES6 class, but could easily be rewritten as a ES5 if you wanted. FpsAutoTuner works by measuring the FPS (which you tell it by calling `countFrame()`) and then every so often (at `tuningInteval`ms), it compares that measured FPS to the `fpsTarget`. When the measured FPS goes below `fpsTarget` less `tuningMargin`, the `fpsTarget` will be decreased by `tuningRate` and the `callback` will be execute with the new `fpsTarget`. Likewise, when the measured FPS exceeds `fpsTarget` less `tuningMargin`, then `fpsTarget` will be increased by `tuningRate` and `callback` will be called with the new target. Example usage: // Somewhere at the top of your file import { FpsAutoTuner } from './FpsAutoTuner'; // Then later in your code, probably in your constructor of your game object this.fpsAutoTuner = new FpsAutoTuner({ fsTarget: 30 callback: fps => this.setFpsTarget(fps) }); This assumes that you have a function called `setFpsTarget()` on your class, probably that does something like this: // This is just an example method, on your own class... setFpsTarget(fps) { clearInterval(this._fpsTid); this._fpsTid = setInterval(this._render, 1000 / fps); } Then later in the rendering portion of your code: // inside the render loop of your code, call: this.fpsAutoTuner.countFrame(); That's it! Your app will now automatically adjust it's FPS as needed when it detects lower/higher frame rates available. (FpsAutoTuner automatically starts it's auto-tuning timer in it's constructor.) There are plenty of options you can pass to FpsAutoTuner to tweak it - they are all documented at the top of the gist. Specifically of interest, you can set `tuningInterval` (default 5000ms) to change how often it measures/changes the FPS. This all has just been a humble attempt to give back to the community. Use and enjoy. Contributions/changes/suggestions to the gist are welcome! Download FpsAutoTuner from GitHub here.
  18. 2 points
    I could not choose what to study for coding games and I decided to study these tools: Pure WebGL 1.0 and pure WebGL 2.0. I like to study linear math, trigonometry, shader math. I like to study this book which uses pure WebGL and glMatrix: Build your own 2D Game Engine and Create Great Web Games I want to understand how game frameworks works under hood, I mean: Pixi.js, Phaser.js, Three.js, Babylon.js and so on. I like to write very simple clone games like: Snake, Pong, Tetris and so on without game frameworks and game engines. I can use C++ books about OpenGL to study WebGL because WebGL 1.0 is based on OpenGL ES 2.0 (WebGL 2.0 on OpenGL ES 3.0). There are a lot of books and examples in C++ and GLSL that I can translate to WebGL. I can use ThinMatrix video tutorial to study OpenGL using Java and translate his examples to WebGL. I study C# for Unity Game Engine and I write my own simple game engine in C# and OpenGL 3.1 (OpenTK) by rewriting example from this books from deprecated/legacy OpenGL to modern OpenGL: C# Game Programming: For Serious Game Creation This book is a great. It study how to write a good modular architecture and how to develop software using TDD (Test-Driven Development). I like TDD and BDD (Behaviour-Driven Development). I am a fan of these methodologies of software development. I want to rewrite the code from this book to TypeScript/WebGL because TypeScript is very similar to C#. I liked compiled languages like C# and Java. But I study JavaScript 5 (2009) because it is very popular and I will be able to find removed jobs like freelance in the future when I will be a skilled computer graphics and game programmer. Pixi.js and Phaser.js for 2D games. It is very popular frameworks. A lot of works was made. You can write your own shaders in GLSL for these frameworks. Three.js and Babylon.js for 3D games in interactive 3D applications. These are 3D libraries based on WebGL and Canvas API like another popular graphics libraries. You can write shaders for this graphics libraries in GLSL too. Unity Game Engine for 2D and 3D games. I can write WebGL games for Desktop and I can build them for Android, iOS, Desktop (Mac, Window, Linux) to native applications and these native applications will not have browser restrictions. I can write shaders in HLSL and this shader language in very similar to GLSL. I can connect my WebGL, desktop and mobile clients to Node.js server that your Socket.io or WebSockets. For WebGL version I can use pure WebGL frameworks because Unity WebGL build does not work on mobile devices P.S. Sorry for my English. I study it but it is very hard. I did not use Translate Google for writing this message, I wrote this myself.
  19. 1 point
    If you use projection for any kind of... projections , not just for ISO stuff, then I doubt it will work with canvas. otherwise just make "renderer.plugins['sprite2d'] = renderer.plugins['sprite'];"
  20. 1 point
    In general: handle animations, events and cleanups separately. app.ticker.add(() => { //code that updates ALL MY ANIMATIONS MANUALLY }); app.ticker.add(() => { // suppose we want to clear someContainer let children = someContainer.children; let j = 0; for (let i=0;i<children.length;i++) { var child = children[i]; if (child.dead) { //delete it somehow, remove from list of animations and so on } else { children[j++] = i; } } children.length = j; }); Of course it has to be adapted to your style of coding and your case. I know that most people when they start something more than stupid demo stumble across the problem, and I provided PR in PixiJS that adds API but it was too experimental for our team, it was rejected. I'll try to make it again this summer. It was about `detachChild` thing that handles actual removal later, after all events.
  21. 1 point
    jonforum

    PixiJS Examples

    To be honest I really like the new organization, thank you very much for your work and all the teams your were awesome!. Difficult to target lack example without being confronted in real time, however I can bring some suggestion. In my opinion, I am not very comfortable and not yet study any of the following theoretical notions. So you can take what you want if you want add more basic fun example. Demo on batching and wrong batch hierarchy and theories. Demo on the implementation and setup of customs shadders filters can be take from https://www.shadertoy.com/ https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters https://www.pixiplayground.com/#/edit/5bqI8BM2qadFFt8eCWc7n Demo of a basic view-port and culling stage Demo for get pixel , similar in phazer https://phaser.io/examples/v2/bitmapdata/get-pixel Demo for timeLapse, slow motion the pixijs tikers Demo of pixi-sound plugin. PLUGIN-LAYERS with container mask for lights Let's be a little crazy, a little live inspector and debugger inspired by the work of bfanger https://github.com/bfanger/pixi-inspector ...
  22. 1 point
    Jeremy G

    Pixel shift on iOS only

    I am having a strange issue that only occurs on iOS devices. I am working on a slot machine, and when the reels stop I need to animate the symbols that have landed. The reel symbols are standard images, and to animate them I overlay an animated sprite on top of them (at the same position) and play their animation. This works perfectly fine on desktop and android browsers, but for some reason on iOS the animated sprite seems to be slightly shifted to the left (like 1 pixel or seemingly less...). This also occurs when I use pixi-spine animations, but only on iOS. So far I have tried setting the roundPixels propriety of the renderer to true, but it did not do anything. I have also tried setting the precision of the fragment shader to "highp" but it did not resolve the issue. The game I am working on has not yet be released so unfortunately I cannot include screenshots/code from the project to illustrate my problem. I know this leaves you guys with not much information about the problem, sorry about that. I can provide more details and clarifications if needed. But I am not doing anything out of the ordinary, I am just creating an animation, adding it as a child of my slot machine's reels and then playing it. Since this is iOS specific I was wondering if there was a setting or something that I could try to eliminate the problem. I have even remote debugged my iOs device and when I do a console log of the animated sprite position and of the image position, I get the exact same values as I do on desktop and other devices. Previously I had an issue with "animation wobble" on ios (https://github.com/pixijs/pixi.js/issues/3742) which was solved by setting the fragment shader precision to high, but this is a different issue, it's really a position shift/offset. Also I am using the latest version of pixi. Does anyone have a suggestion I could try? Thanks!
  23. 1 point
    @ivan.popelyshev, I understand that PIXI is used for rendering only. I don't expect it to have built-in physics methods. I was trying to understand if I'm doing something wrong, as I'm sure a lot of people has encountered the same problem. Thank you for your detailed explanation. I'll definitely wait for the article you've mentioned. @bubamara, thank you too for your suggestion. I'll try to work something out of both your suggestions.
  24. 1 point
    ivan.popelyshev

    Pixi js editor

    i think that editor was for phaser2, and phaser2 was built on pixi so you can do something like that , even take some code. I can ask mightyfingers if they are ready to share their old work
  25. 1 point
    Hello everyone I have a school project, which is called "corewar" to do. This is about coding a virtual machine in C, and running basic programs into its memory. I want to go further and create a "visualizator", which allow anyone to see what's inside the memory during each cpu cyle. Well, might sound very abstract, so here are som few pic to illustrate how it looks: A gif A video And my first implementation (see attached video) I have tried to use p5js but it's too slow. So I'm trying pixi, but I don't know how to get started, good practices, etc... I read the code reference (the doc), which is pretty handy, but it didn't give me any advises of how to structure my code, the right way to use classes (as PIXI.Graphics for example), etc... Right now, my code looks like this: function setup() { const app = new PIXI.Application({ width: CANVAS_WIDTH, height: CANVAS_HEIGHT }); console.log("Setting PIXI dimension to ", CANVAS_WIDTH, "x", CANVAS_HEIGHT); const bytes = initializeBytes(app); // An array containing all our bytes const processes = []; // An array containing all our processes document.getElementById('ram-app').appendChild(app.view); bytes.forEach(b => b.draw()); } class Byte { /** * rect: PIXI.Rectangle instance * renderer: PIXI.Graphics instance */ constructor(rect, renderer) { this.rect = rect; this.renderer = renderer; this.color = 0xFFFFFF; } draw() { const { x, y, width, height } = this.rect; this.renderer .clear() .lineStyle(1, 0x000000, 1, 0) .beginFill(this.color) .drawRoundedRect(x, y, width, height, 3) .endFill(); } } I have 4096 bytes (so 4096 instances of PIXI.Rectangle and PIXI.Graphics), and it's already really slow. I mean, I only have 20 FPS like this. I'm pretty sure I'm missing some obvious points, so any help to improve this code, and make it run @60FPS will be really apprecated Thanks a lot! Mar-25-2019 10-35-15.mp4
  26. 1 point
    ivan.popelyshev

    [PIXI] WebGL antialiasing

    Oh, that's .. a big problem. I cant even describe everything, its really huge, I can consult people all day about that and they wont understand it in the end. General solution: generate several textures, of different sizes for the circle (different RESOLUTION field maybe). Change between them based on scale. Better to generate it somewhere else than webgl. If you are using pixi-v5 and you know what webgl texImage2d and miplevel is, you can use https://pixijs.io/examples/?v=v5.0.0-rc.3#/textures/gradient-resource.js to generate circle for DIFFERENT LEVELS OF TEXTURE. Colors can be achieved with tinting the sprites, not changing the texture.
  27. 1 point
    HTML5 is establishing itself as a language for everything. Nothing to do with HTML. Now we discover an open source platform that allows you to create 2D and 3D games. It is about Turbulenz. Tubulenz is a platform for creating games based on HTML5 that works mainly with Canvas, WebGL and JavaScript, its engine is very powerful or that is what it shows when using a game or any of the tests we can do with it (try), seeing as it generates complete 3D environments, controlling everything necessary in a video game to perfection (such as cameras, lights, shadows, particle generation...) and with an impeccable performance by the leading mobile game app development company. Using an engine like this one can be very useful, since it speeds up the development process, not to mention that browser games have a certain charm, being able to be played from anywhere without major complications. Well is another example of the growing importance of HTML5. Orient our training to master HTML5 I think it's a good choice.
  28. 1 point
    In many cases you can assume the container size and just add a PIXI.Graphic to that container like so. if (clientConfig.drawChunkGrid && layer.name === 'front') { const grid = new PIXI.Graphics() const text = new PIXI.Text(`${chunkPosition.x}, ${chunkPosition.y}`, { fontFamily: 'ArcadeClassic', fontSize: '16px', fill : '#fff', align: 'center', stroke: '#000', strokeThickness: 4 }) grid.lineStyle(1, 0x000000, 0.6) grid.moveTo(0, 0) grid.drawDashLine(fs * clientConfig.chunkSize.x, 0, 8, 8) grid.moveTo(0, 0) grid.drawDashLine(0, fs * clientConfig.chunkSize.y, 8, 8) chunkContainer.addChild(grid) chunkContainer.addChild(text) } use lineTo instead of this custom drawDashLine. In this case my chunkContainers already have positions and constant dimensions.
  29. 1 point
    themoonrat

    def

    That setting adjusts the delta emitted from the ticker, not how often the ticker is emitted. console.log that delta value and you'll see a difference. If the setting is left alone, if requestAnimationFrame can emit 60 times a second, that delta will come out as `1` as it's hitting it's target.
  30. 1 point
    There are two sequential frames from animation, where dragon sprite and attached piece of UI moves from up to down. Left one is normal and right one is bit broken. Sprite itself (PIXI.extras.AnimatedSprite) and number 8 (PIXI.extras.BitmapText) looks perfectly fine through all animation, but HP bar background (PIXI.mesh.NineSlicePlane), HP bar itself (PIXI.Graphics) and number background are not hitting pixels perfectly sometimes and animation looks jaggy. PIXI.settings.SCALE_MODE is PIXI.SCALE_MODES.NEAREST. PIXI.settings.MIPMAP_TEXTURES is false. roundPixels is true. As I said, I have retina screen, so resolution is 2. I'm not sure if issue is reproduced on regular screen. I've searched through the docs but couldn't find any special settings for PIXI.mesh. I can make same UI from basic sprites of course, but NineSlicePlane is so much more convenient.
  31. 1 point
    new Update : https://www.kongregate.com/games/DragonSlayerZ0/sticky-ricky-lost-in-space
  32. 1 point
    i love the io games like this ❤️
  33. 1 point
    @dataj I don't teach HTML5. I reply relevant Instant Games related questions. Good luck with your game though
  34. 1 point
    Umz

    [Phaser 3] Maggot Diorama 2

    Work of art just like the last one. Nothing but impressed with this!
  35. 1 point
    Nagval333

    [Phaser 3] Maggot Diorama 2

    Ha, ha 🤣 I spent about half hour to beat these two little games! Rreally enjoyed.
  36. 1 point
    SarahJ

    Fading trail

    I've decided now to use @ivan.popelyshev's method, and I'll get back when I get it working. Thanks, everyone for your replies, I wouldn't have thought of this on my own!
  37. 1 point
    atan2 returns 0 for (x=1, y=0) , its RIGHT direction, that means your character with rotation=0 has to look to the right. Of course people usually make it look down, so you have to add or subtract MATH.PI/2 from atan2 result
  38. 1 point
    Hmmm, good question. Appreciate the consideration. Looks like most in that list are github projects/npm packages? I suppose I could just put this in it's own repo in GitHub with a readme and that might be more orderly for linking that using the thread. What do you think?
  39. 1 point
    Nevermind i found out my mistake new PIXI.Rectangle(x,y,minWidth, minHeight) > new PIXI.Rectangle(0,0, minWidth, minHeight ) and should change position of the sprites to sprite.position.x = x and sprite.position.y = y
  40. 1 point
    mattstyles

    2D Map Representation as 1D array

    @b10b yep, thats it exactly. I have a central 'store', which is just a big object, technically you could pass class instances (or functions) through as well but I'm not sure the exact downsides of that (easy serialisation is one, but could be worked around easily enough). Re-rendering is a side effect of changes to that central object and will only occur when changes are detected (standard React rendering, which is the same as many true FP languages). You could have both systems side-by-side and have a more manual system to 'tell' certain UI elements to that they need to re-render, I've tried that too with varying success. I think, in my case at least, I could get a lot of benefits from memoizing some transform functions as I'm effectively running the same thing several times each render tick.
  41. 1 point
    I found out a solution from this website: https://medium.com/@benjamin.black/using-blob-from-svg-text-as-image-source-2a8947af7a8e const blob = new Blob([svgObject], {type: 'image/svg+xml'}); const url = URL.createObjectURL(blob); PIXI.Texture.fromImage(url,undefined,undefined,2); Unfortunately, when I zoom in now the quality is quite low do you have any idea which may provoke that? <svg version="1.0" id="blop_1" x="0px" y="0px" width="800px" height="800px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve"> <circle cx="400" cy="400" r="400" stroke="black" stroke-width="3" fill="red" /> </svg> Thank you for your helps EDIT: FIREFOX : doesn't display EDGE: no quality loss when zoom in CHROME: quality loss when zoom in it's quite strange
  42. 1 point
    Based on ideas in this topic I've been working on my project and created two demos for PIXI v5.0.0-rc2: (will not be much different in v4) 1. framing texture + downsample, not easy to work with coordinates, no actual tiling: https://jsfiddle.net/scythian/sta0e87u/ 2. extending mesh class + downsample, won't work without power of two texture: https://jsfiddle.net/scythian/rkx0vzuf/ The question is, could the second demo be made a part of the SimpleRope as it adds about ten lines to it? If not, where should I publish a custom mesh for v5? There are no extras anymore.
  43. 1 point
    Haha I am the other way around, I have very little creative skills in terms of drawing/art and UI, but I love to code! The slot feels fantastic and very tempting to play for them sticky wild free spins! Interesting layout for a lobby, you don't see that normally but gives it a much better user experience in my opinion.
  44. 1 point
    Noel

    Messaging review with bot wehook

    Look at the contract part on this page: https://developers.internmc.facebook.com/apps/1915555908738471/instant-games/review/ You must complete it. Business verification was enforced after you made your game, that is why you could publish it.
  45. 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.
  46. 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 }
  47. 1 point
    RAF will fire as fast as it can, synced to display refresh rate. So on 60 Hz display, you get 60 Hz or less. On 144 Hz display it will run 144 Hz or less. On g-sync/freesync/hdmi 2.1 vrr, it can be anything. What needs to be understood here is that phaser doesn't provide you with proper game update loop. It gives you RAF loop (or fallbacks). It's on your to handle whatever you need, e.g. fixed timestep physics with interpolation. V3 had recently added automatic fixed timestep and manual update options to matter.js physics. I'm not sure if the automatic fixed timestep is still running off RAF (which makes the option kinda pointless), but you can use the manual option in any case. In my case, if the game is mostly async tween actions (think match 3 sliding stuff), I just use tweens and don't care about deltatime. As soon as I have any kind of physics or time based logic (even simple speed += acceleration), I switch to fixed timestep with interpolation. I did describe my approach in at least one topic here
  48. 1 point
    in mono

    Resize image = losing quality

    Try this: logo.smoothed = false; By the way, it doesn't matter which way you use to resize an image - scale changes the image's size and size changes its scale; they're internally tied to each other. DPI doesn't matter unless you print. If you're showing the image on a display, it's all pixels.
  49. 1 point
    samme

    Angle towards Velocity

    If there's been at least one update, you can use enemy.rotation = enemy.body.angle; In the latest Phaser CE you can use enemy.rotation = enemy.body.velocity.atan();
  50. 1 point
    OIMO does it like this: https://github.com/lo-th/Oimo.js/blob/gh-pages/examples/test_collision.html#L209 You can edit shape.collidesWith and shape.belongsTo in an oimo rigidbody: https://github.com/lo-th/Oimo.js/blob/gh-pages/src/shape/Shape.js#L68