Leaderboard


Popular Content

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

  1. 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.
  2. 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/
  3. 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.
  4. 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
  5. 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.
  6. 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.
  7. 2 points
    -AAG-

    I hate designing levels!

    There! I said it! 😡
  8. 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.
  9. 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") }
  10. 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/
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 2 points
    Hello! My name is Brian and I'm the Developer Community Manager with Legends of Learning. Legends of Learning is a EdGame platform looking for HTML5, Unity or Construct 2 developers to build 500 short (5-25 minute) Math games. Payout ranges from $1000 - $50000 per game depending on performance. To date, $4 Million has been paid and 1000+ games have been built. Sprint open now with slots on first come - first serve basis. Average of $4000 per game. Creative control left entirely to the developer! To learn more about the company and opportunity and to submit your information, navigate here: https://www.legendsoflearning.com/interested-game-developer/
  16. 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.
  17. 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.
  18. 1 point
    You could create a simple test case where you have a canvas, you draw the video there and then read a single pixel from it. If it gives the same error, then the video causes tainting. If not, then it's something else.
  19. 1 point
    Hello! The project is old so PIXI v.3.0.11 is used. For streaming - Flashphoner via WebRTC Steps to reproduce 1. Start video stream in html video element - stream.start(myDiv) which creates streamVideoElement in myDiv 2. When stream fires STREAM_PLAYING event the method PIXI.Texture.fromVideo(streamHtmlVideoElement) is called and the returned texture is set to the specific PIXI.Sprite instance. 3. Somewhere after this the Firefox browser receives error thrown by WebGl: Additional information The problem is happened very rerely Only Firefox Stream(video element) is not failed after the error In the PIXI source code that means: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); What we tried tried to set video.crossOrigin = "anonymos" to the video element but no success. tried to dispose video like video.src = "" and etc according some advices related to the localStorage caching I know it's not directly linked by PIXI but still I need help. And the image of the current block when exception was thrown.
  20. 1 point
    > I know it's not directly linked by PIXI but still I need help. You're very humble, I pinged people who have experience with videos in pixijs to help you
  21. 1 point
    Hi all, I'm new to Pixi.js, so excuse me, if the answer to my question is obvious. I'm building a 2d platformer where I have a PIXI.Container which contains a few sprites (let say player's arm, body, head etc.). Based on the user input I'm moving the whole container (not each sprite individually). I also have container which contains all platforms of the level (they are all of type PIXI.Spirte). I want to detect when the player's container intersects with any of the platforms and stop the container from moving forward (the usual stuff). Currently I'm using the Bump.js library (https://github.com/kittykatattack/bump). But I'm encountering few problems. First of all Bump.js doesn't work for 'container vs array with sprites' type of collision, so I've tried to detect an intersection between each player's sprite against the array with platforms. Basically I'm using the following: player.move(); // move the player's container to any direction BUMP.hit(playersArm, platformsArray, true, false, true); BUMP.hit(playersBody, platformsArray, true, false, true); BUMP.hit(playersHead, platformsArray, true, false, true); This is testing for intersection between each player's sprite and stops it from moving, if there is a collision. All this is working fine and if there is an intersection the intersecting player's sprite position will be set to a value that is not intersecting with the platforms. However all the other sprites will continue moving, as they are not yet intersecting with the platforms. Hope I expressed myself clear. Have you ever had such problem and how did you solve it? I can only think of building a custom collision detection logic which works with 'container vs array with sprites', so I don't have to care for each player's sprite individually, but work with the container. Do you know of any library that already handled such cases? Or maybe I've been wrong from the start by taking such approach (having player's container with several sprites in it)? Thank you in advance.
  22. 1 point
    -AAG-

    Is it like backstabbing my clients?

    I want to thank everyone for taking the time to leave a reply. I am taking it all in and think that I might have found a solution that solves this and my level design hate and I may even really like the game(s) that will result from that for a change. I do agree that web games in general are not great and I personally don't play a lot of them. In fact, I feel the same way about native mobile apps and have none installed in any of my devices. I do enjoy how accessible web games are and have found myself surprised by a few of them both when flash was a big deal and now with HTML5. It is this ease of use that I enjoy the most about web games. When It comes to my own games I have to go with what my clients are looking for. There was a time that my main client wanted arcade games and I made quite a few, not great at all but they got sold and spared me the level design dilemma. Then interest shifted to puzzle games so puzzle games it is and they have been selling. I have been doing this for a while and every single game on my catalog has sold multiple licenses (minus the obvious exclusives). I understand that doesn't make them good, that just means my clients liked them and thought them a good addition for their website. I'm sure they know their visitors and I have come to accept that it isn't my concern whether their players like the games or not, but the fact that they continue to buy from me tells me that my work is liked by a certain audience. At the very least I try to make my own thing instead of trying to follow trends or clone this and that because is popular unless the client specifically asks for it. I have avoided plugin to my catalog till now but if anyone wants to take a look you can go over here. Thanks again!
  23. 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
  24. 1 point
    HTML5 has become a trending technology in the current scenario of game development. Its dynamic update features and cross platform & cross browser compatibility gives lightyears of advantage as compared to its counterpart. This blog mainly talk about the benefits of HTML5 game development and why you need to hire HTML5 game developer. Read more: https://www.redappletech.com/how-to-improve-the-gaming-world-using-html5/
  25. 1 point
    enpu

    Definition animations with sprite names.

    Ah i see. I have added now support for frame names, instead of frame indexes in the array, you can now use frame names (or even mix indexes and names in same array): game.module( 'game.main' ) .body(function() { game.addAsset('player.atlas'); game.createScene('Main', { init: function() { var player = new game.Animation('player.atlas'); player.addAnim('run', ['run-01.png', 'run-02.png']); player.play('run'); player.addTo(this.stage); } }); }); Just update to latest develop version.
  26. 1 point
    ivan.popelyshev

    How to center PIXI.Graphics?

    I wish you good luck in understanding how transforms work. Also beware of width/height , those are calculated properties.
  27. 1 point
    TufanMeric

    How to center PIXI.Graphics?

    Oh, right, i completely missed that one. 😳 I got it to work doing this: this.body = new PIXI.Graphics(); this.body.lineStyle(4, 0x000000, 1); this.body.beginFill(0xffff00); this.body.drawCircle(0, 0, 36); this.body.endFill(); this.body.x = this.body.width / 2; this.body.y = this.body.height / 2; this.body.pivot.x = this.body.width / 2; this.body.pivot.y = this.body.height / 2; Turret: this.turret = new PIXI.Graphics(); this.turret.lineStyle(4, 0x000000, 1); this.turret.beginFill(0x9b9b9b); this.turret.drawRect(x, y, 18, 40); // turret offset, sent by server this.turret.endFill(); this.turret.x = (this.turret.width - 4) / 8; // I have no idea why i need to divide it by 8 but it works: bullet comes out of the exact center of it, -4 is the stroke size. this.turret.pivot.x = this.turret.width / 2; this.turret.pivot.y = this.turret.height / 2;
  28. 1 point
    For picking the better GPU, there is an option called powerPreference Set it to high-performance and the browser will take that as a hint to use the best GPU available. https://pixijs.download/v4.8.7/docs/PIXI.html#.autoDetectRenderer
  29. 1 point
    its easy to reproduce, i'll look into it please join https://t.me/gamedevforweb
  30. 1 point
    SarahJ

    Fading trail

    Thanks! I forgot to check the source code first. 😶
  31. 1 point
    kiklop133

    [Phaser 3] Maggot Diorama 2

    Hello everyone, Finally I finished glorified version of Maggot Diorama. It's still a tiny game now with bonus level which is more likely experimental thing. I also changed way to gather money "spend on defense stuff" and now I'm not sure if it's easy to understand how it works tho. https://www.kongregate.com/games/kiklop133/maggot-diorama-2
  32. 1 point
    Thanks for the boilerplates link. That's helpful! As for the second part, indeed what I need are the instanced versions. Thanks for pointing me to the Container, which put me on the right track looking at the API documentation. In this simple, where I'm just trying to wrap my head around Pixi, I guess what I needed was as simple app.stage.getChildByName("name").
  33. 1 point
    jonforum

    Placing objects in a 48px grid

    for grid, play with modulus operator https://www.w3schools.com/js/js_operators.asp Just search on youtube, you will see how create grid with modulus operator youtube.com/watch?v=nvMheqDMHK0 math.floor here can be replace by Double bitwise ~~ for snap to grid, modulus will also solve your issue, but you will need to play and study it before.
  34. 1 point
    Hi everyone, I'm trying to port an avatar editor made with AS3. The original app makes use of the gskinner Color Matrix class for adjusting brightness, contrast, saturation and hue of each part and stores those values in a DB. So imo I have two options here: 1. Port the class to js and try to use the stored values as they are. 2. Find an algorithm to transform those values to use them with PixiJS Color Matrix Filter directly. As I'm not very good at maths I've tried the 1st option so I ported the class to JS and tried to use it as the matrix for the color matrix filter. Saturation and hue seem ok but I cannot make brightness and contrast adjustments to look similar in as3 and pixi. I've been digging a bit and I've found that in the gskinner class, brightness and contrast are tweaked through the offset column while the color matrix filter in Pixi aren't. I've noticed as well the use of 'colorMatrix.frag' which is a WebGL shader impl but I don't know anything about them so I'm stuck. Do I need to implement a new custom matrix color filter or even a custom colorMatrix.frag (although I don't know anything about shaders as I said)? Any clues on option 2? Is there any other option I haven't take into account may be? Any help or directions would be very much appreciated. Thanks so much! You can see the ported matrix color code here (and I've attached the as3 code just in case): https://www.pixiplayground.com/#/edit/DIPYaphRukZ6rBqIRupVv as3-color-matrix-example.zip
  35. 1 point
    jonforum

    Fading trail

    I will interest by this later, because I remember that I will need to look this at it in depth. In fact I wanted to be able to generate texture guardian to apply this on a text box to generate a fadding mask text when scrolling the box. And the box are dynamic size, so i can not use photoshop in this context!, scaling the image will also scale the linear mask picture and give weird result. it's an old test with a filter for fake linear, but the subject is interesting. But am not energized to test it now . 😴
  36. 1 point
    Noel

    how to Monetization facebook instant games ?

    @sisko Don't write in bold, it is not nice to the eyes, Have you read our documentation? https://developers.facebook.com/docs/games/instant-games/guides/ads-monetization You cannot use Admob within Instant Games.
  37. 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
  38. 1 point
    Here's a playground that reproduces the problem (some of it at least, the missing triangles aren't in the exact same place for me) https://www.pixiplayground.com/#/edit/wyw3c0oMPBlkeO5he3Wto I can confirm that this bug is not present in pixi.js@4.8.6 so I'll use this version for a while 😉 Thank Ivan, you're incredibly helpful 😄👍
  39. 1 point
    most of devices will give you max 4096x4096 texture. Also, texture compression (DXT), pixi-compressed-textures. That's not GZIP , that's actually compression on pixel-level, it works on videocard. Split it or renderer will die.
  40. 1 point
    Impressive artwork! But I still can't make up what the actual game is. The trailer and screens show awesome stuff but it does not show how the game actually look likes. I think I saw like 3 very short recordings in barely 1.5 seconds that were projected on a 3d plane. My advice: replace the screenshots in this topic with actual straight-forward screenshots from the levels itself, not that store and lobby stuff. Those are rather irrelevant for they say nothing about the gameplay.
  41. 1 point
    Jonny Shaw

    Freelancer | Digilocker Design

    Hi all! I've been floating around the forums for a few years now and didn't realise I hadn't posted a plug in here! 🤣 I'm Jonny Shaw, 35, & a freelance artist & designer, based in West Yorks, England. I have a background starting in UI design, but more recently have worked in 2D, 3D, animation, sculpting, & development too. Lately I've mainly been working on a lot of casino games, which also led into development with PixiJS, Spine & GSAP. The last of which ended up being a full game prototype (just minus the comms). Always on the lookout for interesting projects, so if you feel like my work may fit the bill, don't hesitate to give me a holla! Cheers 🍻 Jonny Shaw Website | Facebook | Behance | Artstation
  42. 1 point
    @ivan.popelyshev I ended up using the customizable RAF game loop setup and am having some stuttering issues with moving sprites across the screen. I recorded its behavior, please download the video to avoid google drive's bad preview showing extra stuttering. https://drive.google.com/file/d/1vi9H7pePHBTrufGvq4iQnCI7vB4YFqPz/view?usp=sharing (~25Mb file). In my gameloop, I create arrow sprites and try to decrease their x position by a constant 8px per update call. Since deltaFrame is a bit unstable, I fix the sprites' x position when they need to be pushed forward to sync up to the song again. (All x positions are done in whole integers so I don't draw them at a decimal px position). This is the main code from the RAF gameloop showing the creation and movement of the AnimatedSprites and the console.logs: //Check for lost frames, if enough frames have dropped then force their x positions forward a bit to sync them up to the song again. update = () => { this.now = new Date().getTime(); const songElapsedTime = this.now-this.startSongTime; let deltaTime = this.now - this.oldTime; this.oldTime = this.now; if (deltaTime < 0){ deltaTime = 0; } if (deltaTime > 1000) { deltaTime = 1000; } const deltaFrame = deltaTime * 60 / 1000; //-1 to just get how far off a frame the update was if (deltaFrame < 10){ this.cumulativeFrameSkip = this.cumulativeFrameSkip + (deltaFrame - 1); } //console.log out if deltaFrame is having trouble being close to deltaFrame = 1 if(deltaFrame > 1.4){ console.log("deltaFRAME was slow: ", deltaFrame, "how far into the song in ms:", songElapsedTime, "deltaTime:", deltaTime); } if(deltaFrame < 0.8){ console.log("deltaFRAME was fast: ", deltaFrame, "how far into the song in ms:", songElapsedTime, "deltaTime:", deltaTime); } let amtOfFramesToSkipXPositionBy = 0; if(this.cumulativeFrameSkip >= 2){ amtOfFramesToSkipXPositionBy = Math.floor(this.cumulativeFrameSkip); //floor to keep x position in whole numbers when multiplying with this later console.log("I shifted the arrows on screen so you should see a jump in position. amtOfFramesToSkipXPositionBy:", amtOfFramesToSkipXPositionBy); } //Generate arrows at the edge of the screen as you go through the song Object.keys(this.songData).forEach(key => { if ( this.now - this.startSongTime >= this.masterArray[key].timingWindow[0] * 1000 - this.msToGetToTimingWindowFromWindowEdge && this.masterArray[key].timingWindow[0] * 1000 - this.msToGetToTimingWindowFromWindowEdge >= 0 ) { this.createNewAnimatedSprite( this.props.highwayWidth, 150, arrayOfPngNames, 0.15, key, this.masterArray[key].strumType, ); delete this.songData[key]; } }); //Move each arrow sprite, delete them far off screen this.preJudgedContainer.children.forEach(sprite => { if (sprite.x <= this.distanceRightTheTimingWindowIs && this.masterArray[parseInt(sprite.name)] !== undefined && this.masterArray[parseInt(sprite.name)].judged == false) { this.masterArray[parseInt(sprite.name)].judged = true; sprite.alpha = 0; sprite.position.set( sprite.x - this.changeInHighwayPixelsPerFrame - (amtOfFramesToSkipXPositionBy * this.changeInHighwayPixelsPerFrame), sprite.y ); } else if (sprite.x <= this.distanceRightTheTimingWindowIs ){ sprite.alpha = 0; } //kill sprites off screen so that it won't show the pixi redraw shifting children else if (sprite.x <= -500) { sprite.destroy(); this.preJudgedContainer.removeChild(sprite); } else{ sprite.position.set( sprite.x - this.changeInHighwayPixelsPerFrame - (amtOfFramesToSkipXPositionBy * this.changeInHighwayPixelsPerFrame), sprite.y ); } }); ... this.renderer.render(this.stage); if(this.cumulativeFrameSkip >= 2){ this.cumulativeFrameSkip = 0; } requestAnimationFrame(this.update); }; The deltaFrame seems to have a lot of issues right after starting the song for about 8-10 seconds and then stables out to be closer to a value of 1. Here is the full code I am using in React to create the sprites and move their position: https://gist.github.com/IsaacVraspir/6679b0329178c555b317c6d99bd56c3e My main concern is that the sprites stutter even when I'm not trying to correct their position and after deltaFrame has smoothed out. (You can see this around the 1:00 mark of the video recording - the console.log doesn't say that I shift x position but the sprites still stutter). I appreciate any advice on what I'm doing wrong! Thank you!
  43. 1 point
    it was 5.0.0-rc.2 🙁 i didn't check version 🤦‍♂️ i install 4.8.6 it works thx
  44. 1 point
    The game was just released on coolmath-games https://www.coolmathgames.com/0-snake-slider
  45. 1 point
    I think you've maybe misunderstood how these frameworks get their output into your eyeballs. They *all* use canvas, 3d accelerated or not, its a canvas element they output to. If you want to learn how canvas and context works, dig in, its a great learning experience. If you want to get some meaningful output to the screen, use one of the many available frameworks. Creating these canvas rendering libraries is no small task, not small at all. It's a lovely technical task to undertake, but, its really tricky so you probably need to decide if you want to invest your time creating a rendering engine, or creating a game/app/whatever to use that engine. You should get an unbiased view here, plenty of people here have invested in making their own rendering libraries. If making a game is indeed your goal, use something like Pixi or Phaser etc to do the heavy lifting and focus your effort on making the game fun. Also, on nomenclature, I tend to differentiate between library and framework, although the line is often blurred. Phaser is a framework, it handles things like audio, rendering, user input, application structure etc. Pixi just renders stuff really fast, it is a library/module. To reinforce this, Pixi is contained within Phaser 2, and is just one part of it. Your outlook on coding dictates whether you are more drawn to using a framework vs consuming libraries and, in effect, creating your own framework from those pieces. Pros and cons to either approach.
  46. 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.
  47. 1 point
    Babsobar

    Zooming out on tilemap layer?

    Just wanted to update that this problem was fixed by a recent update of Phaser.
  48. 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
  49. 1 point
    Sounds like what you need is to have a sprite child for that graphics object. You see, technically, the entire canvas (whether 2d or webgl, doesn't matter) is one big image. PIXI just draws different parts of the image separately to create the whole. So when you render a container, you will draw each child of that container (whether sprites, graphics, or something else) and all of its descendants (children, children of children, etc) in order from top (root) to bottom (leaves). The different parts may overlap, but at the end of the day the entire tree is reduced to an image. So do you want an image loaded from file to be in the middle of your graphics object? Easy. Just position the image object (sprite) so that it is in the middle of your graphics object. The easiest way to do that is to make the sprite a child of the graphics object, so that its position (x and y coordinates) are relative to the top-left corner of the graphics object. Parent/child relationships are not required, mind you, it is just a convenient way to get relative positioning (and also guarantee that the child is drawn after the parent, possibly overlapping). Does the whole paradigm of drawing position and order make more sense now? With all that in mind, I'll answer each question specifically: 1) Is there a way of doing this, similar to the plain/vanilla canvas way: // untested// 2d or webgl, doesn't matter.var renderer = PIXI.autoDetectRenderer(300,300);var canvas = renderer.view;var stage = new PIXI.Container();var sprite = PIXI.Sprite.fromImage(source);var graphics = new PIXI.Graphics();stage.addChild(graphics);graphics.addChild(sprite);// assuming graphics object is 100w x 100h// graphics position is centered horizontally and vertically relative to stage/canvas.// absolute position of the graphics object is 100 points right and 100 points down from the top-left corner of container (parent).graphics.position = new PIXI.Point(100,100);// assuming sprite object is 50w x 50h// sprite position is centered horizontally and vertically relative to graphics object.// absolute position of the sprite object is 125 points right and 125 points down from the top-left corner of container (grandparent).sprite.position = new PIXI.Point(25,25);// draw some lines n stuff on the graphics object.// Only reason I'm putting it in the ticker is just in case the image hasn't loaded yet.// We'll render 60 frames per second until it does... and after it does!PIXI.ticker.shared.add(function () { renderer.render(stage);});// put the canvas somewhere in the DOM. 2) Is the context (2d), unique to the Canvas? Yes. 2d is a context. webgl is a context. PIXI calls the 2d context renderer "Canvas". Both contexts are built on a "canvas" dom element. Confusing? Yes. 3) Would drawing imaged[sic] to the graphics object limit me to the CanvasRenderer... No. PIXI abstracts the WebGL nonsense (it's pretty arcane) away from your eyes so that you can create sprite objects that can be rendered magically using webgl context or rendered boringly using 2d context.
  50. 1 point
    David

    Is there a double-click feature?

    From what I've seen of the code, there is no double click event. However, there is an extra parameter passed into "onTap" that denotes double click: // Was it a double-tap?if (this.timeUp - this.previousTapTime < this.game.input.doubleTapRate){ // Yes, let's dispatch the signal then with the 2nd parameter set to true this.game.input.onTap.dispatch(this, true);That means you can have a double click handler by doing something like: game.input.onTap.add(function(pointer, isDoubleClick) { if(!isDoubleClick) { return; } // Handle double click.});Then again, you could also use the native dblclick event.