Popular Content

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

  1. 2 points

    [Panda 2] Woriar

    Hello all, I started this project while ago and, like some many others, never got it finished. Since i think it's pretty playable and shows the capabilities of Panda 2, i would share it with you. Hope you like it! Play here! Tested with latest Chrome on desktop. Made with Panda 2 game development platform.
  2. 2 points
    Use this when you obtain temp webgl context. Unfortunately pixi webgl test context is hidden in js scope, so you have to create your own. gl.getParameter(gl.MAX_TEXTURE_SIZE)
  3. 2 points

    Tiles in Between

    Tiles in Between is a 2D puzzle platformer where you have to rearrange the tiles and make a path to the princess. The game is made in Unity for WebGL, and currently is posted on Kongregate. Play it here: https://www.kongregate.com/games/soetsutakiwasa/tiles-in-between
  4. 2 points

    Google GameSnacks

    @blackmoondev Would you mind detailing us how is this process ? Thanks.
  5. 2 points

    Google GameSnacks

    We have two games on the platform. It's pretty nice and cool, the api isn't very hard to add. Process of dealing with Google is quite long though (as you could imagine).
  6. 1 point

    Shader performances

    Hi everyone, I work on a particule engine with thousands of particles and thousands of differents textures. I need to be able to tint particles with a different amount of tint for each particles. So I made a shader to do this and use mesh instead of sprite, but the performances are really bad with thousands of particles. I think the shader I made can't be simpler, does Pixi does something internally with sprites that mesh doesn't have ? Here's a exemple with the shader : https://www.pixiplayground.com/#/edit/DuEeDDzZltSRzeAwrWJiy Particles number and mode (mesh or sprite) can be tweeked to see performance differences. Thanks a lot.
  7. 1 point
    Hi, I'm new to this forum so hi to everyone! :) Currently, I'm trying to build an isometric tilemap that also displays a certain height. Here is a demo: https://www.pixiplayground.com/#/edit/69C1wfNIowvu5wNNccv8w I have the following problems and maybe somebody could guide me in the right direction. 1. Shadows: When I remove the lineStyle, different heights and the depth of the scene are not really recognizable. I think this could be solved with proper lighting and shadows. Any suggestions on how to implement this? 2. Sprites & Performance: I'm currently calculating all vertices manually and then I draw a PIXI.Graphics-Polygon according to the vertices. Is there a more efficient way to do this. I'm not very experienced with PIXI.Mesh, SimpleMesh or SimplePlane. I wanted to use the PIXI.SimplePlane first but the documentation seems to be wrong... In addition to the mesh generation do you have any tips on how to properly cover the mesh with sprites, soften the edges and smoothly transition between different sprites. 3. Player movements & buildings: In the future I'd like to be able to add players and buildings. This is not so important right now but as the objects will heavily interact with the map, I'm happy if you have some guidance on this topic as well. Thank you very much! All the best Tom
  8. 1 point
    I'll keep digging. For now, it is very useful just to know that what I'm trying to do seems reasonable and possible. I definitely don't expect anyone to set aside 2 hours for me. I am indeed using 5.2.1, so I will look into other versions and the pull requests. Thanks for the help! I've seen you all over these forums and github issues, and I appreciate it.
  9. 1 point
    Ah okay, then I will try to work with SimplePlane and if I can come up with a short example I will make a PR. Just wanted to check with somebody who is more experienced with PixieJS. Thank you for the heaven mesh example. Looking forward when it becomes available in v5. I have not much experience in porting stuff but if I can assist you in any way, let me know
  10. 1 point

    Shader performances

    No problem Ivan, I'll do it. Thanks again.
  11. 1 point

    Shader performances

    Oh, look: https://github.com/pixijs/pixi-batch-renderer , @Shukant Pal made custom configurator for it. Maybe it can be useful for you!
  12. 1 point

    Shader performances

    > it looks very interesting for my problem. Basically its configuration of pixijs default sprite renderer. What was only possible through full CTRL+C before, now can be done in overrides. Colors, global animations - that's easiest case. I use it for 2.5d/3d emulation: https://github.com/pixijs/pixi-projection , for double- tinting (pixi-heaven) and for fast masks (thousands of sprites - OK) , again, in pixi-heaven repo. In PixiJS v4 i had to make my own SpriteRenderer that could be partially overriden - and it was hard to recommend it for other people hax.
  13. 1 point
    I have explained my technique in some detail at https://www.gamedev.net/blogs/entry/2268999-a-simple-way-to-generate-limitless-terrain-in-real-time-in-plain-html5javascript/
  14. 1 point
    OK, just dont try "load as texture" aka `Sprite.from()` approach , I dont think it actually work. Try whatever minimal stuff you can possibly do: two canvases. You can even use pixi-legacy.js and 2 CanvasRenderer to simplify stuff for now, separate your stage into "before external canvas" and "after external canvas". Actually if you have that game sources you can really inject it into your stage if its webgl or canvas2d, need to look closer.
  15. 1 point

    beta 8.0 & updated WebGL renderer

    Updated https://playerkillers.exchange/lib/melonjs.js
  16. 1 point

    Shader performances

    Hi Ivan, thanks a lot for your quick answers. I'll check your batchrenderer exemple it looks very interesting for my problem.
  17. 1 point
    Maybe I and @eXponetacan help if you provide minimal demo in a zip file. We'll host it on server ("http-server -c-1" as default node-js server) and look if its actually something possible. Without minimal demo there are just too many things that can go wrong and we'll get stuck in it.
  18. 1 point

    Shader performances

    Welcome to the forums! You are lucky, because right now in v5 we have exact solution for the problem. Yes, pixi gives you ability to make your geometries and even re-use them (like you did), but still, count of drawcalls can be a problem! If you capture one frame with SpectorJS you'll see a problem ( I didnt do it but probably there are too many drawcalls). So, PixiJS actually exposes its batchrenderer! It fills up one geometry for many objects every frame. Demo is here: https://www.pixiplayground.com/#/edit/CMKvgOt-bvlCG4QHdswIP . We didnt add it to examples yet, but we really should do it because of people like you who need it. The idea is to specify "pluginName" for Sprite, Graphics or mesh material. Sprites are always batchable, but in case of Graphics and Meshes you have to make sure isBatchable gets set to "true" so instead of shader pixi pushes data to batcher in `renderBatched` function. Something like that. In your particular case, Sprites are enough, so you dont have to think about what I said in previous line The downside - you have to to tint and other stuff in attributes instead of uniforms. Tint is already handled in demo, so in your case you need extra attribute field for "ratio".
  19. 1 point
    Thanks for your prompt and helpful response Ivan, I've been following you for a long time and still look forward to your assistance. I actually used a canvas element to create my game but due to the fact that I had to download another game on the section from iframe to display on my game, it interacted back and forth. between the 2 canvas elements of the game and the iframe closely. But the iframe is just a DOM element so I don't want to use it. I just want to put this iframe element in the same canvas as my current game so I can manage it best. I used from () to display a video element and it was successful but it was really difficult to load it as an iframe.
  20. 1 point
    Most of the stuff we have written here are just facts, no lies. 1) Traffic redirection and banning sites without a notice is stealing of traffic 2) Injecting additional ads and not paying for them is stealing of $ People these days are just so used to so many different kinds of stealing techniques that even governments and central banks are doing it as we speak and nobody cares about it, and yes, they have lots of friends too.
  21. 1 point
    I already read this topic : https://www.html5gamedevs.com/topic/32522-one-atlas-many-json-for-spine/ and I following the anwser, and can not find the solution. I want to using one atlas to manage all json. I want to manage json by one atlas so I wrote this code. But it show me like this : https://imgur.com/a/jITTg4w Looks I just make a dynamic atlas. How do I using one atlas to contain all spine information? slot_1601_TEST.7z
  22. 1 point
    I can not using the same way make what I want to do. I see my project when I using PIXI.Loader add json and using add() to add my json then load. It will give me the spineData in loader.resources.spineData when load finish . But when I using your way I can not take this property. They is a similary names data. But when I using it they will say "Cannot read property 'children' of undefined" This is my code example. Please check pixiatlastest.html line 47 and 58. mytest.rar
  23. 1 point
    Hello everyone,, I think that HTML5 games could go somehow viral as Flash games do, but it would require developers to provide the whole game file (not just iframe). Will you be willing to provide the game files for free distribution? It works really well in Flash market - hundreads of portals publish your game and you recieve from tens of thousand to millions of impressions. Every publisher who wants mobdrolucky patcherkodi your game have two options - publish your game for free (including your/sponsors branding and ads) or buy sitelock for you. It's a bit harder for publishers to get your game files, but you can fix that by simply adding "download this game" button leading to your website (generating additional revenue). I will try it with my first game (once its done) and share the results.
  24. 1 point
    Hi everyone I took a project which is game development. I have not done game development before. It is not complex game, I was planning to use react with pixi.js to achieve my goals. Since I don't have any experience with pixi.js I would to hear your opinions about whether it is wise choice to make this game using pixi.js with react. Let me explain the game a bit. It will be a dart game. First we have configuration screen where user will select game type, target, player information. After setting up these things user can start the game. This is hard the hard part. Each game type can have different designs. There will be animations which shows which player's turn is. After player throws we will have to decrease player's point and show where it landed on dart. These are example videos and images similar to what I need to achieve. Is this something doable with pixi.js or should I take a look at some game frameworks out there? dart3.mp4
  25. 1 point
    Digital Ronin

    Help with SHADER

    Hey Ivan. I think you succeeded with that. To do this you just need a tiny bit knowledge about Shaders and one example (which one you guys did) and you are ready to go. I as a beginner succeeded to implement shader from ShaderToy to PIXI, so that's prove something. I have one more question and it is related to the specific example of shader i linked up above. Now when I managed to use Shader in PIXI, I'm stuck up with idea how to make mask from it. I used before PIXI.Graphics to create mask. I have two containers with content's and my idea was to use that cool Shader mouse movement animation to reveal content of background container. So I would appreciate any advice with logic behind that. I don't want to bore you to death guys, but I don't have other place to go and ask for questions. Big thanks for everything!
  26. 1 point

    Platformowka - retro platformer

    Very great game reminds me of atari keep up the good work You can add free https to your website on cloudflare.com
  27. 1 point
    All right, you gave me a lot of useful suggestions. I'll implement it using PIXI.Graphics. Thank you!
  28. 1 point

    How to set full screen?

    Thanks, problem solved.
  29. 1 point
    You can get the touchmove from document and call preventdefault on that to block most of ios problems. Only thing I havent found a cure for is the swipe from left side of the screen to go to previous page. Other than overriding history with current page. Remember to set your touchlistener with passive:false, like this: document.addEventListener("touchmove", {passive:false}). As apple changed their devices to use passive true as a default option for smoother scrolling.
  30. 1 point
    There cant be anchor in graphics because graphics is not rectangular and bounds can be weird. Two ways: 1. use Pivot 2. draw planet circle that way its center is in (0,0)
  31. 1 point
    let mySprite = new PIXI.TilingSprite(resources["testpic"].texture); mySprite.tileTransform.pivot.set(200,200); //200 is center position mySprite.tileTransform.rotation += 0.1 mySprite.tileScale.x += 0.1
  32. 1 point
    Check this example:
  33. 1 point
    Oh, so it was double-pixi bug! I'm glad we resolved it It should work, because pixi.js-legacy imports 'pixi.js', its not a separate library
  34. 1 point

    Pixi.js Showcase

    Colonist.io is a web game alternative to the top selling board game Settlers of Catan. Every part of the game is made by pixi except Lobby & Chat.
  35. 1 point
    Thanks, Ivan, for the instant reply. I will look later today in the update remarks you provided. I actually did this, but found out that the Shared ticker should also be stopped as it is on by default and performance is not as good if using gsap simultaneously. Here is how I do it - let me know if you think it needs improvement: public async initGame() { if (!this.gameApp) { this.gameApp = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: window.devicePixelRatio || 1, sharedTicker: true }); this.renderer = this.gameApp.renderer; //giving id to the renderer this.renderer.view.id = 'pixi-canvas'; this.stats = new Stats(); this.stats.showPanel(0); document.body.append(this.gameApp.view); document.body.append(this.stats.dom); //registering PIXI Plugins PixiPlugin.registerPIXI(PIXI); gsap.registerPlugin(PixiPlugin); PIXI.Ticker.shared.autoStart = false; PIXI.spine.Spine.globalAutoUpdate = false; PIXI.Ticker.shared.stop(); PIXI.Ticker.system.stop(); gsap.ticker.add(this.update.bind(this)); gsap.ticker.add(() => { this.previous_time = this.current_time; this.current_time = gsap.ticker.time; this.dt = (this.current_time - this.previous_time) * 1000; }); } } private update() { this.stats.begin(); this.gameApp.renderer.render(this.gameApp.stage); this.stats.end(); }
  36. 1 point
    Hello and Welcome to the forums! I dont know how do you guys manage not find it. Its still there: https://github.com/pixijs/pixi.js/blob/dev/packages/sprite-animated/src/AnimatedSprite.ts#L227 People dont find: "AnimatedSprite.update" , "Text.updateText" and some other things. Maybe you use TS and you are afraid of "private" field? Use cast to "any" in that case. Alternatively, copy all the sources of AnimatedSrite and use your own, its supposed to be baseline class, not production stuff. It has no magic, people always need more from their animations. Alternatively, one guy made it to separate class that can be applied to anything: sprite, mesh, rope, bevcause that's just texture animation. I have it here: https://github.com/gameofbombs/pixi-heaven/blob/master/src/animation/AnimationState.ts , in pixi-heaven plugin. Requires reading pixi-heaven SpriteHeaven sources.
  37. 1 point
    Pixi has PIXI.VideoBaseTexture for embedding videos in webgl. Looking at the API I'm not seeing anyway to specify a playback time or video frame. I'd like to control the progression of frames with my code instead of the video just autoplaying. Is there any way to do this in Pixi?
  38. 1 point

    how do you use getchild?

    yes, the system has these limitations unfortunately, and I have no idea how to fix this. I help myself with jsdoc, it allow Intellisense to suggest me that the existing names and keep references in whole project, provided that I have not forgotten. It takes discipline and time, but I don't know how to do it any other way. 🙁 I am open to any idea to this subject, because it a static technique. And if you not sure in the workflow if the ref existe or are destroyed. You can do a if condition or use optional chaining this.child.SpriteName?.method(param); the ?. are useful in dynamic cases More info https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining Bench perfo are overhere https://jsbench.me/kck6knyjmg/1
  39. 1 point
    Welcome to the forums! That's because 1. you dont use antialiasing , specify "antialias:true" in renderer options. 2. curves are . You can look inside "graphics.geometry.graphicsData" if you want to see the points of polygon that were passed from pixi to WebGL. If they are bad - algorithm that converts a curve to mesh made a bad work. You can change curve settings (search it in docs and pixi sources), or you can fix that part with your own code, its advanced stuff.
  40. 1 point
    I am running into a situation when using Pixi my images are only display just as blackboxs. This is only happening when I converted from using jQuery to Native JS. I am fairly new to Pixi so not sure what issue is occurring. Broken Demo using Native JS: https://codesandbox.io/s/friendly-driscoll-1qph8 Working Demo using jQuery: https://codepen.io/Alex440/pen/yWBvBB
  41. 1 point
    const playground = document.querySelector('.video'); const option = { width: 706, height: 524, transparent: true, }; const app = new PIXI.Application(option); playground.appendChild(app.view); app.stage.interactive = true; const container = new PIXI.Container(); app.stage.addChild(container); const videoSprite = PIXI.Sprite.from('https://ak3.picdn.net/shutterstock/videos/1025738153/preview/stock-footage-in-technology-research-facility-female-project-manager-talks-with-chief-engineer-they-consult.mp4'); //container.addChild(videoSprite); videoSprite._height = 524; videoSprite._width = 706; videoSprite.x = 3; videoSprite.y = 9; const displacementSprite = PIXI.Sprite.from('https://www.kkkk1000.com/images/learnPixiJS/sprite.png'); displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); displacementFilter.padding = 10; displacementSprite.position = videoSprite.position; app.stage.addChild(displacementSprite); videoSprite.filters = [displacementFilter]; displacementFilter.scale.x = 8; displacementFilter.scale.y = 12; app.ticker.add(() => { displacementSprite.x++; if (displacementSprite.x > displacementSprite.width) { displacementSprite.x = 10; } }); const graphics = new PIXI.Graphics(); container.addChild(graphics); const path = [ 15, 60, 690, 0, 706, 524 , 0 , 470]; graphics.lineStyle(0); graphics.beginFill(0x3500FA, 1); graphics.drawPolygon(path); graphics.alpha = 0.5; graphics.addChild(videoSprite) Hello everyone, I'm a newbie. I use Pixi v5 2 day. I'm trying to insert PIXI.Sprite into the PIXI.Graphics, and it does not work. Tell me what I'm doing wrong. the sprite is in this blue rectangle
  42. 1 point
    .getEntriesAsync(100, 0) is a list of all highscores from every player (with paging) and .getConnectedPlayerEntriesAsync(100, 0) is a list of players friends. So if you want to show list of global players use getEntriesAsync, and if you want list of friends use getConnectedPlayerEntriesAsync
  43. 1 point
    https://pixijs.io/examples/#/plugin-projection/quad-homo.js Requires https://github.com/pixijs/pixi-projection/ plugin. You had problems with basic mask, so i think it will probably take several hours for you to disassemble that example and get what you want without bugs, including how to actually add a plugin to your app. Be patient, and ask help when you will be spent
  44. 1 point
    this should work: const buffer = mesh.geometry.getBuffer('aVertexPosition'); updateLoop(() => { // change 1st vertex buffer.data[0]++; buffer.update(); });
  45. 1 point
    I definitely don't recommend using Gamedistribution . It's a super FRAUD ! Not paying and cheating developers and publishers. AD IMPRESSIONS is ZERO REVENUE ??? = YES, only with gamedistribution It's a biggest scam ever?! See charts... GAMEDISTRIBUTION = AZERION = FRAUDLENT COMPANY .. I recommend avoiding them. Fraudsters will be always fraudsters! Of course their owner and employees from TURKEY, I almost forgot, so everyone from there are scammers ?? It's madness how this company can exist in 21th century and do frauds, not paying and even lie and hiding under the company that is "BIGGEST" scam ever.
  46. 1 point
    Welcome to the forums! DisplacementFilter demo is one of our entrance points for web-developers. For that kind of coders, modifying example is a problem , because they are usually trying to jump from a cliff to learn swimming Yes, displacement is cool, but if you dont know other things - you'll be stuck like this. You described your case not clear enough, there a several ways of doing what you asked that give different results. Adding something as a child doesn't mean it renders inside of it, you need to make a mask instead: container.addChild(graphics); container.addChild(videoSprite); videoSprite.mask = graphics; If it gives different result than you want to , please explain what exactly do you want, preferably with a photoshop screenshot. Also take into account that PixiJS scene is actually very close to Adobe Flash one. Most of those things exist similar to Flash. Mask example is here: https://pixijs.io/examples/#/masks/graphics.js
  47. 1 point
    Anyone coming here like me that just wants a straightforward answer on how to enable intellisense for a vanilla JS project in VS Code: Grab the TypeScript definitions for Phaser here: https://github.com/photonstorm/phaser3-docs/blob/master/typescript/phaser.d.ts Create a folder in the root of your project called defs Put the phaser.d.ts file from step 1 in the defs folder you created in step 2 Create a file at the root of your project called jsconfig.json In jsconfig.json put the follow snippet: { "exclude": [ "node_modules/**/*" ] }
  48. 1 point

    Tweens timeline problem

    So I figured it on my own, here's what I did to detect current tween: if (this.movement && this.movement.isPlaying()) { const progress = this.movement.elapsed; const currentTweenIndex = this.movement.data.findIndex(tween => { return (tween.calculatedOffset + tween.duration) > progress; }); const currentTween = this.movement.data[currentTweenIndex]; if (currentTween) { currentTween.setCallback('onComplete', () => { this.movement.destroy(); this.findPath(toX, toY); }, []); } } where this.movement is current timeline. Have a good day!
  49. 1 point

    How to Disable Font Antialiasing

    Basically you can try to increase font size like x2 or x4 and use scale.x, scale.y = 0.5 / 0.25
  50. 1 point
    Since I always loved playing bomberman as a kid, I decided to make an online multiplayer clone of the game using Phaser. I've called it "Bomb Boy Online" but it pretty much plays like the classic bomberman games. You walk around, place bombs, and try to blow up the other players. You can get various powerups that can increase the blast radius of your bombs, the number of bombs you can hold, and your speed. The game contains a lobby where you can host/join games. Up to 8 games can be in session at the same time. Here's a link to the game: https://limitless-brook-9339.herokuapp.com/ Source code: https://github.com/ahung89 Here are some screenshots of the game: