Leaderboard


Popular Content

Showing content with the highest reputation since 03/15/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
    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!
  5. 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.
  6. 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
  7. 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.
  8. 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.
  9. 2 points
    -AAG-

    I hate designing levels!

    There! I said it! 😡
  10. 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.
  11. 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") }
  12. 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/
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 1 point
    I have solution for that thing - custom GlowFilter, but i dont want to publish it without extra preparations, because there are several filters i want to move to special plugin, filters that emulate Flash. I'm afraid that my queue of "who to help and make simple hack in 15 minutes" is too big right now Until then, I suggest to use make progress-bar sprite-basd and prerender everything you can in several frames in photoshop.
  19. 1 point
    Sorry to hear this, it's frustrating and not uncommon for quality games. Locking a game will have limited benefit, don't blame yourself. Practical advice is don't spend more than 5 minutes worrying about it (a DMCA takedown should take less than 5 mins once you've done it a couple of times). Some additional takeaways are: 1) brand future games in multiple ways so stolen traffic still promotes the author and proper licensing channels, 2) develop server-authoritative or partner-publishing strategies for monetization, 3) offer paying customers more value than what they could achieve by stealing, 4) remember a sequel is quicker for the original author to make - and everyone prefers to play the latest greatest - so if stolen games get traction cash in later.
  20. 1 point
    wait a moment, making a demo. I believe we have something like that in v5, i dont remember about v4.
  21. 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!
  22. 1 point
    Said in that way sounds very trustworthy. Okay I will make more research around. Think the Firefox forum will be affected too. Thank you very much! I will write when something new emerges on the horizon !
  23. 1 point
    I'm setting the starting width of the blueBar rectangle based on how long a chord needs to be held. Then I decrease the width of the blueBar in the game loop: const holdBar = new PIXI.Container(); let blueBar = new PIXI.Graphics(); blueBar.lineStyle(2, 0x006ba6); blueBar.beginFill(0xffffff); blueBar.drawRect(0, 0, Math.floor( 8 * (howLongDoesTheChordLastInMs / 16.67) - 50 ), 10 ); holdBar.addChild(blueBar); containers.current.holdBar.children.forEach(blueBar => { console.log("my linestyle is:", blueBar.lineWidth); if(blueBar.x <= 100){ blueBar.width = blueBar.width - 8; } else{ blueBar.x = blueBar.x - 8; } } The result is that the lineStyle is getting chopped off even though the console.log still shows a lineWidth value of 2. My guess is that the lineStyle is getting hidden by the container, or that graphics don't like having width dynamically changed in the game loop. Thank you for any advice on how to fix this! 😁
  24. 1 point
    ivan.popelyshev

    Pixel shift on iOS only

    What version of PixiJS do you use? I remember that I fixed serious precision problem somewhere in 4.8.3
  25. 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.
  26. 1 point
    5neia_opo2@google-mail.ooo

    def

    def
  27. 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/
  28. 1 point
    mattstyles

    Is it like backstabbing my clients?

    If an 'adequate' amount of time has elapsed then I think it makes sense, it turns their license in to what is something like an 'early access' license (and, by that, I mean, they get it before everyone else, not like steam early access which is before its ready), which almost certainly isn't what is written in the license but it almost certainly isn't prohibited either. As you have a good relationship with them, maybe ask them what they think and how they think they might react? I'd like to say that they understand business and you're just driving profits and that it is all really rather understandable and totally normal for you to make enough money to feed yourself and buy a few nice things, but some people are hard to judge. For what its worth, so long as a decent amount of time has passed since the initial (and often only) license was sold I don't see any conflict with attempting to monetise your back catalog. Keep them sweet by promising lots more top notch games they can license before everyone else
  29. 1 point
    SarahJ

    Fading trail

    Hi, I'm trying to create a fading trail using minimal graphic/sprite objects. Right now I have an object that is always moving at the same speed and direction, and I would like it to have a trail behind it. I've looked at the mouse trail demo, however, I feel it is unnecessary to use have to use so many objects just to make a linear trail (the trail I need will always be in the same direction), as I'm going to need 10+ trails at once. Here are 2 of the options I've thought of so far: Draw a rectangle graphics object, then use an alpha mask to create a fading an effect: Have a really long sprite as a trail, then use set its frame to the length I need. Which one would be more practical to use, and are there any better methods? Thanks!
  30. 1 point
    taoprox

    Project MWX - multiplayer RPG

    Hey Semir, I am focusing a lot on my game editor at the moment, I've hit a point in development where I need a lot more attribute data for sprites and objects, and therefore need a easy way to edit this. I will always write here for you whenever I make any progress and be sure to keep checking my youtube channel for more videos in the future! I appreciate your interest in this, and in the future when I need help testing it, you will be one of the first I will ask! Thanks, Tao
  31. 1 point
    In my honest opinion I think you should not ask us, but Google. I understand your frustrations and I too need to admit I don't really can make head nor tails from what they sent either but they do. So my suggestion is to first read that article about the Metadata you can access by clicking the link in step 1 below the heading "Next steps". If that does not make sense to you, you should send them an email about clarification.
  32. 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
  33. 1 point
    Exca

    Choosing renderer with better performance

    The client I work for has automatic feedback channel when problems occur and they add items to that list based on feedbacks and per project basis as the requirements vary a lot. The check is a combination of GPU string in gl context and additionally user agent. For example we have some old chrome/firefox versions blocked.
  34. 1 point
    Exca

    deep and child

    In this case you could also just say .visible = false / true to keep layering constant.
  35. 1 point
    I dont see any round-related code in mesh in v4. https://github.com/pixijs/pixi.js/tree/v4.x/src/mesh and in graphics too: https://github.com/pixijs/pixi.js/tree/v4.x/src/core/graphics . Also, make sure that screen size is less than 4096 and CSS width/height that pixi set corresponds to canvas width/height.
  36. 1 point
    new Update : https://www.kongregate.com/games/DragonSlayerZ0/sticky-ricky-lost-in-space
  37. 1 point
    roxor45

    right click event

    lol don't worry , it's not a porn avatar it's an avatar from my google account , so no pb i change that . back to Js I try that and I come back ! thanks !!!
  38. 1 point
    Floor or | 0 is fine too
  39. 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!
  40. 1 point
    its rotating relatively to container position. Set container position to (x,y) and remove those variables from positions of all children. Welcome to Flash world.
  41. 1 point
    Haha sounds good. Yes, pain is an apt description lol. Btw, the text you posted in the wiki doesn't renders as a link to this thread properly at the moment - just FYI. Nevermind, I realized after posting I could just edit the wiki page myself haha.
  42. 1 point
    var imageContainer = new PIXI.Container(); PIXI.loader.add("http://127.0.0.1:54508/resources/data/data.jpg").load(function(loader, resources){ var base = resources['http://127.0.0.1:54508/resources/data/data.jpg'].texture.baseTexture; var maxWidth = 2048; var maxHeight = 2048; for (var x = 0; x < base.width; x += maxWidth){ for (var y = 0; y < base.height; y += maxHeight){ var minWidth = Math.min(maxWidth, base.width - x); var minHeight = Math.min(maxHeight, base.height - y); var canvas = document.createElement('canvas'); canvas.width = minWidth; canvas.height = minHeight; canvas.getContext('2d').drawImage(base.source, -x, -y); var texture = new PIXI.Texture( PIXI.BaseTexture.fromCanvas(canvas), new PIXI.Rectangle(x, y, minWidth, minHeight) ); var sprite = new PIXI.Sprite(texture); imageContainer.addChild(sprite); } } viewport.addChild(imageContainer); }); This is a silly question but i'm banging my head for an hour and can't figure it out I'm trying to split an image into smaller texture chunks but i'm getting frame does not fit inside base texture dimensions and i'm not sure why this is happening The image height is 3106 and after the second iteration of the inner loop the y is 2048 and minWidth = 1058 so it should work there is not third iteration of the inner loop to give out of bounds error ... Thanks for reading . also i'm not familiar with ES6 yet, so don't judge
  43. 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.
  44. 1 point
    nice game
  45. 1 point
    ivan.popelyshev

    Gradient alpha on a shape

    pixi v4 or v5? Current way is to generate texture in photoshop or paintDOTnet . I can provive new way for v5 today or in weekend
  46. 1 point
    renderTexture + color swap filters. Look for renderTexture demos. Look for special filters in pixi-filters. Combine it, maybe make an atlas with different Texture's regions inside. If everything goes wrong i'll help you to fix your demo, but first try it on your own.
  47. 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.
  48. 1 point
    sable

    Propagating mousewheel event to parent?

    Hi there. Just did a similar test to Wingy, and looks like babylon doesn't block the events, http://www.babylonjs-playground.com/#C3ZPAS. Looking at your page source, I think the issue is that the scene is embedded in an iframe. You should be able to send the event (or a message) from the iframe to the parent either via window.parent or window.Postmessage
  49. 1 point
    brentstrandy

    Text Underline [SOLVED]

    I just finished extending the Phaser.Text object to add underline functionality. You can find the code here: https://github.com/brentstrandy/phaser-underline-text/blob/master/underlineText.js Any feedback would be appreciated!
  50. 1 point
    Deltakosh

    stop the mesh animation (autoAnimate)

    you should just use scene.stopAnimation(newMeshes[0])