Popular Content

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

  1. 3 points

    Hangman - Pixijs and Effector

    Hi, I wanted to share a small game I made to try out Effector the state manager with Pixijs. hangman demo I wrote an article about it also Read more
  2. 2 points

    PIXI Sound mp3 loop 'pause'

    The mp3 looping problem is caused by the format. It can be mitigated by fiddling around the original sound source and compression: https://www.compuphase.com/mp3/mp3loops.htm I'd suggest using multiple formats and drop them based on browser support. Most of the audio libraries have alternateExtension -configuration (or something similar) to handle this. I usually go with ogg as first choice and then mp3 for those that dont support ogg.
  3. 2 points

    pixi-layers : PIXI is not defined

    @charlie_says thank you for your answer, even though it didn't work in my case, it putted me on the way to what @bubamara said, I had actually found the solution but a bad config in my webpack conf was compiling the code in the wrong location πŸ€¦β€β™‚οΈ So yes: simply providing PIXI through the webpack config is the way, thanks everyone for your help.
  4. 2 points

    Pixi.js Showcase

    I built this website that was projected on to a transparent touchscreen for an exhibition at Museum of Science and Technology in Stockholm, Sweden. It might be hard to see in the video but visitors are challenged with a range of ethical questions about technical and medical development at three of these stations. I mainly used Pixi for all the great filters like Pixelate and CRT. It really worked out great! The whole project took 1 month from the first line of code till the premiere. Just when the exhibition launched, the museum closed due to covid-19. Fortunately it’s going to be around for 3-5 years hyperhuman.mp4
  5. 2 points

    Generate bitmap font

    If anyone faces the same issues, I have discovered the problem. In the fnt file: <font> <info face="testFont" size="72" bold="0" italic="0" charset="" unicode="" stretchH="100" smooth="1" aa="1" padding="0,0,0,0" spacing="0,0" outline="0"/> <common lineHeight="80" base="57" scaleW="361" scaleH="512" pages="1" packed="0"/> <pages> <page id="0" file="testFont.png"/> </pages> ... On line 2, face="testFont" must match the name from line 5 (file = "testFont.png") Apparently, this undefined size error is a facade for anything that might be wrong with the font file.
  6. 2 points
    Never mind, this can be handled by @expo/browser-polyfill
  7. 2 points
    You can also use an external 2d canvas for a bit more of drawing api. You could even use p5js to draw that, then use that canvas as a source for basetexture.
  8. 2 points

    Pop-Pop Kitties

    We just finished POP-POP KITTIES, a kawaii styled bubble-shooter. The game is made with HTML5 and runs in the browser on mobile or desktop. https://b10b.com/poppopkitties/ Gameplay: Play a cute puzzle as you pop-pop all the kitties using strategy and reflexes! With 100+ challenging puzzles and adorable kitties this kawaii Match-3 Puzzle Shooter game will charm players for hours. Can you collect all the stars? Technical: Based on our earlier game (POP-POP CANDIES) this version is also made with Haxe + awe6 + CreateJS and designed to run on any device at ~30fps. Many of the assets originated from royalty free sources and most level designs came from a level pack designed for Frozen Bubble, so big thanks to contributors there. The levels (and star ratings) were sorted based on completion time of sample plays - so they should feel progressively harder. Commercial: We made POP-POP KITTIES as a followup to POP-POP CANDIES because (despite its unoriginality!?!) it was well received, played in the millions, with average play sessions beyond 45 minutes - it's the kind of game that once you start it's hard to stop! This game is available to play or license from our website: https://b10b.com
  9. 1 point

    physics library

    I meant that problem usually to set up physics lib for your game , its not hard to connect pixi to it
  10. 1 point

    problem in sprite height

    thank you. with using loader my problem solved.
  11. 1 point

    Phaser OR Unity For HTML5 Games

    I've been using Haxe professionally since 2008 - it's typically my preference, I'm a little biased? Even if using Phaser or Unity I'd still use Haxe. To ask whether games coded in Haxe work smoothly may reveal a misunderstanding of what Haxe is. Haxe is a language and transcompiler, it targets many platforms and embraces many libraries - it can be used in a multitude of different ways. I especially like Haxe's macro functionality which can set it apart from other transcompilers (e.g. Typescript). In ~2010-~2015 Haxe had a semi-unique proposition for people moving away from Flash (in particular a library called NME and then OpenFL which provides a substitute Flash API for Haxe's none-SWF targets). But the Haxe landscape was and is so much more than that with many dedicated games frameworks ... just as a modern web-game is so much more than a port of a retro Flash-game. I don't apologise for not providing a more specific guide on how to make a game with Haxe. How someone chooses to use Haxe is down to them (it really is a broad purpose platform so must be unopinionated).
  12. 1 point

    pixi-layers clarification

    Ok I think I understand the intention now, thanks Ivan!
  13. 1 point

    pixi-layers clarification

    I'm confused as to why someone would create a group and layer rather than just a layer (which will create a default group if none is given). This part in the documentation I think explains it, but I don't get what's being said: Can someone clarify how this API was designed, or clarify when someone would need a Group to "move between stages?" I'm not exactly sure what this means. Thanks, Mike
  14. 1 point

    pixi-layers clarification

    Thank you for that question! Usually people dont notice that its kind of optional feature. Its possible to do everything with just a layer, but you might encounter structural problems. Group is global, you can use it even without any reference to application/stage/whatever. Instead of "element.zIndex=2" you type "element.parentGroup=group2" , group can be used as that number in zIndex, regardless of layer creation.
  15. 1 point

    Device orientation

    Thank you so much, Olivier, you are fast! I'll test that ASAP and will let you know how it goes.
  16. 1 point

    Tint missed up in bobs

    Hi, just trying to bring some more light if it helps... Another solution I guess: var value = 0xff0000; var color = (value >> 16) + (value & 0xff00) + ((value & 0xff) << 16) Looks that this is what it's being applied in the sources... https://github.com/photonstorm/phaser/blob/v3.22.0/src/gameobjects/components/Tint.js
  17. 1 point

    [Phaser 3] Bouncy Woods

    Sup my dudes, My latest game Bouncy Woods was released just yesterday on Poki - https://poki.com/en/g/bouncy-woods It was developed with Phaser 3 and MatterJS. Matter was pain in ass to deal with because I really needed "bullet" like bodies for this game and Matter doesn't support it. So sometimes you can notice "tunneling" issue - when balls go through blocks. If you have any feedback or questions regarding the game - please let me know. Gameplay video
  18. 1 point

    [Phaser 3] Bouncy Woods

    Fantastic! Polished, juicy and beautiful. Really liked a graphic style! 😍
  19. 1 point

    How to get coords in Filter

    For fullscreen filters pixi uses same coords, so "cont.filterArea = app.screen" seems to solve the problem. Any other sizes, ( whatever container bounds are) temporary textures have pow2 sizes, different from what you pass in u_lightmap - you have to convert "input coords" to "pixel coords" and then to your u_lightmap coords, probably passing dimensions of the lightmap through uniforms. If you want more info on coords, you have to go through https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters . Welcome to the forums!
  20. 1 point

    I want to make a leader board

    For example, like this: https://plnkr.co/edit/CJ9iGJr4mkysO5t0?preview <!doctype html> <html> <body> <input id="nameField" value="Enter your name..."> <button id="okButton" onclick="okButton_OnClick()">Ok</button> <script> function okButton_OnClick() { var nameField = document.getElementById("nameField"); var name = nameField.value; console.log(name); } </script> </body> </html>
  21. 1 point
    Hello and Welcome to the forums! Yes, its that complicated. You didnt mention WebGL objects which are not treated by regular GC, that makes everything even more difficult My usual approach is just let it flow, profile and take memory heap regularly to ensure you are not leaking anything. One rule - dont create new objects every frame, unless its capped by amortization: if you know you will create 100 objects per second, but you want to create 50 of them in this frame - its fine.
  22. 1 point

    I want to make a leader board

    Hello , Are you planning to add online leaderboard or offline leaderboard??? about offline You can try localStorage to save the score. https://www.panda2.io/docs/api/Storage https://www.panda2.io/examples#storage-get about online, you need to use server side programming languages if your game export to mobile device, you can integration Google play services hope can help
  23. 1 point

    pixi-layers : PIXI is not defined

    Really should be mentioned in Pixi wiki as it's frequent question.. Add this to you webpack config file: plugins: [ new webpack.ProvidePlugin({ PIXI: 'pixi.js' }) ] ..and then only import pixi layers, spine, whatever.
  24. 1 point
    did you take a look in some sample projet on codeSandbox? Just in case, sometime people forget search here before. https://codesandbox.io/s/app-architecture-3-t6cfv https://codesandbox.io/s/92qj013rvr?file=/src/index.js https://codesandbox.io/s/km262qnqr7 https://codesandbox.io/s/youthful-hertz-jzl912w7k9
  25. 1 point
    https://codesandbox.io/s/yw2vox5479?file=/src/main.js https://codesandbox.io/s/xz91np51ww
  26. 1 point
    Hello pixijs forum and devs. IΒ΄m currently working on a multiplayer 2d Game. Problem: I'm using pivot for main game scene to follow the Player (in center) everything works okay when i have resolution at 1. -- Thanks for every reply, my english is not very well so ill try to explain throu the photos &code I'll attach some photos to show u my problem PIXIJS Inspector: - Pivot point does not scale properly with resolution. My code for resize and App I have my app declared here as static export class Game { //Create a Pixi Application public static app:any = new PIXI.Application({ antialias: false, // default: false transparent: false, // default: false autoDensity: true, autoResize: true, resolution: window.devicePixelRatio, }); // Resolution & Camera public static WIDTH:number = 728; public static HEIGHT:number = 540; I have own container which contain Game (everything expect UI) dynamic content Game.scene /** Game -> Dynamic container */ public static scene:any = new PIXI.Container(); public static init():void { // Initialize Display.Stage (Layers support) Game.app.stage = new PIXI.display.Stage(); Game.app.stage.addChild(Game.scene); Game.resize(); // call resize funct. .... Game.app.renderer.render(Game.app.stage); } // i took those function from Pixi Forum /* Helper function to resize the game to fit the full screen */ public static resize():void { const WIDTH:number = Game.WIDTH; const HEIGHT:number = Game.HEIGHT; const vpw:number = window.innerWidth; // Width of the viewport const vph:number = window.innerHeight; // Height of the viewport let nvw:number; // New game width let nvh:number; // New game height // The aspect ratio is the ratio of the screen's sizes in different dimensions. // The height-to-width aspect ratio of the game is HEIGHT / WIDTH. if (vph / vpw < HEIGHT / WIDTH) { // If height-to-width ratio of the viewport is less than the height-to-width ratio // of the game, then the height will be equal to the height of the viewport, and // the width will be scaled. nvh = vph; nvw = (nvh * WIDTH) / HEIGHT; } else { // In the else case, the opposite is happening. nvw = vpw; nvh = (nvw * HEIGHT) / WIDTH; } // Set the game screen size to the new values. // This command only makes the screen bigger --- it does not scale the contents of the Game. // There will be a lot of extra room --- or missing room --- if we don't scale the scene. Game.app.renderer.resize(vpw, vph); // This command scales the scene to fit the new size of the Game. let zoom = Camera.activeCamera ? Camera.activeCamera.zoom : 1; Game.scene.scale.set(zoom * (nvw / WIDTH), zoom * (nvh / HEIGHT)); Game.scene.filterArea = new PIXI.Rectangle(0,0, vpw, vph) } export class Camera { .... public static updateView() { if (Camera.activeCamera) Game.scene.pivot.set(Camera.activeCamera.position.x, Camera.activeCamera.position.y); } public setFocus(obj:any):void { this._cameraFocus = obj.position; } // On Update / GameLoop Camera.activeCamera.setPosition(Camera.activeCamera._cameraFocus.x, Camera.activeCamera._cameraFocus.y); ... } Camera.activeCamera._cameraFocus.x is bounded to (referenced) container position - For some reason pivoting player position (container) is not centering container to the middle if resolution is higher. in PlayerInit i have Game.camera.setFocus(this.container) -- My HTML Viewport is: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
  27. 1 point
    @ivan.popelyshev Well, I found plugin Tiled for pixijs, when i already did it by myself πŸ˜„ I also checked viewport plugin but id like to build my own, actually for my game i do not need anything complex. Viewport in 2D is just about pivoting and positioning of the main scene which is actually view. For 3D projection or 2.5d it is much harder. It is not very hard to make own viewport for 2d projection with full support. But there is lot of super cool plugins that i will definitely use like Pixi-Tilemap which is superfast and cool. I'm using it with tiled editor
  28. 1 point

    Why is this not allowed?

    input = output in your case, cant use renderTexture in sprite that is being in the same renderTexture. Its WebGL restriction. use another renderTexture.
  29. 1 point
    Mike Montoya

    Layering a Masked Blur

    Thanks you so much, Ivan! This is extremely helpful! Thank you for all your hard work, so that the rest of us can make cool stuff! I greatly look forward to all your improvements and enhancements - it is much appreciated! πŸ™‚
  30. 1 point
    Mike Montoya

    Layering a Masked Blur

    Hello, I am new to PIXI and as a former Flash developer, I am greatly enjoying learning it, as the concepts are quite similar! πŸ™‚ I recently came up against a stumbling block, which I hope a kind soul here may help me resolve: I'm trying to reproduce what one sees when looking through a camera's viewfinder. In order to achieve this, I am attempting to blur only a circular portion at the center of the stage. While this works as expected when I add a single blurred container and its corresponding mask, as children of the stage, the moment I add a "crisp" (non-blurred) version of the same container, I don't get what I would expect: i.e. the blurred circular portion overlaid over the non-blurred container. Instead, the masked, blurred version gets overriden and I only see the crisp version. Building off a CodePen generously provided by OSUblake from the GreenSock forums, I put together this CodePen to illustrate the problem: https://codepen.io/montoyland/pen/zYvWLzv (Uncomment the line in question, noted in the comments, to see what I mean). What would be the proper way to achieve what I am trying to do? I have seen from examples that other filters (such as the DisplacementFilter) can be constrained to a discreet area on the canvas, so I assume the same can be done with the BlurFilter while still coexisting with other containers on the stage. What I am missing? Thank you so much for your help! Cheers! Mike
  31. 1 point
    Oh right, need "filter.autoFit = false" with it too
  32. 1 point
    you need a BufferResource "new PIXI.BaseTexture(new PIXI.resources.BufferResource(myUint8Array));" - here's baseTexture. when you change osmething, you have to do "baseTexture.resource.update(newBuffer);` or just update() if its the old one. When time comes pixi will call resource upload() method https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/BufferResource.ts#L55 which will put your buffer into webgl texture. Yes, PixiJS is not focused on processing images like p5 does it, but the least we can do is to provide API to make manual uploads. Getting info back from video memory is much harder- its "renderer.extract" plugin, that uses readPixels webgl function. If you do that -i really recommend to go through this WebGL function first, because pixi in that case is just a provider for webgl api's, we cant just make our own API's and cover underlying webgl, because those parts are performance-heavy and have many side-effects.
  33. 1 point
    Hello, What I have done so far, Thanks to this awesome library. Developing a children's book with Pixi.js and cordova. I just want to reach out to the pros to get some input on my approach on things. Current approach is depending on the type i am resizing all the sprites stretching it positioning where they should be all using body.clientHeight body.clientWidth and some math. All non interactable sprites is as big as the background most of if is transparency to avoid playing around with positioning not sure if this is good.... All working in order as expected, everything looked stretched though. All this I'm doing is without consideration of how do deal with retina and pixel density. I attached one of the frame of a sprite. As you can see the frame takes the whole layout. Should I be doing this any different? The artist draws on photoshop on a canvas 2048 x 1536 pixels should i be setting the pixi application width height to that?. Whats the approach to maintain aspect without stretching and maybe just get a black bar on either vertical or horizontal side and center the image. Supporting retina? Thanks in advance.
  34. 1 point
    yeah, but the difference doesnt matter in long run, its only one frame and i do like 10 operations like that in frame without slowing down canvas2d->webgl upload is actually much faster than people think about it - most of info is already on gpu, the only cpu->gpu upload is actually alpha mask for circle because of super-AAA algorithm on CPU
  35. 1 point
    Sky Alpha

    Exploding Shapes

    Very nice Game!
  36. 1 point
    I just encountered one problem. When you scroll, if you take a look at the initial A of "Auriga" the following codepen https://codepen.io/magiix/pen/NWGvXEe - there's a small line attached to the bottom left of this char. How so? I reckon it's cause by the shader - how can I prevent this?
  37. 1 point
    Hello and Welcome to the forums! Yes, it is async because there's no way in JS to stop thread and just wait when file loads. one of related questions: https://github.com/pixijs/pixi.js/issues/6583 > I tried calling await on PIXI.Texture.from(), but it does not seem to solve my issue. I recommend to look in sources first. "from" is a method that auto-detects whatever resource you want to load, creates Resource/BaseTexture/Texture or just takes it from cache. In your case its ImageResource that has promises and stuff and you can hook in it if you want extra features like createImageBitmap. > I need to immediately store the width and height of the new Texture right after calling PIXI.Texture.from() Use pixi loader with single textures or atlases. Here's how to use it: https://github.com/kittykatattack/learningPixi#displaying-sprites Preload everything, then at some point you will have all the sizes. Another idea is to set texture size yourself if you want what it will be: https://github.com/pixijs/pixi.js/blob/93835dbbecbd0b4f31c9533bde8386a71c5662e3/packages/core/src/textures/BaseTexture.ts#L430 "texture.baseTexture.setRealSize(10, 10)`
  38. 1 point
    I LOVE YOU! That was it, the canvas was getting added to the bottom of the document and not in the "gameContainer" container element I created which was above everything else (and the canvas). It behaved the same visually so I didn't notice it until I inspected the Elements Thanks!
  39. 1 point
    Here's a free book for interested in getting started with modern JavaScript and Phaser 3. You won't need to use NPM or set up any complex build tools. If you've been hesitant or unable to use modern JavaScript because of these web development configuration and tooling hurdles then this book might be perfect for you! You'll just need Google Chrome and Visual Studio Studio. Aside from being an easier way to start using modern JavaScript, the book also goes through creating an infinite jumper game like Doodle Jump. You'll learn everything within the context of modern JavaScript best practices like splitting code into separate files and using the import/export module syntax for dependencies. You can learn more and get the book here: https://ourcade.co/books/infinite-jumper-phaser3
  40. 1 point
    Hi everyone! I have just finished my very first phaser3 based game. Actually it is two of them. The game offers completely novel gaming experience (I know, it is a strong statement) - where players uses his smartphone (with camera) as a gun to shoot ducks on the computer screen (TV). It resembles legendary Duck Hunt by Nintendo from the 1980s which used Zapper gun to shoot at the TV. Only this time it is multiplayer and everyone with average cellphone can play! The game uses node.js to start on the computer and then players connect via QR code - there is instructions video. Please give it a try and let me know how do you like it. www.mobiletvgames.com The game engine is based on the scientific paper that I published along with it. https://arxiv.org/abs/2004.08030 Cheers! Predrag
  41. 1 point
    Find https://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527, there are many pirated versions in internets. Learning Pixi+JS at the same time is hard, because PixiJS team focused on clear internal code, not on clear advancement for people without pre-knowledge. To read that code you need some experience with JS, and to advance faster you have to use chrome devtools like professional who already debugged a few projects and has experience with finding strange JS-related bugs. If you need inputs or physics, or something else that pixi doesnt have from default package - i suggest to move to Phaser. You can always move back to pixi when you have more experience and know which things you need
  42. 1 point
    @b10b I try to share what I know. We're in a forum for doing this, after all.
  43. 1 point
    @b10b Thank you for correcting me regarding Unity. I know how hard it is to make money in the game industry, but I never told them it would be easy It seems OP and the others that posted didn't have a clue of monetization possibilities, so I told them some possible paths. If you have some other ways I'd like to hear too. Regards.
  44. 1 point
    That was true many years ago, but not any longer. Standart HTML5 output from Unity is effectively a WebAssembly blob that runs in all modern browsers, and it's possible to hook it into other Javascript (in or out) quickly enough. It has it's advantages and drawbacks. The new tooling, aka Tiny, is using ECS approaches to modularise things to an atomic level - and is very smart if you are impressed by such things. But the takeaway is there's really no current reason to think that the output from Unity can't be as efficient (or more so) as something like Phaser given some of the techniques it now employs. It's just that most developers aren't especially efficient in using the tools available As for the other points I think there's big risk in explaining "all the ways to make money" because most will result in high hopes, reality crunch, and loss. Why? Because it's easier than ever to make a game, so it's harder than ever to make a dollar from that game. Instead move creative thinking to value generation: find a problem, fix it, get paid, repeat.
  45. 1 point
    If you are asking this question then you are probably planning to make a game first, then hope to find an audience / monetisation second. If so use whatever tool you like - it really won't make much difference to the financial outcome but will make a huge difference to your enjoyment and productivity in the meanwhile. Be mindful that Unity is proprietary, it is offered as a service, there is no entitlement to it. Therefore Godot might be worth a direct comparison for similar tooling.
  46. 1 point

    [SOLVED] Phaser 3 Palette Swapping?

    I managed to figure it out and cleaned it up a bit! Full source is at https://github.com/Colbydude/phaser-3-palette-swapping-example and a demonstration is attached. Cheers for the point in the right direction, Rich.
  47. 1 point

    Creating a mini map in Phaser?

    It's the game world width/height divided by 100 (game.world.width / 100); I should note that my techniques for rendering a mini map have since evolved from the time of my post. I no longer render the entire terrain layer to the map every x number of milliseconds. I do that for units (anything that moves), but for the terrain, I have a simple render texture the exact size of the mini map and render the tiles (transformed to fit the scaled position and resolution/scale of the mini map) whenever a tile changes. However, for the purposes of most simple games, my old technique should do fine.
  48. 1 point
    not to be that guy, but did you read the link? Short summary: var stage = new PIXI.Container(); var container1 = new PIXI.Container(); var container2 = new PIXI.Container(); stage.addChild(container1); stage.addChild(container2); renderer.render(stage); Here you will have two(actually 3) containers rendering in one renderer. The containers can hold childrens of many types, such as Graphics, Sprite, Container, Text, Overriden DisplayObject.
  49. 1 point
    Hi, To disable manifest check, simply set the boolean enableOfflineSupport to false on the BABYLON.Engine object. I think I'll set it by default to false in next versions as we have this question very often on the failing XHR. People will have to set it to true to use .manifest and indexeddb. What do you think? Bye, David
  50. 1 point

    Gradient shader

    Hey dude, I'll just leave this here... You MAY like this http://www.babylonjs.com/playground/#9VC8L