Popular Content

Showing content with the highest reputation since 05/03/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

    Cross origin problems with video

    I needed to add: const myLuckyVideoElTmp = document.createElement('video'); myLuckyVideoElTmp.preload = "auto"; myLuckyVideoElTmp.setAttribute('crossorigin', 'anonymous'); Now it works
  3. 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.
  4. 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.
  5. 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
  6. 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.
  7. 2 points
    Never mind, this can be handled by @expo/browser-polyfill
  8. 2 points

    Graphically debugging physics

    You'll want to set debug to true in your game config for arcade physics: const config = { type: Phaser.AUTO, physics: { default: 'arcade', arcade: { debug: true } } // other settings... }
  9. 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.
  10. 2 points

    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?
  11. 1 point
    Your solution worked out. Thank you for your great work, best wishes to you ❤️ P.S Герои короновируса (твиттер) были смешными
  12. 1 point
    ParticleContainer with sprites can survive this. For statics you can also put everything in several graphics instead of 10000. For real static small images you can use pixi-tilemap. I recommend to go through https://webglfundamentals.org/ if you want to understand canvas capacities No, we dont have pixi version of it yet
  13. 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
  14. 1 point

    pixi-layers clarification

    Ok I think I understand the intention now, thanks Ivan!
  15. 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.
  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

    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!
  19. 1 point

    Sprite sheet maximum size

    Anything below or equal to MAX * MAX is quaranteed to work (almost always, unless something is wrong with the gpu/driver). Going over either of those (even if decreasing another) might work or might not work. From the khronos specifciation: "The value gives a rough estimate of the largest texture that the GL can handle. The value must be at least 64. "
  20. 1 point

    WASM in pixijs

    Just wondering if Pixijs currently has or is planning to use WASM for its core library? Been a little while now and WASM has pretty good browser support, game engines are good candiates to get some of its benefits and wondered if this was something that would happen or would mind someone tinckering with maybe in the community?
  21. 1 point
    Thanks, I'll look down Observer route.
  22. 1 point
    Previous thread: Solution: "That is the problem out of scope of pixijs. https://github.com/bramstein/fontfaceobserver/"
  23. 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.
  24. 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.
  25. 1 point

    Get the real width of an image

    When you're not using a preloader... the width is 1 until the image had been loaded. We can't know the true width of something if it's not been loaded yet. When it has, an event on the texture is fired and the true value can be known. If using a loader, then it'll give you the references to things it loads which you can pass in elsewhere. The built in loader will add textures loaded into PIXI.utils.TextureCache that you can reference from anywhere.
  26. 1 point
    Dr Popet

    Canjump - One Button platformer

    I just love one button games, nice game!
  27. 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" />
  28. 1 point
    https://pixijs.io/examples/#/textures/texture-rotate.js 0,2,4,6 rotations 8,10,12,14 flip-y then rotate you flips are below 8, that isn't correc on its own, vertical is 8, diagonal is 10, horizontal is 12. just make three IF's for flags and set rotation to one of those . There shouldn't be two flags active at the same time, right?
  29. 1 point

    Why is this not allowed?

    use two renderTextures, one of them is active. re-render one to second. I use that in pixi-layers: https://github.com/pixijs/pixi-layers/blob/master/src/Layer.ts#L68 , however my particular implementation somehow fails in v5, i didnt investigate yet If you learn how to do it with two textures and changing sprite texture every time - you can go even further and try to make a fake texture that points to one or another, here's the trick from the same file: if (group.useDoubleBuffer) { renderer.texture.unbind(rt); this.currentBufferIndex = 1 - this.currentBufferIndex; let buffer = db[this.currentBufferIndex]; (rt.baseTexture as any)._glTextures = (buffer.baseTexture as any)._glTextures; (rt.baseTexture as any).framebuffer = (buffer.baseTexture as any).framebuffer; } anyway, its not possible without two renderTextures. PixiJS does have flip-flopping only in FilterSystem and its not usable outside
  30. 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! 🙂
  31. 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
  32. 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.
  33. 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
  34. 1 point
    Btw, performance-wise I dont think it can be done more optimally than that without very big efforts, and only one fullscreen filter (with padding) does not consume much. If you want to save use battery, you can render frames only when text was scrolled, you can write that "optimization" at any time
  35. 1 point
    Try `filter.padding=10` . but pixi v5 fits to screen before it pads the area, so its better to do it yourself: container.filterArea = element.getBounds(true, element.filterArea); container.filterArea.fit(renderer.screen); container.filterArea.pad(10}; //maybe more if you see that effect again where container is your "app". I just dont want to post it that other people will copy and they have "app" as Application usually its good that you dont use that mashup class
  36. 1 point


    Your class should extend Phaser.Scene like this: class mainScene extends Phaser.Scene { // ... }
  37. 1 point
    Oh, that! That's one of basic exercises with transforms, solves with javascript functions "Math.min" and "Math.max", or pair of IF's. sprite.position.set(app.screen.width/2, app.screen.height/2 ); //same as your innerWidth sprite.anchor.set(0.5); sprite.scale.set(Math.min(app.screen.width / sprite.texture.width, app.screen.height / sprite.texture.height); PixiJS does not have its own alignment/reflow system. Dfiferent people write it different way => we supply only basic transforms.
  38. 1 point
    On both questions: those are questions for author of https://github.com/englercj/resource-loader/tree/release/3.x , @xerver resource-loader is an kind of independent lib, and every time I do any advanced operations with it - I look in the sources (in pixi case 3.x branch), because its really easy to look through it than to ask question of why it was done this way. If you ever made your own loader - it could look like that. Things like parentResource, how load event is emitter are not possible to memorize, its pure experience stuff. The best way to solve issue fast is to go through issues in pixi with that filter: https://github.com/pixijs/pixi.js/issues?q=is%3Aissue+loader+ Pixi is not a black box - you can place breakpoints in certain places, look in sources, add watches, e.t.c. and in loader case its al. The most difficult loader middleware is spine - https://github.com/pixijs/pixi-spine/blob/master/src/loaders.ts , and even with docs that were made by people with experience https://github.com/pixijs/pixi-spine/tree/master/examples - every time something goes wrong and you have to debug it. I dont believe its a fault of resource-loader itself, its just the whole topic of how to load stuff and parse it isn't theoretical, its pure practice and debug.
  39. 1 point
    After looking through the docs I realized there's a function that solves my problem. I called: game.physics.arcade.moveToObject(bubbleBullet, bubbles.getAt(0), 800); this grabs the first spawned bubble (therefore closest to the cannon) and has the bullet move towards it.
  40. 1 point
    Dr Popet

    Test your Might

    Based on the bonus game of Mortal Kombat 1 I made this little game. I just start learning HTML5 and Javascript and this is the 2nd game I made after I learn about variables. http://c1ic.mx/TYM/ I hope you like it
  41. 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
  42. 1 point
    Hi, i want to be a html5 game publisher for my new app. I've contact with some of developers (famobi, gamepix etc) and most of them wrote me for payment i have to send them invoice. Does anyone know how will i send invoice? what i need for it? thanks
  43. 1 point
    Potato King

    [Open-Source 2D MMO] Kaetram

    Kaetram Kaetram is an open-source game-engine created to aid those interested in entering the game development realm. The codebase is simple, clean, and intuitive. This project is intended to be used as a learning tool. The original idea is based on Little Workshop's demo game – BrowserQuest (BQ). This game uses original BQ assets as well as custom-made ones. The entire code-base has been written from scratch, using more modern approaches. GitHub Repo – https://github.com/Veradictus/Kaetram-Open Live Version – https://kaetram.com Join us on Discord – https://discord.gg/MmbGAaw Patreon – https://www.patreon.com/kaetram Features BQ was intended as an experiment to showcase HTML5 capabilities, since then, technology has only served to advance. Kaetram contains a lot of ideas and features that builds on top of its predecesor, a couple are: Multiplayer using Socket.IO Enhanced rendering engine (includes dynamic lighting, overlays, animated tiles) Region system (client receives only necessary data and saves it) Questing and achievements system. Plugin-based combat system (for bosses/special enemies). Supports RESTful API. Discord server integration. Cross-server private messaging and interactions. And much more Regions The region system sends data to the client according to the map data of the server. The collisions are checked both server-side and client-side to avoid cheating. The region system makes use of dynamic tiles, which are unlocked according to a player's progress. Furthermore, there is integrated support for instancing, where we can use a section of the map (or clone it) and reuse it for certain groups of players. The instancing is perfect for activities such as minigames, where we will want to run multiple instances in parallel. Tilemap Kaetram is built with modularity in mind, as such, the client supports multiple tileset parsing. The tilemap can easily be constructed using Tiled Map Editor. Using our map parsing tool you can easily export your creation to both the client and the server. Kaetram Hub There is also support for a hub server. This can help connect servers across one another, allowing players to interact with their friends across them in a variety of ways (private messaging and guilds). Furthermore, the hub serves as a gateway for determining what server to place players in. If a server is full, it simply returns another server that has room for the player.
  44. 1 point

    Video plugin

    Play MP4 videos in your games. Download: https://www.panda2.io/plugins/video
  45. 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.
  46. 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.
  47. 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".
  48. 1 point
    @KoolieTheKangaroo just use dark tint. https://github.com/gameofbombs/pixi-heaven
  49. 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.
  50. 1 point

    Gradient shader

    Hi everyone ! I have a small gift for you Here is a small gradient shader : http://www.babylonjs.com/cyos/#LFNPG And here is the application of this gradient shader on a skybox : http://www.babylonjs.com/playground/#1G2LLJ Update the colors as you wish. It may be useful for some of you. Cheers !