Popular Content

Showing content with the highest reputation since 05/20/19 in all areas

  1. 2 points

    SpriteStack - 3D Pixelart Editor

    Ahoy there. I have just released a standalone version of my voxel editor where you draw models layer by layer like a 2d image. It features very neat spritesheet exporter with my handcrafted retro renderer made in WebGL. Please take a look at https://spritestack.io/ to get more info. I am also glad to anwser any questions.
  2. 2 points

    3d Highway Racer

    My 3d game in html5. Looking to provide non-exclusive licenses of this game https://playcanv.as/p/f5b2f1db/ Contact me for more details: arif@dumadu.com
  3. 2 points
    Thank you for your answers! I was thinking about creating a custom tools, but I figure this should be a fairly common issue so there had to be a solution out there I didn't know about that PS to Spine exporter, that looks really promising! I'll take a look at it! Thanks!
  4. 2 points

    Cardlings, a digital board game

    Hi everyone I've made a tactical strategy game (single and multipalyer) with the help of some very talented people, including some active users of this forum too. The game will be availble on Steam from June 5th for Windows, MacOs and Linux. Android and iOS versions will follow. Please check out the Steam page or the game's official site for more info. The game was made with our own game engine (WADE) which is free to use if you want to make your own games with it. I'll be writing some blog posts about the development of the game (what went right and what went wrong) as soon as I get a chance.
  5. 2 points
    Trump's Wall Game started out as a joke but somehow manifested into something that is...still a joke. It's a persistent world with one thousand nine hundred and sixty virtual miles along the border. Choose either the red team (builds wall) or the blue team (breaks the wall). Then go nuts and build or break away. Trump's Wall Game is a living breathing thing so any changes you make will be reflected for the rest of the world to see. Oh, we also hired a Trump impersonator to do the voices. That in itself is worth checking out. Enjoy! Play the game here: https://meowyorktimes.com/wall.html Game was created by a three man team in a few weeks. A designer (me), a developer and an artist.
  6. 2 points

    Text smooth scaling / text mipmaps

    I'm glad you that my old plugin can offer some help It is still at an early stage and only tested in pixi.js v4.7. Don't even have a README yet. Since pixiv5 have breaking changes in mesh & bitmap font classes, I still need time to learn and adapt. PR is welcomed! Take this snippet as a quick-start if you don't want to clone my repo and build it yourself: https://jsfiddle.net/g04xLqdh/ BTW: Here is a command line tool to help you generate MSDF bitmap font assets: https://github.com/soimy/msdf-bmfont-xml
  7. 2 points

    Making GUI in 2019 with Pixi

    Do the right side with react, field with pixi. problem solved. The biggest collection of pixi ui elements is https://github.com/pixijs/pixi-ui/ but its not documented nor is it moved to v5 and typescript yet. Text input: https://github.com/Mwni/PIXI.TextInput SDF fonts: https://github.com/PixelsCommander/pixi-sdf-text , https://github.com/avgjs/pixi-richtext We are working on moving all plugins to v5 and we are making new tutorials. I hope in half of year we'll have complete set of stuff for games, but right now its not the case, so go for React to save time.
  8. 2 points
    Are you sure you didn't turn on Battery Safe Mode when trying Cordova?
  9. 2 points
    I wrote an article on this. Thoughts welcome! https://medium.com/@michelfariarj/scale-a-pixi-js-game-to-fit-the-screen-1a32f8730e9c
  10. 2 points

    Redrawing only when needed?

    I have a method where I have two different changes that can happen in the scene. Tweens and handlers that get run every frame. For tweens I check if amount of active tweens creater than 0, then it means that something is changing. For onrender-handlers I have a custom component that allows for components to register themselves to get onrender -events and their return value will tell if something has updated. If either tween has updated or any of the components requires rendertime, then that frame is rendered. Otherwise no render will occur. In some cases this can be improved by splitting the scene into multiple canvases. One that gets updates rarely and one that holds the actual gameplay and is updated frequently. Though using that method is something that should be clearly thought out beforehand or you'll end up with multiple canvases to render each frame. Having render loop stop completely is something that you shouldn't do. As calling requestanimationframe is really cheap and not worth the trouble to build a mechanic with renderloop cancellation. Easier to just skip rendering on frames that dont need it.
  11. 2 points
    Anchor and Pivot are your friends. If you don't wish to use them because you want to maintain left alignment then consider using a child Sprite, or other arrangement of Containers. Then you can freely adjust the anchor (or pivot) of any child, do the transformation as would be intuitive and the parent will be unaffected. There is minimal overhead in using children and they can improve code readability and maintenance. The alternative (using a single Sprite) involves translating (x=-width) before the flip (scale.x*=-1) or rotation, then translate back again when done. It's unlikely to feel as intuitive - and is likely more prone to mistakes or confusion later?
  12. 1 point
    Working on porting code from an old angular app to vue and am very new to PIXI. Upgraded PIXI to latest version. Issue I am facing is, the page renders fine the first time but when I go away from the page and come back I see this error in console: I am using the loader as so: const PIXIloader = new PIXI.Loader() I tried using PIXIloader.reset() before calling the PIXIloader.add() but doesnt seem to work and when I console.log the PIXIloader I still see the resources in the loader. If I manually reload the page it works fine.
  13. 1 point
    > I am indeed rather new to open source and had some skittishness about digging into libraries. I'll abolish that effect - for the future, when overriding a Pixi class, do you modify the js file directly or some other method? PixiJS is focused on source-code , we have very good selection process for PR's and dont allow strange things that most people cant understand into it. you can extend class (override), you can patch it like "PIXI.AnimatedSprite.prototype.xxx = function() ... " or you can build your own pixi fork. I know big project with modified pixijs file, it happens.
  14. 1 point
    @linhcophu I believe that every API has a sample code in the documentation I shared with you (shareAsync does, at least)
  15. 1 point
    Using pixi.js v5, I'm trying to fill a polygon with about one hundred vertices using Graphics.drawPolygon(), but the polygon is drawn incorrectly. When I reduce the number of vertices to about 50, then the polygon is drawn correctly. Is there any limit (near 100) to the number of vertices that Graphics.drawPolygon() can draw? Thanks.
  16. 1 point
    Finally I found the solution in 43061-poor-performance-on-panning. My polygon coords where too big (in the order of 10^8). What mostly misleaded me was that batched polygons where draw ok, but not batched ones where drawn wrong. I've solved the problem by making graphics.position equal to the polygon center and, consequently, reducing polygon coords in the order of 10^4. Thanks for your help.
  17. 1 point
    https://bugzilla.mozilla.org/show_bug.cgi?id=1501142 Well it's nice to know it's not my game. I almost wonder if it was a design choice by someone for a reason since they capped it purposefully at 16, maybe to prevent some forms of memory being called for that was cleared up for some reason idk, keeping 16 refreshes in memory isn't the most common choice here tho. Thanks for the help! Learned something and got relief it wasn't my game causing it.
  18. 1 point
    it maybe a engine issue. Firefox use mozilla right ? chrome,edge,vivaldi use chromium engine. maybe try search in the web with thoses keyword. `mozilla` `memoryleak` `canvas` `webgl` `refresh`
  19. 1 point
    when exactly do you create Application or Renderer?
  20. 1 point
    did you have the same thing if you do Ctrl + F5 orCtrl + Shift + R this shortcut refresh with empty cache.
  21. 1 point

    Poor Performance on panning

    there are culling libraries on github for pixijs. The complexity of implementation depends on whether you need to move those polygons later, or they are static. Simple FOR with checking all the bounds maybe enough in your case, if you dont run it EVERY frame. Store a "loaded" part of the map, and if camera hits the edge, re-calculate which polygons should be "renderable" and remember which rectangle did you "load" this time.
  22. 1 point
    On my team, when making games with PixiAnimate, typically there needs to be a fair bit of communication between the developers and designers. One thing that can make this process easier, especially with designers less experienced with Animate is if the developer creates a structure in Animate with "programmer art", with instances names, etc already in place that the designer can then open up and make changes to. This way, there is already functionality for things like buttons and the designer can see their changes in context right away. Early in a project, there needs to be a tight communication loop between designers and developers, but toward the end of the project, it's very easy for designers to independently go in and make updates. PixiAnimate is open-source, so while it's not totally in your control, you could start using your own fork of the plugin (not preferred), or make improvements and submit a pull request back to the main project (much appreciated!). PixiAnimate is not the perfect tool for every project, but it is great for getting designers more involved throughout the project, taking a lot of the burden of making visual updates off of the shoulders of developers. The biggest "gotcha" bug I'm currently aware of is with text objects on an animated timeline - there are some issues with exporting the positioning of text when its position (or existence) changes over the course of a timeline. This can be worked-around by containing the text in a Symbol before animating it. PixiAnimate is not yet compatible with Pixi.js v5, which was released about a month ago, but I expect to have it updated by the end of the summer. For validating naming conventions, perhaps you could try writing a JSFL script to run as a Command in Animate. Speaking of JSFL scripts, this one is very useful for working with PixiAnimate, it non-destructively converts a layered timeline into bitmaps (and also back to the original art), which is useful if you have complex vector or compound bitmap graphics, or need to rasterize an large object at the size it is being used: https://github.com/SpringRoll/FlashToolkit/blob/master/src/Commands/Utilities/Copy Layers To Bitmap.jsfl
  23. 1 point
    @b10b Oh you are right, it is documented (thus it should work). I understand your use case, it makes sense. Would you mind opening a bug report on our bugs tool? https://developers.facebook.com/support/bugs/
  24. 1 point
    You mean 7 offline bots.
  25. 1 point
    @ivan.popelyshev I followed your suggestions and pixi started to work. Thanks!
  26. 1 point
    Firefox as well as Chrome both have some strange layout sizing problem .... This is a screen I stuck after loading complete (buttons/clicking doesn't work) Oh i'm sorry i didn't notice this...
  27. 1 point
    ok, what do i see here: 1. app has no `autoStart:false` but at the same time you use custom RAF. please read https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop to avoid that kind of problems in future 2. when you assign container pivot its width and height are zero I don't even know why do you need center pivot without center screen position here. Just delete those lines. 3. you use default canvas width/height which is 800/600 i think. Your image will be pixelated or blurred depending on CSS. Use "renderer.resize()" instead of just css stuff if it evolves into a problem. 4. new PIXI.Sprite.from - from is not a constructor, its a static function . in your case you need "new PIXI.Sprite(texture)". Even with all those problems you should see an image, but you dont! That means that my telepathy didnt pick up your issue. Please make a demo so I or someone else can debug it.
  28. 1 point
    @ivan.popelyshev, I think you were right to question the pixel width and height! I looked at the blue arrow png and it was 1920x1080 because of a ton of extra transparent space around the arrow. I edited it down to a much smaller resolution in Photoshop instead of scaling it down in Pixi and now it shows up again! I think this means that the canvas has trouble drawing pngs that have a greater original width or height than the canvas itself in Cordova's WKWebView.
  29. 1 point
    pixijs v5 typings are in the same pixi.js package. You dont need to install @types
  30. 1 point
    Keep a list of points and only draw the section you actually need to show. That way you wont need to upload a very large amount of vertices to gpu. Another way to optimize a large set of lines would be to use rendertextures, though if the lines are dynamic then that wont be of help. But for static lines you could build a rendertexture for every 2048 (or lower) pixels and draw the line into that, then clear the line and start drawing again. Then when the old portion would need to be shown you could just use that texture instead of a line.
  31. 1 point
    I have a general idea about that kind of things. "maintain a window of x2 camera size, refill or spawn new elements when camera touches it, move the window.". I have implementation here : https://github.com/ivanpopelyshev/pixi-starfighter , but it requires hour or two of investigating the tilemap. Its very rare that people understand this thing from one sentense , but I do not have any other ideas how to explain it except that code. You need a window and if there are lag spikes - you need to add chunks to it.
  32. 1 point
    The problem with that is that the line gets really long as new points are added to it and old points are not removed. Do you need to have it scroll back? If not, then you could keep track of all the points line needs to draw and clear the line graphics every time new line is added and remove the points that have gone past the screen.
  33. 1 point
    I dont want to think about it, i just switched the tab and switched it back and saw a problem, It doesn't matter, in long run you'll fix it somehow. I could have solution ready for you but i dont
  34. 1 point
    Here's project without docs : https://github.com/eXponenta/pixi5-playables-boilerplate , it has big number of hacks to store everything in one file, I'm sure you can strip it down to make an example. Dont forget to star it. It has gulp, but I dont think its possible to survive with just browserify. For example, I have projects that rely ONLY on typescript, but I never had something that has only browserify+ts, its usually more than that.
  35. 1 point
    I'm sure your thread was noticed but its difficult to answer right now
  36. 1 point
    Here is one example: https://github.com/llorenspujol/parcel-pixijs-quickstarter Is a simple quickstarter project with PixiJs and Typescript using Parcel. Here are it's default scripts: "test": "karma start", "start": "npm run clean && parcel src/index.html", "build": "npm run clean && parcel build src/index.html --public-url ./", "build_serve": "npm run build && http-server ./dist", "clean": "rimraf ./dist ./.cache" In order to build the project just run 'npm run build'. If you want also serve it, just run 'npm build_serve' (it uses http-server in order to serve it as you). About the disk space, having the dependencies globally is not the best solution and it has a lot of troubleshoots. There are many other ways in order to 'share' dependencies between project more safer and efficient than that. You can have for example a 'monorepo' like infrastructure, in order to achieve it. Check it out yarn workspaces and the lerna project, I am sure it will make you re-think the way you are managing your projects. One HUGE advantage of that, is that it will enable you to share ALL your dependencies, not only Browserify and Typescript. With this improvement, you will no longer need to zip/unzip your project anymore, since most of the MB you see now when zipping/unzipping are from the node_modules. So in resume, check it out to move your examples into a monorepo-like infrastructure. With that, you will solve 2 problems: 1- Share ALL dependencies (and do it safely), since now you are only sharing Browserify and Typescript (as far as I know) 2- Avoid zipping/unzipping your project, that I am sure that is a costly extra step. That of course you can automatize or whatever, but you can get rid of it with this solution. If you need some help about that 'monorepo-like' infrastructure, you can DM me.
  37. 1 point
    i use this on my side But my app are intended to be played in full screen, frame and scale mode are luxe feature. requestFullScreen() { var element = document.body; if (element.requestFullScreen) { element.requestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } this._fullScreen = true; }; cancelFullScreen() { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } this._fullScreen = false; }; scaleToWindow() { const canvas = this.view; let scaleX, scaleY, scale, center; scaleX = window.innerWidth / canvas.offsetWidth; scaleY = window.innerHeight / canvas.offsetHeight; scale = Math.min(scaleX, scaleY); canvas.style.transformOrigin = "0 0"; canvas.style.transform = "scale(" + scale + ")"; if (canvas.offsetWidth > canvas.offsetHeight) { if (canvas.offsetWidth * scale < window.innerWidth) { center = "horizontally" } else { center = "vertically" }; } else { if (canvas.offsetHeight * scale < window.innerHeight) { center = "vertically" } else { center = "horizontally"; }; }; let margin; if (center === "horizontally") { margin = (window.innerWidth - canvas.offsetWidth * scale) / 2; canvas.style .marginTop = 0 + "px";canvas.style .marginBottom = 0 + "px"; canvas.style .marginLeft = margin + "px";canvas.style .marginRight = margin + "px"; }; if (center === "vertically") { margin = (window.innerHeight - canvas.offsetHeight * scale) / 2; canvas.style .marginTop = margin + "px";canvas.style .marginBottom = margin + "px"; canvas.style .marginLeft = 0 + "px";canvas.style .marginRight = 0 + "px"; }; canvas.style.paddingLeft = 0 + "px";canvas.style.paddingRight = 0 + "px"; canvas.style.paddingTop = 0 + "px";canvas.style.paddingBottom = 0 + "px"; canvas.style.display = "-webkit-inline-box"; return scale; };
  38. 1 point
    I can explain what I want using the example. This example uses Babylon.js, TypeScript and it draws a cube. You can run it on Playground: click to run This is an archive with source code: color-cube_babylonjs-typescript.zip This archive requires only 1.34 MB. If you unzip it you will see that it requires 7.52 MB. It is good because it allows to create a lot of examples for studying and it will not spend a lot of space on my laptop. If you have the browserify and typescript that is installed globally you can bundle the "Program.ts" and "Game.ts" files using this command: npm run release-client The "bundle.min.js" file will be created in the "dist_client" folder. You can just open the "index.html" file in your browser. I use "http-server" module to run examples. I need a similar archive with very simple Pixi.js example that contains a few TypeScript files. My "release-client" command looks like this in the package.json file: "scripts": { "clear": "rmdir /s /q dist_client", "compile-debug-client": "tsc -p tsconfig.debug.client.json", "compile-release-client": "tsc -p tsconfig.release.client.json", "bundle-release-client": "browserify dist_client/Program.js -o dist_client/bundle.client.js", "uglify-release-client": "uglifyjs dist_client/bundle.client.js -o dist_client/bundle.client.min.js", "release-client": "npm run compile-release-client && npm run bundle-release-client && npm run uglify-release-client" },
  39. 1 point
    Russian english here. Thank you! I just had a trip through Sochi, Barselona, Ibiza and Palma visiting major pixijs users and helping them for food I'll board plane to Moscow in a hour. hm, looks like CoffeeScript is the thing that you need 😃 CakeScript doesnt exist, unfortunately. TS is good for people who came from Java/C#/ActionScript3. However it adds complexity for all the tools and plugins. I use TS only with namespaces and simple concatenation with "tsc" tool. I copy "ts.d" files into separate dir to know for sure that typings that i use correspond to the version. It really helps if you have like 50k or 1m lines of code. Yes, you need balance between configs and language. People prefere very difficult configs and tools right now, I'm stick to basics. "references.ts", "tsconfig" and "ts.d" files are analogues to makefile, configure and includes. And webpack is piece of .. js tech.
  40. 1 point
    1 should work, you can just add "app.stage.scale.set(yourScale)" and change position if you want to add letterbox. Usually I position canvas itself, and scale the stage.
  41. 1 point
    I've been struggling to find a bit of paid work lately, so I have been working on a set of assets that I intend on packing up into an asset pack, the character is in the style of a project that I am currently working on in Phaser 3 titled: "Karzak The Slayer" where you play as a barbarian that has had his victory feast stolen by some mischievous goblins. The tile are nothing alike that project's tiles but any way, I was hoping to supplement the income I have from the days or work I find labouring here and there or odd contracts and this was the best way I could come up with. I started thee project when I was homeless which wasn't too long ago, and a friendly donation from a member of a game development community helped me out of that situation, where I am now under a roof and attempting to get things back up and running, struggling to find work is quite stressful and having my laptop stolen recently, I lost much of the work I would have used for my portfolio, so I decided to start this as a new portfolio piece and as a potential trickle of funds that I would divert to things like my Karzak project IF it gets anywhere. I started this post because I don't quite know of anywhere to post about it, collect feedback or opinions and the like, being an artist I struggle to think of what a programmer or non-creative would consider when looking for a pack of assets for use in any kind of development. I have tried many places like the itch.io devlogs, facebook and other sources to attempt to get some feedback, but people just like or share and rarely read the posts on facebook, which doesn't help when you're seeking information! So if any of you have some time (I apologize in advance if this isn't a good place for this kind of post) I do have some questions not only regarding where would be best for this kind of discussion but about the pack itself (I will share links below) To consider purchasing an asset pack, what do you consider essential? When looking at a character's animation set for a project's prototype asset or final asset, what animations are rarely there when you're developing your prototypes and have bought an asset to use? Do you prefer to get a whole set of assets intended to be used together or do you mix and match? ... I do have more questions but I have a doctors appointment that I cannot miss and time is getting on, I will add more later. Asset Pack Previews: Album link - https://imgur.com/a/r4qs6Dy The above link contains animation previews of both the character and a handful of the enemies, UI previews and some basic tiles I've made. All of the tiles are at 16x16. Monkey Boy Character Asset: I genuinely struggled when it came to the character, I had no idea of what to create, my mind was completely blank, but I didn't want to sit around doing nothing and I hit a creative block in the level design for my project Karzak, so I felt that I needed a little break... Anyway, a random thought came to me about Monkeys and so I decided to make a Monkey-like-Man or as it turned out, boy, and that's how the character was spawned into existence. The style of Karzak was well received and that was just with the prototype art so I decided to use a similar style with these assets and I hope that is instilled in the character, these previews above are not finished though and will get a lot of polish before they are released, but that style will remain the same throughout. Hopefully you can tell that the run style is intended to be a man/boy mimicking a monkey's run. The animations that caused most issue where the jump which there isn't a preview for yet, and the death, I couldn't figure out how I wanted it to look, there will likely be multiple death animations eventually though as I intend on updating the pack a little even once the baseline set is polished and released. At first I wasn't quite sure about the character, I was really unsure in fact about how it looked but it grew on me and now I quite like it! The Snail Enemies: The idea is that these enemies would be able to transition to a vertical climb obstructing the player at times or causing the player to have to get hurt to avoid a greater or stronger enemy, but these blue ones can only move in one direction, whereas another coloured variant would be able to turn around and move the other way, following the direction of the player but sticking to whichever surface they are still on. There is intent on adding an enemy that does this but can hop to local tiles in pursuit of the player. There is a slime enemy that is not yet finished, A giant fish that leaps out of water to get to the player across certain deep water gaps, plant based enemies that are ranged and melee that can leap out of the background to strike the player based on many variations in mechanics or triggers. Conclusion: There is still a great deal of work left to finish on these assets, and it is at this point, taking some time away from my project Karzak, but I am having fun and hopefully it helps a little in the long run with supplementing a little trickle of funds towards it. In any event, it will help me update a new and fresh portfolio with some content that is consistent. I hope to get some feedback from potential users or people that have used assets in the past. -------------------------------------------------- Karzak The Slayer: Title Screen Logo - https://imgur.com/8jLPwa0 Character & Enemies - https://imgur.com/l8yYjHY Old Phaser 3 Demo Screenshot - https://imgur.com/S0fseQt Karzak Animations - https://imgur.com/wIcLPmz Updated Tiles (Style) - https://imgur.com/g4jROEN - https://imgur.com/ruoXbVn -------------------------------------------------- Random animation samples: Goblins - https://imgur.com/a/BwZS3 -------------------------------------------------- I hope you're all having a good day and developing some awesome projects! Kind Regards, Patrick.
  42. 1 point
    That's one of big problems with text. WebGL and animated vector text aren't made for each other. Text texture never mipmapped because we cant be certain if texture are pow2, and pixi-v4 cant just change the filtering on fly. Did you read "Text" code? you can actually hack it that way the canvas size is pow2, and PIXI.Texture takes only part of its area. If you go further in Text code you'll see how it works - it actually renders canvas2d css text and uploads stuff to videomemory only if it was changed (changes texture updateID). If you store some FIXED pow2 size, and set the mipmap, pixi-v5 can also generate new mipmaps every time this things is updated, but I'm not sure about v4. That way there'll be no allocations. There are many ways to solve those issues, like sdf, msdf, I have experimented with them a lot, but I cant teach you all that in 5 minutes. You have to spend time to get good result for your case, because its not the easy task.
  43. 1 point
    Thank you! It is in the plans, although I did not have much time for development lately, so I cannot promise it will come soon. I have some changes already done for the next version (touchscreen controls and some important fixes for broken rendering on certain machines and more music tracks), which can be expected soon, but collision is not included yet. I do have some ideas for a solution that might work decently enough and would be fast enough for the browser, if that works out, I could push it out in the next months.
  44. 1 point
    Bad experience. If you are looking for traffic only, you know another website to promote yourself, your games, yes it's a good site. If you are looking to make good money, just stay away. If you are looking to get paid.. Wait.. Wait.. Wait.. And if you are lucky will you paid.. some day.. .. And the best part is this: If you decide to delete any game or all your games from their system, then you need to wait 3 or more months. Best part, i told you.
  45. 1 point
    https://github.com/jsfehler/phaser-ui-tools This is something I worked on a few months ago to refine my javascript knowledge and eventually my ES6 knowledge. It came about after I realized I kept needing some of the same things in my Phaser projects. It contains the following classes to make building a UI in Phaser easier: - TextSprite - TextButton - Column - Row - Viewport - Scrollbar - Valuebar - Quantitybar - Wheel3D For many projects, it may make more sense to build the UI in HTML and overlay it. I'm not making an argument for that one way or another. These classes satisfied my use cases, and I hope someone else finds them useful. Phaser UI Tools is available under the MIT license, so feel free to use any parts of the code in your own projects in whatever way you'd like. However, if you do anything that improves or adds to what's here, I'd always appreciate a Pull Request. I consider this project relatively complete, so I won't be building any completely new features in the future, but I'll answer any questions and try fo fix any bugs that are reported.
  46. 1 point

    Scaling the canvas for pixel art

    it's much more easier with Phaser 3 in you config, just add: pixelArt: true, zoom: 4, pixelArt option to true will prevent the texture to blur when scaled, and zoom will scale your whole game. here is the game I'm working on. It's designed in a 128 x 96 resolution, and is scaled up 5 times, it works like a charm! const config = { type: Phaser.WEBGL, width: 128, height: 96, parent: 'game', backgroundColor: '#1b2632', zoom: 5, pixelArt: true, physics: { default: 'arcade', arcade: { tileBias: 4, gravity: { y: 250 }, } }, };
  47. 1 point
    Tom Atom

    rotate sprite along z-axis

    Tween with yoyo should do all the job for you! Let's say, you have coin atlas and two sprites in it: "front" and "back". Then you can listen to onComplete and change frame in it: var sprite = game.add.sprite(0, 0, 'coin', 'front'); sprite.position.set(100,100); sprite.anchor.set(0.5, 0); var tween = game.add.tween(sprite.scale).to( { x: -1 }, 1000, "Linear", true, 0, -1, true); tween.onLoop.add(function() { sprite.frameName = (sprite.frameName === 'front') ? 'back' : 'front'; }, this);
  48. 1 point

    PIXI.loader.resources or TextureCache

    Dont do this: let e = PIXI.utils.TextureCache[player.img]; Instead use the resources the loader loaded for you: let e = PIXI.loader.resources[player.img].texture; The error you get is because `PIXI.utils.TextureCache[player.img]` doesn't exist, this is happening because you are calling setup manually: PIXI.loader.add(player.img).load(setup); setup(); You pass it in as a callback, then immediately invoke it manually. Don't do that, just pass it in as a callback and the loader will call it when loading has completed (asynchronously).
  49. 1 point

    Getting correct rotation

    I am a father, and I live in America, if I don't like something I'm gonna say something... and its on us as a community to keep the content appropriate for others in the community that may not be mature enough for certain things. So Please Adam be supportive of the values of integrity.
  50. 1 point


    Howdy folks. Just wanted to chime in with a few comments: Someone mentioned that there's a lot of extra baggage in TweenMax like CSSPlugin that perhaps you don't need - you can simply use TweenLite and TimelineLite separately to keep things very small. TweenMax is intended to be super robust and easy to drop in without hassles of loading multiple files, that's all. With TweenLite/Max, you get the lagSmoothing() feature baked in which helps automatically recover from lag without skips/jumps, all while keeping every animation perfectly synchronized across the board. I'm not familiar enough with Phaser's built-in stuff to know if it has that sort of feature, but I've never seen any other engine that has it. You can read more at http://greensock.com/gsap-1-12-0 Again, I'm not familiar enough with Phaser's built-in capabilities but I'd venture to guess that there are quite a few features that GSAP offers uniquely, whether that be nestable timelines, animation along beziers, complex overwrite management options, unique eases like RoughEase, SlowMo, tons of callbacks, etc. There's a page that discusses some of this stuff at http://greensock.com/why-gsap/ in case it's helpful. Rich is right - TweenMax.pauseAll() and TweenMax.resumeAll() are probably the most intuitive option for what you guys are describing, but I'd also point out that you can use TimelineLite.exportRoot() to basically have it take all of the active tweens at any given time, wrap them in a TimelineLite which you can then control however you want, like pause() it or tween its timeScale to make things go in slow motion. The really cool thing about this is that you can then create new tweens that still work while all the others are paused (or slowed down or whatever). Imagine a game where you want to pause the game but open a modal window and when the user is done interacting with it, it tweens out of the way and you resume() the game. As far as the license goes, most people don't need the special commercial license, but we like to think it pays for itself very quickly in cases where you do need it. See http://greensock.com/licensing/ for details. Happy tweening!