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
    GameDistribution had updated the developer guidelines. "Buttons, images, and texts sending users outside the game to other websites, social media platforms, and app stores, or pushing downloadable content, are by default not allowed, unless specific consent has been given under the terms of the partnership.". I think it's time to say goodbye to GameDistribution now. What's the alternative for GameDistribution?
  11. 1 point

    problem in sprite height

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

    Cross origin problems with video

    I needed to add: const myLuckyVideoElTmp = document.createElement('video'); myLuckyVideoElTmp.preload = "auto"; myLuckyVideoElTmp.setAttribute('crossorigin', 'anonymous'); Now it works
  13. 1 point

    pixi-layers clarification

    Ok I think I understand the intention now, thanks Ivan!
  14. 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.
  15. 1 point
    Well that's embarrassing, since the buttons I have are all at the bottom of the screen then drawing things at 200,200 (I thought it was abs pos) meant that they were completely off the canvas.
  16. 1 point
    Sky Alpha

    [Phaser 3] Bouncy Woods

    It's a very nice game, I already can see millions of people playing it.
  17. 1 point

    [Phaser 3] Bouncy Woods

    Fantastic! Polished, juicy and beautiful. Really liked a graphic style! 😍
  18. 1 point
    I'm currently looking for a way to represent a large number of points, following the example of 'particles' and 'particles-patched' ... these work very well for me, they allow me to zoom in and see the points very well. Example particles example particles-patched By changing the code a little to get the same result as in the example but with the most real coordinates and quantities, the rendering fails me and I get the following: When I zoom, the points disappear. Generate a very different shape than the texture I'm sending you (the same texture I use for the first image) with this function I generate the texture for both cases: generateCircleTexture(radius) { const gfx = new PIXI.Graphics(); const tileSize = radius * 3; const texture = PIXI.RenderTexture.create(tileSize, tileSize); gfx.beginFill(0x000000); // color base gfx.drawCircle(tileSize / 2, tileSize / 2, radius); gfx.endFill(); this.rendererPixi.render(gfx, texture); return texture; } this code create of containers this.pixiContainer = new PIXI.Container(); const innerContainer = new PIXI.ParticleContainer(400000, {vertices: true}); this.pixiContainer.addChild(innerContainer); This is the route I do in the firstDraw for the example markers.forEach(function(marker) { const projectedCenter = project([marker.latitude, marker.longitude]); const circleSprite = new PIXI.Sprite(that.texturePixi); circleSprite.x = projectedCenter.x; circleSprite.y = projectedCenter.y; circleSprite.center = projectedCenter; circleSprite.anchor.set(0.5); circleSprite.scale.set(invScale); innerContainer.addChild(circleSprite); cirlceSprites.push(circleSprite); }); And this is the route that I already do with what I need _.forEach(points.features, function (feature, position) { if (feature.geometry !== null) { _.forEach(feature.geometry.coordinates, function (point, posCoordinate) { const projectedCenter = project([point[1], point[0]]); const circleSprite = new PIXI.Sprite(that.texturePixi); circleSprite.x = projectedCenter.x; circleSprite.y = projectedCenter.y; circleSprite.center = projectedCenter; circleSprite.anchor.set(0.5); circleSprite.scale.set(invScale); innerContainer.addChild(circleSprite); cirlceSprites.push(circleSprite); }); } }); Do you have any idea what may be happening?
  19. 1 point
    Hey trsh, I took a peek. Verified that the dirty counter is updating properly, tried messing around with starting and stopping the underlying video to see if that would help. No dice. The problem seems to be some kind of race condition, where seeking the underlying video results in the data copy failing if performed too quickly. Change your sample's change handler to: fs.onchange = function(e){ videoEl.fastSeek(e.target.value); setTimeout(function() { baseTexture.update(); }, 100); } And it will work as expected. I'm not sure what the solution would be should you be wanting real-time response times, but at least this should help narrow down the problem.
  20. 1 point
    Previous thread: Solution: "That is the problem out of scope of pixijs. https://github.com/bramstein/fontfaceobserver/"
  21. 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.
  22. 1 point
    Hi, I am trying to make `pixi.js` work with `expo`. Current option `expo-pixi` is using pixi v4, not using Typescript and looks messy. I want to take a different approach and make my own version with pixi v5 and a helper/wrapper that will keep original pixi untouched. I am currently stuck at a moment where pixi tries to load a test context for inner needs. `expo-gl` component provides only one gl context so there is no second one for testing needs. Do you guys have any ideas how to workaround this issue? Do we really need tests here? I think native apps on modern phones should be able to provide any gl feature pixi needs. The most obvious is to disable the tests. Maybe you can come up with a better idea.
  23. 1 point
    Dr Popet

    Canjump - One Button platformer

    I just love one button games, nice game!
  24. 1 point

    Setter/getter usage in PIXI

    small stuff: 1. no need to extend Graphics, simple Container is enough in your case 2. PIXI.Sprite.from is not a constructor, you can omit "new". big stuff: your setters and getter are recursions. use `myRadius` inside, and in setter you have to check - if it was changed - "myButton.clear()" and make drawRoundedRect in it again.
  25. 1 point

    Way to build image pixel by pixel?

    const canvas = document.createElement("canvas"); //draw what you want to canvas.. //Build the basetexture, texture and sprite using the canvas const canvasTexture = new PIXI.Texture( new PIXI.BaseTexture(canvas)); const sprite = new PIXI.Sprite(canvasTexture); //Add the sprite where you want. If the canvas changes, you need to call update to basetexture. (Or it might detect it automatically, cant remember right now). And if you want to make it a bit faster you could use offScreenCanvas -element instead of canvas. Though that is not yet widely supported. https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
  26. 1 point
    @ivan.popelyshev Last 4 bites are: 1.-> Once right 1010 -> 6 2 -> Twice right 1100 -> 4 3 -> 3 times Right 0110 -> 2 4 -> Flipped Y 1000 -> 12 5 -> Flipped Y & Once right 1110 -> 14 6 -> Flipped Y & twice right 0100 -> 8 7 -> Flipped Y & 3times right 0010 -> 10 8 -> Flipped X 0100 -> 8 9 -> Flipped X & once Right 0010 -> 10 10 -> Flipped X & twice right 1000 -> 12 11 -> Flipped X & 3times right 1110 -> 14 32th bit => Flipped Y 31th bit => Flipped X 30th bit => Flipped Diagonaly There can be set up 3 flags at once. My final code for it. (Data) parm is Data taken from JSON. This is JSON Tiled export private checkTileRotation(data:number):number { if (data & Env.FLIPPED_VERTICALLY_FLAG && data & Env.FLIPPED_HORIZONTALLY_FLAG && data & Env.FLIPPED_DIAGONALLY_FLAG) return 14; else if (data & Env.FLIPPED_VERTICALLY_FLAG && data & Env.FLIPPED_HORIZONTALLY_FLAG) return 4; else if (data & Env.FLIPPED_VERTICALLY_FLAG && data & Env.FLIPPED_DIAGONALLY_FLAG) return 2; else if (data & Env.FLIPPED_HORIZONTALLY_FLAG && data & Env.FLIPPED_DIAGONALLY_FLAG) return 6; else if (data & Env.FLIPPED_HORIZONTALLY_FLAG) return 12; else if (data & Env.FLIPPED_VERTICALLY_FLAG) return 8; else if (data & Env.FLIPPED_DIAGONALLY_FLAG) return 10; return 0; } I tested it with all possible rotations and it works
  27. 1 point
    @ivan.popelyshev This is my code for rotation, it might not be the best way to do it but it works. /** * rotate single tile * @param data - Tile Data Id ((Taken from JSON) */ private checkTileRotation(data:number):number { let rotation = 0; if (data & Env.FLIPPED_DIAGONALLY_FLAG) rotation += 4; if (data & Env.FLIPPED_VERTICALLY_FLAG && data & Env.FLIPPED_HORIZONTALLY_FLAG) rotation += 4; else { if (data & Env.FLIPPED_VERTICALLY_FLAG) rotation -= 2; if (data & Env.FLIPPED_HORIZONTALLY_FLAG) rotation += 2; } return rotation; } // In LOOP (drawing) // now remove last 3 bits data &= ~(Env.FLIPPED_HORIZONTALLY_FLAG | Env.FLIPPED_VERTICALLY_FLAG | Env.FLIPPED_DIAGONALLY_FLAG); export enum Environments { // Flags for map -> Tiles (Rotation) FLIPPED_HORIZONTALLY_FLAG = 0x80000000, FLIPPED_VERTICALLY_FLAG = 0x40000000, FLIPPED_DIAGONALLY_FLAG = 0x20000000,
  28. 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
  29. 1 point

    Why is this not allowed?

    you wrote two lines , one makes something that is rendered, second renders. just pass different textures there one tick you'll do texture1->texture2 the second texture2->texture1
  30. 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.
  31. 1 point
    export class Camera { public static cameras:Camera[] = []; private _cameraFocus:any; public static activeCamera:Camera; private id:number = 0; private _pos:any = { x: 0, y: 0 } public zoom:number = 1; public canZoom:boolean = true; public zoomSpeed:number = 0; /** * Create a new camera for game * @param id - ID of Camera (Unique ID) * @param x - Position of camera * @param y - Position of Camera * @param scale - Scale of FOV (Zoom) * @param active - If camera is Active * @param follow - If camera should follow spirite/Obj */ constructor(id:number, x:number, y:number, scale:number, active?:boolean, follow?:any) { this.id = id; if (active) Camera.setActiveCamera(this); this.setZoom(scale, true); this.setPosition(x,y); if (follow) this.setFocus(follow); Camera.cameras[this.id] = this; return this; } /** * * @param camera - Camera Object (Optional) * @param id - ID param */ public static setActiveCamera(camera?:Camera, id?:number):any { if (camera) Camera.activeCamera = camera; if (id) Camera.activeCamera = Camera.cameras[id]; if (!Camera.activeCamera) { console.warn("Warining: Camera.setActiveCamrea - Cannot find active camera..."); return; } // Set View for camera Camera.updateZoom(); Camera.updateView(); return Camera.activeCamera; } public static updateView() { // change view only for active camera if (Camera.activeCamera) Game.scene.pivot.set(Camera.activeCamera.position.x, Camera.activeCamera.position.y); } /**** Camera */ /** * SetCameraView (Position X/Y) * @param x - X coords / global * @param y - Y coords / global */ public setPosition(x:number, y:number):void { this.position = {x: x, y: y}; if (Camera.activeCamera && this.id == Camera.activeCamera.id) Camera.updateView(); } /** Set position of camera * @param val -> Object with properities (x, y) */ public set position(val:any) { this._pos.x = val.x; this._pos.y = val.y; } /** * Get method for position */ public get position():any { return this._pos; } /** setFocus (focusing spirite/object) * @param obj - Object which are focused in camera FOV */ public setFocus(obj:any):void { this._cameraFocus = obj.position; } /** Remove focus */ public clearFocus():void { this._cameraFocus = null; this.setPosition(this.position.x, this.position.y); } /** * Update zoom of camera (FOV) * @param value - Value (Scale value) * @param update - force update screen */ public setZoom(value:number, update?:boolean):void { this.zoom = value; if (update) Camera.updateZoom(); } /** * call to Game.resize to correct values */ public static updateZoom():void { if (Camera.activeCamera) Game.resize() else throw new Error("ERROR: Can't update zoom because active camera does not exists!"); } public static update(delta:number, deltaTime:number):void { if (Camera.activeCamera._cameraFocus && Camera.activeCamera) { // Update camera position //this.activeCamera.position = {x: this.scene.pivot.x, y: this.scene.pivot.y}; } // Smooth zoom test if (Camera.activeCamera.zoomSpeed != 0) { let zoomSpeed = Camera.activeCamera.zoomSpeed > 1 ? 1 : Camera.activeCamera.zoomSpeed; Camera.activeCamera.zoomSpeed += zoomSpeed > 0 ? -(zoomSpeed * 0.15) : Math.abs(zoomSpeed* 0.15); if (Math.abs(Camera.activeCamera.zoomSpeed) < 0.2) Camera.activeCamera.zoomSpeed = 0; if (Camera.activeCamera.zoomSpeed > 0) { if (Camera.activeCamera.zoom < 2.5) Camera.activeCamera.setZoom(Camera.activeCamera.zoom + Math.abs(Camera.activeCamera.zoom * 0.01 * zoomSpeed), true); } else if (Camera.activeCamera.zoom > 1) Camera.activeCamera.setZoom(Camera.activeCamera.zoom - Math.abs(Camera.activeCamera.zoom * 0.01 * zoomSpeed), true); } } } This is my whole Camera class im using (it is only very basis) ill expand it later, maybe someone will use it. Thanks for the answer. Have a nice day. PS> Should be re-named to Viewport (camera does not exists in 2d i know :-D)
  32. 1 point
    Usually people who start to use resolution mess it up at least one time even with all the explanation on forums. Now you're part of our club, Welcome to the forums!
  33. 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
  34. 1 point
    Sky Alpha

    Exploding Shapes

    Very nice Game!
  35. 1 point
    Thanks a lot for clearing this up for me!
  36. 1 point
    If I understood correctly you want to animate habbo to coord1 in a loop and then continue the loop after animation is done? That is not possible with await as tween does not return a promise. You would have to have your tween in a separate function and have it return a promise and then have it resolve the promise in completion. That would make your code pretty complex for no good reason. I assume that you want to animate the habbo-character from coord1 to coordN right? You could do that with tweenjs chaining: const moveChar = (char,points) =>{ const tween = Tween.get(char); let coord = null; for( let i = 0; i < points.length; i++) { coord = points[i]; tween.to( {x:coord.x, y: coord.y}, 500) tween.wait( 50 ); //Wait 50 milliseconds before moving to next to make the movement nicer? } //Add callback to chain ending. tween.call( () => { console.log("FINISH: " + coord); }); } moveChar( this.habbo, [ {x:0, y:0}, {x:100, y:0}, {x:100, y:100}, {x:200, y:100} ]); If I misunderstood the problem please describe it a bit more. As usually having synchronous code requirement inside a for loop is an issue that should not happen when doing rendering related stuff.
  37. 1 point


    Your class should extend Phaser.Scene like this: class mainScene extends Phaser.Scene { // ... }
  38. 1 point
    Hello, For a game i'm working on i try to add lights, since 2 days now i read tutorials to make this works, without success. So I tried to apply the official example by entirely copying its source, and it doesn't work. It gives me a black screen without error message. I created a repository (For you to get images and libraries i used): https://github.com/ZauChoco/pixi-lights-bug How to fix this ? Thank you
  39. 1 point
    That's it. Thanks!
  40. 1 point

    Input in PIXI

    > I've googled but didn't really get what accessability module is in vanilla pixi I'm not sure how to activate() it myself, I didnt use it ever. It just has piece of code to light up active element with TAB key. Here: https://github.com/pixijs/pixi.js/blob/dev/packages/accessibility/src/AccessibilityManager.ts#L385 Pixi is not react: stackoverflowing will get you only basic answers. You have to dig inside sources of both main lib and plugins in wiki to get samples of code. We are guys like you, we write this code by experience. Yes, ThreeJS has better folder for examples, but even there you have to look in sources and search there very often.
  41. 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)`
  42. 1 point

    Input in PIXI

    OK I know it's a renderer. Not complaining at all I just wanted to figure out how to go further in pixi.js. Thank you for the information I've googled but didn't really get what accessability module is in vanilla pixi (I mean whatever I found doesn't really seem to be what I was looking for). I've found this https://github.com/brean/PIXI.DOM.Sprite plugin. Not sure yet if it's compatible with the current version of Pixi. Thanks for your time. I'd be very grateful if you go into details a little bit more 'cause I kinda feel lost. Finding some examples would be awesome too!
  43. 1 point
    Edit. Payment Complete Thanks.
  44. 1 point
    Sorry for my late reply here, guys. Haruka, you have my e-mail please reach out to me directly. PJ I will reply to you in private.
  45. 1 point
    @b10b I try to share what I know. We're in a forum for doing this, after all.
  46. 1 point

    topic pending approval

    Guys, who is moderating jobs-hiring-and-freelance ? I posted a topic 20 hours ago and it is still "pending approval".
  47. 1 point

    Pixel Perfect Fonts?

    Hey all, So I'm wanting using a web font in my Phaser project, but I'm noticing that when using the font in-game, it's automatically applying some sort of smoothing? When rendering straight onto the page outside of the game, the font comes out perfectly crisp when using "-webkit-font-smoothing: none;" See the attachment. I took a look into the Text game object and I'm seeing a "resolution" member, though doing "textObject.resolution = <number>;" doesn't seem to have any effect. Not sure if I need to run an update once I do that though. Do have other options available? Secondly, how do I go about setting the global/default font so that every text object will use the font I specify?
  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