Leaderboard


Popular Content

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

  1. 2 points
    Rezoner

    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
    Dumadu

    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
    Gio

    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
    YMShen

    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
    ivan.popelyshev

    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
    Exca

    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. 2 points
    Does this help? https://www.pixiplayground.com/#/edit/sNKLacqLJenYpsQyc6mIp The issue you were struggling with is that Text is lazily updated. It only usally gets updated when it gets rendered; but you can force it to update with the updateText() function.
  13. 1 point
    end3r

    W3C Web games workshop - your input needed

    I'm going to be at the W3C worskhop that will be hosted at Microsoft's campus in Redmond in two weeks from now, and I'd like to learn what struggles, needs, or any feedback you have with game development in general. There will be browser vendors, API makers, hardware creators, publishers, etc, so a great opportunity to be heard. My short blog post: https://dev.end3r.com/2019/06/indie-perspective-on-web-games-at-the-w3c-workshop-take-the-survey/ Direct link to the survey: https://forms.gle/ajpnSgQvtzBvhZCM6
  14. 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.
  15. 1 point
    left is global mem and right gpu mem from your navigator. do those value grow when you refresh your navigator and snapshot each time? it should not
  16. 1 point
    Komarara

    Poor Performance on panning

    Hi, I'm trying to make an interactive polygon map with pixi js but panning gets dreadful stuttering on panning with over 6000 polygons. I made a screen record. https://streamable.com/qexxv When I reduce my Polyongs to 1000, panning gets smooth. This is how I add my Polygons to Canvas var g = new PIXI.Graphics(); g.beginFill(1); g.lineColor = 0xffffff; g.lineStyle(1, 0xffffff); g.drawPolygon( arrCoordinates ); g.endFill(); app.stage.addChild(g); and this is my pan function: var lastPos = null $(canvas) .mousewheel(function (e) { zoom(e.deltaY, e.offsetX, e.offsetY) }).mousedown(function (e) { lastPos = { x: e.offsetX, y: e.offsetY }; }).mouseup(function (event) { lastPos = null; }).mousemove(function (e) { if (lastPos) { app.stage.x += (e.offsetX - lastPos.x); app.stage.y += (e.offsetY - lastPos.y); lastPos = { x: e.offsetX, y: e.offsetY }; } }); Could someone tell what I can do to increase performance, please note that I need to interact with almost every polygon. And is it possible to store customs values for each polygon, so when I click on one of them, I would like to display these values, etc? I'm currently working with SVG and it's fine but it gets also very laggy on mobile devices when panning, so I thought pixel graphic would be better.
  17. 1 point
    when exactly do you create Application or Renderer?
  18. 1 point
    aldrin.thomas

    Text Quality

    Hey guys, I am facing some issues with the text quality. My canvas size is 1280x720 and I am displaying it in a 1920x1080 screen. Thus my text becomes blurred. Please help me out to improve the text quality.
  19. 1 point
    did you have the same thing if you do Ctrl + F5 orCtrl + Shift + R this shortcut refresh with empty cache.
  20. 1 point
    Hi, I'm hoping you can share some ideas with me! I'm making web based games with Pixi.js and I'm having a bit of a hard time working with the graphics design team (this is not a developers vs designers issue!). I'm trying to find the best workflow that might help us both do our jobs faster, but I can't seem to find the right tool for it! The designers sketch and build the app in Photoshop, and I work in Typescript with Pixi. So... what we've tried so far was: they sketch up in PS and then generate all assets with TexturePacker, leaving me with a json file which I can easily import into my game. The downside of this is that I have to position every asset and create every container manually (or rather using a config file, but still that's kinda manual work). Our second attempt was that they sketch up in PS, then export that to Adobe Animate, and using the PixiAnimate plugin, they then create the files for me to use. This has improved our workflow, because I don't need to position anything nor create the containers, but there are still some flaws as they are not able to test interactive elements (they can't see how a button actually reacts unless I implement it), and I would love to not depend on Animate which seems fairly deprecated nowadays, and on an external plugin which is out of our control. Plus, designers (at least ours) do not think as programmers, and they don't make variable names easy for us. PixiAnimate creates objects using the instance name they put on Animate, but they don't follow any guidelines. If they have four items of the same group, they call them "item_1", "item2", "this_is_the_third_item", and "last_one". If there's a tool that can validate this prior to exporting (setting some kind of rules, like prefixes for elements), that would be awesome. So yeah, I'm asking for a magical tool. I know it doesn't exists, and I know some adjustments are necessary on both sides, but I'd love to hear from you guys, how do you work with your graphics team, what do they use and how do they deliver the assets to you! Thanks!
  21. 1 point
    I made this instruction for Babylon.js, but I hope it will work for Pixi.js too: Debug, Release, Playground using BabylonJS and TypeScript (forum.babylonjs.com) BabylonJS and TS. Debug, Release, Playground (gamedev.net) I will write such instruction for Pixi.js soon.
  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
    Gio

    Cardlings, a digital board game

    I have written a blog post with some details about the development process. You can read it here. The idea is that in each part I'll cover one thing that went right and one that went wrong. In the first part: - What went right: client-server architecture - What went wrong: building on top of prototype code I hope someone will find it useful Also, the game is now available on Steam!
  24. 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...
  25. 1 point
    buryo

    Creating Input element

    Has someone worked with this before? I've made my own Input plugin the only problem is the screen size, I can't figure out how to calculate that https://i.imgur.com/sO3FzMI.png https://i.imgur.com/nwdXm9v.png Mwni is doing some calculations on screen resize: https://manuelotto.com/opensource/PIXI.TextInput/demos/demo_default.html
  26. 1 point
    ivan.popelyshev

    Creating Input element

    OK, got it, I'll get someone here who speaks React-ish.
  27. 1 point
    Looking at the github basic usage example => Why is the ticker nested inside the loader? const app = new PIXI.Application(); document.body.appendChild(app.view); app.loader.add('bunny', 'bunny.png').load((loader, resources) => { const bunny = new PIXI.Sprite(resources.bunny.texture); bunny.x = app.renderer.width / 2; bunny.y = app.renderer.height / 2; bunny.anchor.x = 0.5; bunny.anchor.y = 0.5; app.stage.addChild(bunny); app.ticker.add(() => { bunny.rotation += 0.01; }); }); I am comparing to this example (https://pixijs.io/examples/#/demos-basic/tinting.js PIXI.Sprite.from(... Is there a significant difference between this syntax? new PIXI.Sprite(... Also in this tinting example they are setting: dude.turningSpeed = I don't seem to be able to set these type of custom properties using the Github basic usage example. I created this codepen that shows the problem I have of all sprites acting together https://codepen.io/jswtch/pen/gJBaBz?editors=0010
  28. 1 point
    I've sent you invite to pixijs slack, in case you are interested and you use slack.
  29. 1 point
    No, I wasn't using any filters on it. All the colors and design were done in Adobe Illustrator before putting it in the project 😎
  30. 1 point
    pixijs v5 typings are in the same pixi.js package. You dont need to install @types
  31. 1 point
    I mean size in pixels. Width, height
  32. 1 point
    shlajin

    Text smooth scaling / text mipmaps

    I found a demo of MSDF and the animation looks amazingly smooth! That's what I needed, thank you so much for the keyword to google For any others wondering, this what I found https://github.com/soimy/pixi-msdf-text
  33. 1 point
    The code i have there is for general case, whether its backed by Graphics or pixi-tilemap or just sprites. I dont understand your question I recommend to use one graphics per many lines, but not just ONE graphics. That's "chunk" optimization, i dont have small example for it, only big ones like https://github.com/ivanpopelyshev/bombermine-shuffle , thats very old one that doesnt use pixi.
  34. 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.
  35. 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
  36. 1 point
    Hahaha I cryed of laught here. I will change to javascript and wait not have so many troubles as with typescript. Thank you.
  37. 1 point
    +1 for Typescript. Webpack/Rollup are actually pretty easily configurable and versatile module bundlers. The web moves fast and it's about enabling you to use the latest and greatest tech while still supporting outdated targets as painlessly as possible. Large projects written in plain ES5 with file concatenation are usually a nightmare to maintain and work on unless they are beautifully written and documented by skilled and knowledgable people. Code editors don't know anything about the project unless you configure them to and they have complex JS analysis features. Even then it doesn't work particularly well a lot of the time. ES5 JS + namespaces look so dated and a chore to read and write at this point. Some of the Grunt/Gulp configs I've seen and worked on are far from simple too btw.
  38. 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.
  39. 1 point
    al3abmizo

    We'll help you promote your games

    Hello, Actually, this isn't a script, it's a handmade site. I am a web designer and developer and created it since 2013, with some regular updates, it finally became as you see now.
  40. 1 point
    ivan.popelyshev

    Growing RenderTexture

    Here's what I did: https://github.com/gameofbombs/pixi-super-atlas This is a public version of something that works in commercial production project. Its for v4 and it uses great hacks that emulate v5 TextureResource. I didnt move it to v5 yet. There's not much docs, but you can understand whats in the functions. https://github.com/gameofbombs/pixi-super-atlas/tree/master/src/core Here look in "Add" and "repack" : https://github.com/gameofbombs/pixi-super-atlas/tree/master/src/core Its the known algorithm, its used by all packers (with modifications of course) . Your algo looks like some modification of bucket algo, it is fine for certain cases but it will be better if you also know what other packers do, as a reference.
  41. 1 point
    ivan.popelyshev

    Redrawing only when needed?

    Yeah, I also used double-canvas and triple-canvas on slow devices, browser compositeLayers works better than webgl or 2d in that case. Thought i recommend to have only one of them as webgl..
  42. 1 point
    Hi. Is this still relevant? I'm interested in collaborating with your team.
  43. 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.
  44. 1 point
    Hey there, I made this little game called Life in the Static, the basic gist of this game is that you have an ability to stop time. LINK TO PLAY THE GAME: Tasty Link
  45. 1 point
  46. 1 point
    Hello, I'm trying to optimise at bit my text rendering. I render a graph, and each node in it contains an icon (from fontawesome or similar type font) and the link connecting it can display the relation name. There is only 9 possible icons and 13 relations so it seems like a bad idea to generate 'N' PIXI.Text objects so I thought I'd try just caching the text object in a map and using its texture inside sprites then cleaning up when done. I've ran into two problems though. First the texture wont display unless the text is part of the scene. If I add it as a child the Sprites will work. If I don't they will just be empty. Secondly, if I try to work around problem one by adding the text into the scene anyway the Sprite versions will all flicker when the text is changed (I change the text on a zoom event to scale it sharply) and not appear for a starting frame when the text is added. Is there a way to generate the texture for a text item without adding it to the scene, and could that fix the flicker? I forked someone elses pen to try demonstrate the text being part of the scene issue. https://codepen.io/anon/pen/yWXMJM I did see this project - https://github.com/JiDW/pixi-cocoontext/blob/master/src/CocoonText/index.js But I was hoping not to have to copy all the inners of Text Cheers Bob
  47. 1 point
    Hi Ivan, thanks for your reply! I have been debugging (extensively) and it seems the error was caused by some odd state of package-lock.json of npm, or some strange dependency issue. Deleting that file (also did for yarn.lock), plus all the modules, and starting from scratch to install all the dependencies seemed to make the trick. I did not even think of this option, but after your message saying that it should all work fine, I created some basic test with a new fresh project and I realized everything was just working fine. Perhaps this post can help anyone who bumps into a similar problem. Thanks again and sorry for the mess!
  48. 1 point
    Just started playing today and I'm already addicted. Awesome I really like this game.
  49. 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.