Leaderboard


Popular Content

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

  1. 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.
  2. 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.
  3. 2 points
    Hello, I'm creating a front end for a graph display application. It displays a sort of fancy force directed graph, so there are nodes and lines. I'm using pixi-viewport to contain my main scene so it can be zoomed/panned/culled. Once you zoom in past a certain limit the nodes will start to display a text label across the center. I'm using PIXI.Text for these as I don't control what characters will be displayed. I want the text to look crisp so I'm willing to take the hit of generating new text textures on each zoom action. This isn't too expensive as you have to be so far zoomed into to activate the labels that there isn't to many of them on screen at one time. The problem I have is the the text is inside a container that has the hierarchy for a graph node, its shadow/outer selection, inner ring, icon etc so it inherits the world transform for scale and it causes the text to scale and then look bad. I don't want the text to scale as I regenerate it at a suitable text size each zoom to look perfect. I tried the naive solution of trying to apply an inverse 1/parent-scale which sort of works some of the time but not really. I tried putting the text on a layer above the viewport and manually positioning them and resizing them, this worked perfect till I dragged one node over another and realised z-indexing is broken now that they aren't drawn with the rest of their node display objects. Does anyone know if there is a way to stop the worldtransform from applying to a child/child container? I'm currently considering creating my own container subclass that somehow sets the world transform to identity and just position its local x,y at world co-ordinates inside the viewport, this container will be added into the node hierarchy and contain the text item. I'll need to browse through the code a bit to see how. But I'm not sure if it is possible, even a good idea, or complete madness.
  4. 2 points
    Yes, there is! Here's an example of Shockwave that you could include w/ a `<script>` element. https://cdn.jsdelivr.net/npm/@pixi/filter-shockwave@3.0.1/dist/filter-shockwave.js All filters are published to NPM with bundler file versions ("lib" folder) and a browser version ("dist" folder). You can use jsdelivr or other CDN that allows you to include files from published NPM versions.
  5. 1 point
  6. 1 point
    That's how you create a texture out of big sheet: "new PIXI.Texture(baseTexture, new PIXI.Rectangle(0,0,32,32))". That question is very frequent.
  7. 1 point
    Thanks for the reply, but I don't think that's the case. The device I'm running it on is Chrome 74 on a windows 10 desktop. It works perfectly fine when I used browserify, but not when I webpack it.
  8. 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
  9. 1 point
    http://slicker.me/javascript/mine/minesweeper.htm
  10. 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
  11. 1 point
    A running playground that reproduces this problem would be really helpful for trying to track down what is going on here. You can choose the pixi version using the "settings" button to get your exact version.
  12. 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!
  13. 1 point
    for example we are loding this PNG file in base64: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAMAAACeL25MAAAACVBMVEUAAAD///////9zeKVjAAAAAnRSTlMAz31IEhkAAAAQSURBVHgBY0AGjExAgokJAAAtAAiPjSHbAAAAAElFTkSuQmCC while debugging I noticed that it goes into prepareUrl method which splits the dataURI into two parts: directory: "image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAMAAACeL25MAAAACVBMVEUAAAD///////" file: "9zeKVjAAAAAnRSTlMAz31IEhkAAAAQSURBVHgBY0AGjExAgokJAAAtAAiPjSHbAAAAAElFTkSuQmCC" we used Texture.from("data:image/png;base64,..."); before and it worked fine. It's strange, but when pasting this dataUri in pixi playground - it works just fine, so the problem is somewhere in my code!
  14. 1 point
    Hi! I think that you could easily implement these controls yourself without paying someone: 1. On mousedown or touchdown record the input value for the Y axis. 2. On mousemove or touchmove compute the difference between the recorded value and the current Y axis input. 3. Translate the camera on the Z axis based on the difference.
  15. 1 point
    If you really want move sprites individually and not from container this is more optimised for (let i=0, l=spriteContainer.children.length; i<l; i++) { spriteContainer.children[i].x-=10; }; But move the container are the best practice. spriteContainer.x-=10;
  16. 1 point
    First... Just move the sprite container left 10 pixels, then it's children will all move with it. Second, avoid creating functions every frame. Use a basic for loop, or create a function that's reused. But don't create a new anonymous function every frame for within a forEach. You do that everywhere and the garbage will add up quickly.
  17. 1 point
    Thanks for the responses. I've gone with the calculateVertices method replacement for now, it appears to work perfectly.
  18. 1 point
    It appears from your code that all of your sprites are the same. If this is the case, I suggest using a ParticleContainer instead as this will vastly improve rendering performance. const renderer = new PIXI.autoDetectRenderer({ width: 1920, height: 1080, preserveDrawingBuffer: true, transparent: true, backgroundColor: 0xffffff, antialias: true, }); let stage = new PIXI.display.Stage(); let spriteContainer = new PIXI.ParticleContainer(); stage.addChild(spriteContainer); for (let i = 0; i <= 150; i++) { let sprite = PIXI.Sprite.fromImage(tallLine); sprite.x = i * 10; spriteContainer.addChild(sprite); } requestAnimationFrame(rafGameLoop); //move all the sprites left 10 pixels per frame const rafGameLoop = () => { requestAnimationFrame(rafGameLoop); spriteContainer.children.forEach(sprite => { sprite.x = sprite.x - 10; }); renderer.render(stage); }
  19. 1 point
    This is also my first post here, but I've been reading these forums for a month. Love this community and projects. You all are amazing people. I am myself an experienced full stack developer, who wants to create a game of his dreams as a side project 😃 I've been playing with Pixi for a few weeks, and I like it so far. I am having some problems with pixi-filters v3.0.2 on pixi.js v5.0.2. I was able to get @pixi/filter-shockwave to work with a Rollup package bundler. But I hate having to rebundle everything after a tiny code change in order to test. I prefer an old fashioned way of adding library files via a <script> tag. Is there a way to manually add a filter such as ShockwaveFilter to the project without having to use a bundler? I see that in pixi v3 it was straight forward (http://jsfiddle.net/up209d/tdetg2h3/) Thanks!
  20. 1 point
    Just started playing today and I'm already addicted. Awesome I really like this game.
  21. 1 point
    Ah. Thank you! Turned out that in addition to this, the pixi-viewport library was overwriting all filters for me. After inspecting it's code it turns out that David's viewport is messing too much with PIXI objects. I probably need to write my own simple viewport... Thank you for your help!
  22. 1 point
    Yeah, one more, VERY SIMPLE way to do that, just for Sprite internals: hack calculateVertices. https://github.com/pixijs/pixi.js/blob/dev/packages/sprite/src/Sprite.js#L221 "myText.calculateVertices = hackyFunction" , and function uses only "tx ty " part of transform.
  23. 1 point
    its not an edge case, sometimes just one resource can fail, depends on what server or service do you use. If its a problem for your users, make a fallback, for example you can start downloading everything again
  24. 1 point
    Hello, I'm started with pixijs for the web since few weeks ago, I readed the documentation and also readed different post of recommended tutorials in this forum, but not understand well all the pixijs parts, for example the container child events etc. Anyone knows any videotutorials o video courses? any book? Thanks for all!
  25. 1 point
    jonforum

    PixiJS Tutorials or video courses

    hi, did you try filter with google video with pixijs ? I made you a link tag include video filters for french, english, russian ... i don't know your natal language ? You have a lot of video in those 3 language. Maybe also try add spanish , china and korean... it should work, here https://www.google.com/search?q=pixijs&lr=lang_en|lang_fr|lang_ru&newwindow=1&tbs=lr:lang_1en|lang_1fr|lang_1ru,srcf:H4sIAAAAAAAAACXIQQ6AIAwF0duwMWHngSr9QaKlSSk23t4Ed_1Nme3X6PJCLSvJo7rDVp8u9VxIwnrEORQQZ_16gG9KHlWirKEHRXy03TB2f94ZtUAAAA&tbm=vid&source=lnt&sa=X&ved=0ahUKEwiF4N2axZviAhXyV98KHVSGAskQpwUIIA&biw=1502&bih=750&dpr=1.25 you can affine filter with some tag like, `start`, `tuto`, `intro`, `node` ... book i know only french https://ecitydoc.com/download/prendre-en-main-pixijs-1-posons-les-bases_pdf english https://www.amazon.com/Learn-Pixi-js-Create-Interactive-Graphics/dp/1484210956 https://www.pixijs.com/tutorials
  26. 1 point
    bigtimebuddy

    Safari Cleanup Issue

    In this case, for SPAs it’s better to not destroy your renderer. You can destroy the display objects (sprites, textures, etc), but keep the reference to your canvas and renderer (make sure you pause the ticker). There’s a limit to how many webgl canvases you can create simultaneously. Better to not continually create and destroy. Maybe there’s some GC trick for Safari, but this has been my standard practice working with virtual dom frameworks.
  27. 1 point
    Andrew Williamson

    Pairs - A memory game

    I enjoyed this game☺️. Great exercise for the brain.
  28. 1 point
    Hey Guys! Yesterday I released a free PICO-8 tileset, free for everyone to use, so grab it! https://s4m-ur4i.itch.io/pico-8-pixelart-free-tiles If you like it, check out my other projects, I just released a big Metroidvania / roguelike / platformer Tileset: https://s4m-ur4i.itch.io/2d-metroidvania-tileset-16x16 Everything is low cost because of Indies Check out everything: https://s4m-ur4i.itch.io
  29. 1 point
    mattstyles

    TypeScript vs JavaScript?

    Type correctness is a fallacy, and can not be implemented into a dynamic language without injecting into the runtime, which typescript does not do (although alternatives like flowcheck and some other libs for implementing flow do, it still does not make type checking a silver bullet). Much more info in this article. Having worked with it for an Angular 2 build (which was a horrific experience coincidentally) I can say that using TS creates so many headaches. Importing simple modules becomes an issue and often breaks your build, do you really want to spend half and hour importing a module you want?? Totally bonkers, it should just be a few keystrokes, a bit of network, and boom, get coding. I continually found inaccuracies in documentation as implementations changed which was a pain. I was worried about how TS performs some of its transforms without producing a horrible tangle of inefficient code, turns out that does happen, although a lot of people do work on making these transforms as efficient as possible, its just that some patterns are either not needed or don't work well in a dynamic language. There is also a barrier for every other JS dev, you force them to use TS and not everyone will want to do that (this depends on your project though). The additional killer is that TS is not spec, whilst a lot of what it started considered spec, and certainly its implementation helped the spec to evolve, its a worry. Every time you move away from spec (like Webpack does with modules) you are at risk of moving further away from your chosen language, which is crazy, if your language doesn't support the stuff you want to do then choose another, don't mutate your language beyond recognition, as a web dev you are in a position of luxury here because if the web is your chosen platform then its JS so everything has a pipeline to output JS these days. Typing is useful for large teams as it can make the code easier to understand, but I could dispute this by saying that it introduces a load of clutter and types can be gleaned by a bit of inline documentation, although you wouldn't get static checking (but, see the earlier link, static checking won't secure your program, to the point where it could be pointless). On that, the number of times in TS code I've seen the type specified as <any> because devs haven't put enough effort in (or ran out of time, or, sometimes, been forced in to it because typing is square peg round hole for JS) is shocking and clearly unhelpful. Having said all this, it is gaining popularity so its certainly worth checking out, particularly if you're fond of strongly typed languages (just remember JS is not, and without killing your performance nothing will make it so). Nothing can get you away from this, despite the newer ES2015 class syntax, JS is NOT a classical language. The class syntax is simply sugar around creating a class-like abstraction in a prototypal world. There is nothing superior about OOP or classes, it is simply a different style/flavour/design choice. The reason I bring it up is that if you keep up with a mindset that one thing is superior over another you will overlook anything you deem inferior which means you won't learn its pros/cons and you'll get stuck in your superior world even when you start working on something where that does not make sense. Feel free to ignore, but I'd be wary of pigeon-holing yourself or your tech choices. Learn it all and learn when each different thing makes sense and when it does not. Particularly in the fast-paced JS world, something only remains superior for 6 months, so unless you want to become a dinosaur, keep moving!
  30. 1 point
    Tom Atom

    TypeScript vs JavaScript?

    Hi, it is always good to know pure JS, but with TS you get type checking, which prevents errors and increases productivity. TS is not separate language, but it is superset of JS. If you have Java (or C#) experience, then OOP is similar in it (as well as in ES6, but there it is without type checking). If you are on Windows, there is also very luxury IDE - Microsoft Visual Studio Community 2015, which is free for individual developers. It has great intellisense support. In my book I made small comparsion of TS / ES6 / JS: Just for example, consider this simple TypeScript class: class MyClass { private _position: Phaser.Point = new Phaser.Point(); public constructor(position: Phaser.Point) { this._position.copyFrom(position); } public moveBy(x: number, y: number): void { this._position.add(x, y); } } It is compiled into this JavaScript code: var MyClass = (function () { function MyClass(position) { this._position = new Phaser.Point(); this._position.copyFrom(position); } MyClass.prototype.moveBy = function (x, y) { this._position.add(x, y); }; return MyClass; } ()); Or into this ES6 code: class MyClass { constructor(position) { this._position = new Phaser.Point(); this._position.copyFrom(position); } moveBy(x, y) { this._position.add(x, y); } }
  31. 1 point
    sprite

    Royalty free spritesheets

    http://sprite.slicker.me Check out these royalty free sprites for your next HTML5 game: Transparent PNGs, multiple characters, each with several actions (jump, run, punch etc.)
  32. 1 point
    Hsaka

    Welcome to the Pixi.js forum

    Pixi.js looks really good. I'll be trying this out soon!