Leaderboard


Popular Content

Showing content with the highest reputation since 02/21/20 in all areas

  1. 3 points
    vornay

    Google GameSnacks

    https://www.gamesnacks.com "Bite-sized HTML5 games, accessible to everyone." https://www.gamasutra.com/view/news/358551/Google_wants_to_bring_HTML5_titles_to_lowend_devices_with_GameSnacks.php "Google has announced a new HTML5 platform called GameSnacks that's designed to help devs bring quick, casual games to any device."
  2. 2 points
    Luke@Cocos

    The future of web games

    HTML5 is growing wildly in China as many games were placed on hold during the new regulations last year. More and more developers started to build games using the WeChat environment which we helped build that works off the HTML5 library. So many developers were building and continue to build games for that and now other phone companies like Oppo, Samsung, vivo, Huawei, Xiaomi, and others are building mini app marketplaces that work perfectly with HTML5. With 5G also coming, speeds are at a point in some countries that downloading a game will be as fast as opening a native app. I think we are on the edge of something great. So don't be worried for the future.
  3. 2 points
    yulijun

    Pixi.js Showcase

    How to make pixi.js game with webpack step by step. The tutorial is focus on how to build development environment from initizlize the project to publish the project. the tutorial is here https://github.com/proudcat/pixi-webpack-demo , welcome to star.
  4. 1 point
    Exca

    Help with SHADER

    Ah, it was just a version using filter of the same thingie. Basically for situations where you would want to do stuff to your scene instead of a custom shader. Should maybe change the shader to reflect that more. I'll check it tomorrow.
  5. 1 point
    jonforum

    Best practice loading 80 images

    320 line of code ! hum.. This approach would more clear for your user case. 12 line only const list = [ ['name','url'], ['name','url'], ['name','url'], ['name','url'], ['name','url'], ['name','url'], ] const loader = new PIXI.loaders.Loader(); list.forEach(arr => loader.add(arr[0], arr[1]) ) // or .add(...arr) loader.load(); loader.onError.add((loader, res)=>{ //stuff }) loader.onProgress.add((loader, res) => { //stuff }) loader.onComplete.add((loader, res) => { //stuff }) And as ivan say to you , for the best practice in (pre) loading a big selection of images You will need a texture packer software. You also have this one free https://www.codeandweb.com/texturepacker Work fine in pixijs, or if you use multipack or normals (premium feature) you will need to code your own manager in the pixi loader.
  6. 1 point
    Hello, and Welcome to the forums! If you have many small images make an atlas with texturepacker/shoebox/"http://free-tex-packer.com/" For your knowledge, pixi loader is actually https://github.com/englercj/resource-loader/tree/release/3.x and it has a queue with 5 parallel requests. If you want better API, just pass an array to `add`.
  7. 1 point
    ivan.popelyshev

    cacheAsBitmap

    Alternatively: hack cacheAsBitmap that way it uses resolution:2 or 3 . Here's example of hack, I just CTRL+Ced some code from cacheAsBitmap and changed it to check if it fixes a bug: https://www.pixiplayground.com/#/edit/CGFVg3fv6Rx_4nxcZS2yS
  8. 1 point
    Use "new BaseTexture(imageBitmap)" in latest pixi (5.1 or 5.2) . Or directly "new BaseTexture(new PIXI.resources.ImageBitmapResource(imageBitmap))"
  9. 1 point
    ivan.popelyshev

    cacheAsBitmap

    Hello and Welcome to the forums! This issue is based on webgl limitations. There's no antialias in custom framebuffers. For more information, search "antialias" both in this subforum and in pixijs issues: https://github.com/pixijs/pixi.js/issues?utf8=โœ“&q=is%3Aissue You can find out how other people worked around it. Antialias for framebuffers exists in webgl2 and you can try to use it in latest pixi dev version. For more details on that you can read https://github.com/pixijs/pixi.js/pull/6296 , but its an experimental feature and you better be able to hack cacheAsBitmap yourself.
  10. 1 point
    Hello. I have problem with dynamic change sprites texture. So the flow of the app is: I have two containers which overlap themselves. On the bottom I have container with one quite big image (6283x1024, 1MB) and on the top I have container for same image but tiled. Into the top container I put tiles (1024x1024, 100 - 300 KB) in a better quality. When app starts at the beginning I put only image for the bottom container in one sprite and prepare structure for the top(tiled) container - sprites without texture but with proper width/height/x pos/y pos. While sliding image (left or right) I detect which sprites from the top tiled container are visible on the screen and for those which are, I download images and replace textures. If all textures are loaded for the tiled container then I hide the underneath container and display tiled image in high quality. Tiled container has higher z-index then the second container, to make the image consistent while tiles are being downloaded. I have also slider service which uses ticker for auto-slide (left / right). The problem is that, when I replace textures I have lags and fps drops - from 60 to ~20-30. Is there a way to keep proper fps while replacing textures and keep the slide smooth without lags? Some code which belongs to my custom sprite class which extends Sprite class: // Detect if the sprite is on the screen isOnTheScreen(): boolean { const globalPosition: Point = this.getGlobalPosition(); return globalPosition.x + this.width > 0 && globalPosition.x < window.innerWidth; } // load it load(): void { if (this.isLoaded) { return; } this.isLoaded = true; this.loaderService.load$(this.source).subscribe((resources) => { const texture: Texture = resources[this.source].texture; this.canvasService.app.renderer.plugins.prepare.upload(texture, () => { this.texture = texture; }); }, // ToDo: error handling, perhaps retry downloading tiles once again. () => { this.isLoaded = false; }, () => { this.event$.unsubscribe(); }, ); } // event which says if we slide the image or do any other interaction setEventSubject(event$: Subject<boolean>) { this.event$ = event$.subscribe((detect: boolean) => { if (detect && this.isOnTheScreen()) { this.load(); } }); } // Slider service // ticker code which is in slider service this.ticker.add((delta) => { nextX = this.imageService.position.x - 5 * Math.round(delta); this.imageService.updatePositionX(nextX); this.canvasService.moveSprites(); // the event which goes to each sprite to start detection if they are visible on the screen this.canvasService.interactionEventTrigger$.next(true); }
  11. 1 point
    Yes, there is. Its called createImageBitmap, and its difficult to use, because the footpath is traveled only by a few people. 1. You have to submit special parameter to ImageResource https://github.com/pixijs/pixi.js/blob/67ff50884ba0b8c42a1011598e2319ab3039cd1e/packages/core/src/textures/resources/ImageResource.ts#L33 2. Currently its not possible to do it through loader, we know about that for several month and nobody did anything. It happens in open-source collectives. https://github.com/pixijs/pixi.js/blob/67ff50884ba0b8c42a1011598e2319ab3039cd1e/packages/loaders/src/TextureLoader.ts#L24 - it does not pass any params from resource metadata, so you cant actually affect it. If you want to help with it - please create issue at github, then the rest of the team will pick it up. 2a. actually, you can enable that setting globally - but it can affect other places of your application, prepare for strange effects 2b. you can pass that param if you use "Texture.from(myUrl, options);" instead of loader 3. Even when you solve 1. and 2. there might be other problems regarding asynchronous decoding of image resource, so you have to read up how actually createImageBitmap works - its not pixi function, its browser one. We had only a few users who enabled that mode and used it, so there are not much experience about it. IF you find something wrong - dont hesitate to ask us, of course, if you have a demo Good luck!
  12. 1 point
    Regular pixi text or one of advanced plugins, something was mentioned in one of latest threads... I dont remember which one
  13. 1 point
    Using gsap solved my problem, another little thing how can a display a box(100x100) with text on this slideshow
  14. 1 point
    Hello, and welcome to the forums! Looks like a general JS problem. Someone will help you with code, I'm sure My two bits: 1. you can just add handler to pixiapp.ticker and remove it afterwards , instead of creating new one. IT doesnt matter in your case, but I want to make sure you know about that option 2. store images in array, store current image in a variable. 3. Usually scale is not by width/height, its by "scale" parameter and its exponential. Read up what "element.scale" is. 4. Usually people use tweens for that kind of stuff. Praise GSAP ( https://pixijs.io/examples/#/gsap3-interaction/gsap3-basic.js , google GSAP) . Its totally fine to write on your own first, because you need to understand how such things work.
  15. 1 point
    Oh, its a new scene problem! Then you have a few options 1. Destroy all textures and re-load all the assets 2. Dont destroy textures, dont pass "texture:true" in recursive destroy. - in that case you share assets between two scenes 3. Some textures are shared some are not.. Well.. you have to know how loader and everything else related to assets work to make that work Lets think about 2) Instead of going through those If's , why not just make scene a child of stage? stage.addChild(scene) ... scene.destroy({ children: true }); // destroy only texts textures and containers/children . All referenced textures are alive! // now scene does not exists even in stage. IF you dont want to do that, well, you can destroy() whole stage and recreate it with "app.stage = new PIXI.Container()" - its fine. Or you can use those FOR's but just regular FOR with backwards iterator for (let i=children.length-1;i>=0;i--) { children[i].destroy({children:true}); } and {children:true} is the same as "true" in that case. Now I remembered it > You misunderstood Ivan anwser I think. VVV yeah, I just posted all the data i know instead of thinking about user problem, it happens
  16. 1 point
    Best way is "stage.removeChildren()" but you might need some extra stuff if you want to manage your Texts differently or Textures - destroying texts is a problem because... well.. i dont have time to explain, here's one of those threads, you can search more: https://github.com/pixijs/pixi.js/pull/6427 Read up removeChildren() code anyway. If you use destroy() of all children , do it with backwards iteration, that way you wont trigger the problem you encountered. Or copy the array of children before you iterate through it.
  17. 1 point
    ephraimt

    Sprite from buffer

    I am not asking for it. There are probably more important things for the team to work on!
  18. 1 point
    There's https://github.com/Mwni/PIXI.TextInput
  19. 1 point
    bubamara

    input element z-Index in pixi.js

    You're welcome. If you need to combine those two inside of pixi stage, you'll have to write your own pure pixi input unfortunatelly
  20. 1 point
    ephraimt

    Sprite from buffer

    "pixi.js-legacy": "^5.2.0" Using canvas renderer. My alternate method of creating an image Sprite is to use PIXI.Loader and then to pass the resulting resource.data to PIXI.Texture.from(). That works fine, so it seems the difference is isolated to the creation of the texture.
  21. 1 point
    Jay Manley

    Tile Rendering Performance

    Hi all, I'm currently working on a new game which uses large tilesets and renders 9 Containers as map layers. Each map contains 24*24 tiles and each tile is 32px*32px. Currently I'm adding each tile from the tileset as a sprite individually (only if the tileIndex for that tile is > 0). So if I were to have a fully loaded map it would contain a total of 5,184 Sprites. I'm guessing that this is inefficient and I feel that I could combine the bottom two layers into a texture, as these are Ground Layers on the map. The player will walk over these anyway and they are unlikely to ever change until the player switches map and thus reducing the Sprite usage by 1,152 (2 layers worth). I've looked at the docs and online examples to see if there's anything that could be helpful here but have been unsuccessful in getting it to work as I'd expect it to. Please help.
  22. 1 point
    xerver

    Tile Rendering Performance

    If you're using the Tiled map editor, then gl-tiled can help render large maps efficiently (WebGL only).
  23. 1 point
    ivan.popelyshev

    Pixi.js Showcase

    Done. https://github.com/pixijs/pixi.js/wiki/v5-Boilerplate
  24. 1 point
    jonforum

    Pixi.js Showcase

    i think it can be good also in boilerplate, it a good starter and the only one without typescript!
  25. 1 point
    b10b

    How do you keep the size below 3MB

    Not so long ago games needed to fit on a floppy disk ...so 3MB is a luxury imo To keep things small consider these easy wins. Javascript minification and dead-code removal. Lower bitrates for audio (combined with shorter duration and more imaginative looping). Pngquanting (8bit) bitmaps whenever possible. Keep every asset pristine, making every byte count. Example: https://b10b.com/grandprixhero/ (2.9MB total) And 3MB is by no means a hard-edged requirement, it's a recommendation based on FB's observations of their audience. If you can achieve it then the game may get more exposure and higher retention, but heavier games can still be viable too. What's most important for FB IG is virality and social connection.
  26. 1 point
    ivan.popelyshev

    Tile Rendering Performance

    Regarding your case - yes, 5k sprites is too much, only something like ParticleContainer can handle that, and even then - you'll have like 100k javascript objects in memory total, because each sprite is lightweight but not that lightweight You can put tiles into graphics with beginTextureFill - it'll have like 20k objects and it wont re-upload vertex buffer every frame. pixi-tilemap wont spawn any objects, it can just upload buffer once when after you refill your tiles list, and all next calls are cheap, only asking for GPU to render that particular tilemap. RenderTexture caching can convert your map to 1 or 2 sprites, but eats gpu memory, 4 bytes per pixel. Choose your destiny.
  27. 1 point
    ivan.popelyshev

    Tile Rendering Performance

    Welcome to the forums! Another tilemap thread. Please use search for this particular subforum on "tilemap" word. You can also search at https://github.com/pixijs/pixi.js/issues My latest explanation: https://github.com/pixijs/pixi-tilemap/issues/75#issuecomment-589615977 Tilemap is an advanced (not basic) , advanced algorithm that requires developer to write its own code and not just CTRL+C stuff from examples. PixiJS gives only low-level components that can be used with high-level algos people produce. When you write it, you actually feel like engine creator and not just like a person who uses one of existing solutions. I posted the same answer with different details like 30 times already. I hope you can forgive me that I cant give you compilation of all those threads Of course I would like someone to actually go through all that and compile article for PixiJS wiki ( https://github.com/pixijs/pixi.js/wiki ). We are waiting when that hero arrives.
  28. 1 point
    Hi greencoder, due too the lack of support from enpu and the diminishing community, I decided to rewrite my current project to Phaser3. donโ€™t worry, I will still respond to questions about panda in this forum that I can answer quickly. ๐Ÿ˜Š
  29. 1 point
    OkijinGames

    Why not just make native games?

    Thanks vornay for mentioning Okijin Games Honestly, my experience tells a different story. I have been making a living exclusively from this business for the past 3 years and I am confident that there's many more opportunities ahead. First, the thinking that you will necessarily make more money on bigger marketplace than smaller one is wrong. In the same vein as elevator's speeches where the business owner tries to convince investors that because the market has 1 billion potential customers, if he gets only 1% of it they would be rolling on the money. In reality, larger marketplace means more competition, higher production values, higher budgets then much harder exposure. I could run a campaign to 40K installs on Windows Phone for $500 in 2013... How many new players would I get for that budget on iTunes or Google Play? The size of the marketplace only matters for the bigger companies. For the rest of us, we should go where user acquisition is the cheapest, that is all that matters. And if we ever reach that point where we need a bigger marketplace then I would say this is a "nice" problem to have for any business! And then this is just the surface, you need a game that can pay you back. What's the expected ARPU (average revenue per user) for a game made in 2 weeks and a "Remove Ads" Button as entire IAP strategy? The reality is that your only chance to cash in is to pray the gods for your game to go viral (so you don't have to spend a dime in user acquisition) - and this is a strategy that could have you waiting for a life time, very similarly to people playing the lottery (and I am not saying don't try). ARPU for a game like flappy birds is at best 0.01 (and yes with 5M daily users it comfortably pays the bill) but if the developer had to pay for user acquisition at that scale he would have probably lost money at the end with that game. True, HTML5 games quality is a step behind but is good enough to compete in several game categories (puzzle, casual...). I am confident that many players cannot really tell the difference between native or not with my latest game Sailor Pop, just released on Google Play. We are catching up Finally, if you have any game idea I would encourage you to just go for it and make it a reality and release it somewhere - anywhere. Don't waste too much time in existential thoughts about which technology and best place to release, go with what can make your project a reality. If you meet success, then again, all problems will be nice to have (porting to another platform, growing user base etc). People have been making much money with only targeting one platform. In Korea where I live, there are game businesses (SundayToz...) making millions mainly targeting the local KakaoTalk platform (the number 1 messenger app there).
  30. 1 point
    FlashyGoblin

    How to destroy scenes

    Is there a way to destroy a scene and all of it's dependancies? I would like to create a 3D scene that would act as a launching pad to load other scenes. Then be able to go back to the launch pad scene to choose another one, but would first like to clean up the current scene to free up memory. It's important that we stay within the same BABYLON.Engine object. I hope that makes sense. Any thoughts about this approach? Thanks in advance!
  31. 1 point
    Deltakosh

    How to destroy scenes

    Hey, this makes complete sense, just call scene.dispose()
  32. 0 points
    bubamara

    input element z-Index in pixi.js

    yes, not possible with HTML elements. You can position HTML element only above or below Pixi canvas.