Leaderboard


Popular Content

Showing content with the highest reputation since 01/17/20 in Posts

  1. 3 points
    https://valhallaepisodes.com/ This is the first game I've ever made and released to the public. Made in Phaser 3, using React for UI elements. Full list of all technologies are available in game. It's an adventure puzzle game adapted from an old Amiga game of the same name; You must guide the Prince through the castle in order to Reach the Lord of Infinity and take your rightful place on the throne. You must think both logically and laterally to complete your objectives. Hi. This is my very first game created, and I'm happy to take any constructive criticism you guys can throw at me
  2. 2 points
    yulijun

    make jigsaw game with webpack

    tutorial for using pixi.js to make jigsaw game with webpack. try it online : http://testactivity.goooku.com/ishop-demo/jigsaw/index.html source code : https://github.com/proudcat/pixi-jigsaw
  3. 2 points
    charlie_says

    Use PIXI.Graphics as button

    Thanks @ivan.popelyshev I almost replied immediately, explaining that was exactly what I had been trying... Then when I reviewed the code, it transpired I need glasses (actually, I do), I'd made a typo in "event", so of course it didn't work...
  4. 2 points
    mapacarta

    [Phaser 3] Rookie Bowman

    Game Link: https://www.kongregate.com/games/mapacarta/rookie-bowman Hi, I published my game on Kongregate yesterday. I hardly get feedbacks on there, so any feedback is appreciated. It is a platformer game with boss fights, collectible items, secret rooms etc...
  5. 2 points
    b10b

    complex games with html5

    Unity exports to a WebAssembly and WebGL output, no "plugin" needed. But that's not to say it's ideal for web, especially not mobile web (search up Unity "Tiny" instead) Possible yes ... but consider this first ... Motion Twins' "Dead Cells" is authored with Heaps, a Haxe based game framework (which has Javascript WebGL output options). Also Motion Twins' catalog before this title was predominantly web games so they clearly have web capabilities. Therefore ... it's reasonable to conclude there's no all-blocking "technical" reason why there isn't a browser version, but there are likely many commercial or user-experience reasons why such a game isn't being published on web (yet). Same issues would likely apply / hinder any other similarly scoped game intended for web, irrespective of authoring tools? Conclusion, as always, is ** understand the audience ** ... on what platform do they want their game (big, complex, small, tiny) to be on. Or ... make web games that absolutely require, embrace and leverage the "web".
  6. 2 points
    Hello! There's one small isometry demo: https://pixijs.io/examples/#/plugin-projection/iso-basic.js However that's not how I usually do isometry. Usually I just use Y scaled by 0.5. You even don't need those "x+z" "x-z" coordinates, if you want to make tiles - take whole two-dimensional array and remove "odd" cells. Like, use only "black" cells of chess board. Then the only problem is to detect which tile is under mouse, but then it will be the only place where you have a isometry math. Everything else is just "x=x'; y = y' / 2" I have many things to tell about isometry: how to sort elements, how to make walls on tiles and intersect/sort them too, but I want to sleep. Try to do something, then I'll give you more info. and Welcome to the forums!
  7. 1 point
    Hello community, I have a Graphics, say a circle, and inside i nest another circle with addChild property. If to both the graphics i add a listener such as "mouseover", how do i prevent the "father" to fire when i'm just hovering the "child" circle? Regards.
  8. 1 point
    which edit do you have for texture packer, is it the one for the free texture packer we also added in 8.0 ? as for the gravity, yes, as part of the 8.0 version (major version increase, so some breaking changes) we revamped a bit the physic implementation to be closer to those physic engine out-there (with the will to be able to use one of them through a plugin) and as a consequence we now have a world global gravity settings that can then be lowered or amplified per physic object (instead of previously where each object gravity were managed separately), see here for the detailed changes : https://github.com/melonjs/melonJS/wiki/Upgrade-Guide#71x-to-800 but if you switch to 8.0, you can just disable the gravity by setting me.game.world.gravity to 0 (it's a vector) and you should be back to the previous 7.x behavior. last but not least as part of the WebGL testing I think we should then try to compile/link the built-in shaders and if failing then display a error message in the console and revert back to the canvas renderer, l'll look into it this week.
  9. 1 point
    Sup guys: Just trying to make a server side 3D image for my website. I want it to look just as good as the 3D images on FaceBook. I know how to make depth maps properly, I just need the code to add it to my own site. You can see a bad example using Pixi code below. Just scroll down to where it says "demo" near the bottom of the page, and scroll over the picture for the effect. This is what I want, but it has to look good, like the 3D images you see on FaceBook: Demo I know Pixi code can help me, I'm just not that smart to know how to use it. Hope someone can help. Thx. -el
  10. 1 point
    I'll try to to reduce the number of lines, I never quite captured the idea of the chrome debugger. but before I do, your suggestion gave me an idea, I might try to examine the stage property.
  11. 1 point
    I expected the visual propety to be deleted, removed from the stage. the cube object exist on the board and when I normally use this command it works fine. later in the code I discard the object and I let the garbage collector "do it's thing": user_cubes[i].pop(); user_cubes[i].pop(); and thanks for the nice greeting into the forums, I am glad to have a place to consult about my PIXI development problems
  12. 1 point
    Hello everyone, in late 2013 I started experimenting with what is possible using JavaScript/WebGL (coming from a computer engineering - C++/Java university background). Over time it grew into a game engine and then this game, as I worked on it in my free time next to full time jobs and more recently, contracting work. So it is entirely custom code (the only library used is RequireJS to load the JS files themselves), and I made all the assets as well (models, textures, music, sound effects (using some free CC licensed sound samples as a base) - you can find details in the "About" page in the game. As a result, the engine features and asset quality are rather modest. It is still heavily work in progress as the title suggests, but it has become quite playable recently, so I decided to share it here. About the game My goal is to create a fully fledged 3D space sim with procedurally generated missions that can be played on any computer with a modern browser. I am going for more of a softcore sim feel rather than an arcade one (there are many arcade options these days, but I prefer the more serious, elaborate controls of sims, without the time/hardware investment needed for something like Elite: Dangerous - which also doesn't run on my linux machine) Check out the facebook page, where I post updates and you can also find a recent gameplay teaser video. Game features (so far): full 3D, 6 degrees of freedom gameplay Newtonian physics (with flight assist) basic combat mechanics (primary weapons, shields, flight modes, targeting) 11 simple, authored missions (+3 training missions) against AI in-game database with info about the ships detailed, persistent graphics and control settings graphics settings automatically lowered if default settings are not supported by the hardware (high FPS is not ensured, only that it runs) joystick support an editor to mod the game (even more WIP/unstable than the game) Planned (missing :)) features: procedural missions, with ship upgrades in-between advanced combat mechanics (missiles, jamming, boosting, communication with wingmen) more content (ships, weapons, more detailed environments....) multiplayer Also a lot of polish, HUD changes, performance optimizations etc are planned. You can get a general idea by checking out the issues page of the game's github. Please note! The download size for the game can be significant (tens of MBs - depends on graphics settings and the mission being loaded), so I do not recommend trying it with a plan where you pay based on the amount of data! Play it here Let me know what you think! Technical info You can check out the code at https://github.com/nkrisztian89/interstellar-armada. Feel free to fork it - since it is 100% client side code, you can just throw it into the public HTML folder of your server (e.g. Apache) and it should work locally right away. Then you can use the built-in editor in the tools folder (localhost/the_folder_you_put_the_game/tools) to see how the game data files are organized, play with them (to apply the changes just hit export and then overwrite the original with the exported file in the data folder). Note that you cannot create or export missions or edit config/settings from the editor (as of now) Since this is a long project and I regularly revisit and update parts of the codebase that I might have not touched for a year or so, I try to keep it organized and nicely commented even if just for myself. However, this is not the number one priority, so there are parts of the codebase (which at this point grew above 60,000 lines) which are in terrible, terrible shape. I believe the best example of this currently is the code for the HUD.
  13. 1 point
    rolnxyz

    Pixi Filter and pixel size

    Hi, I'm trying to learn how to pass and use textures in PIXI.Filter. I have a game that uses a complex filter that takes multiple textures and behaves differently depending on the color of the pixel of each texture. It's too complicated to post here. The main problem I have is: I don't know how to measure the width / height of a pixel of the texture I'm passing inside my shader. Here I have a very simple filter that illustrates my issue: I want to create a filter that I pass the following "u" shape texture the filter uses that shape to generate a red drop shadow like this: The problem is the shader messes up and doesn't calculate properly the length of a pixel resulting on this: I was expecting to have a perfect stair going up, and I was expecting more steps on the stair (see algorithm below). Does anyone know what I'm doing wrong? Here's a link to a codepen illustrating the issue: https://codepen.io/alvaromartinlop/pen/abOvzxb?editors=0010 Here's the vertex shader: attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; varying vec2 vTextureCoord; uniform mat3 shadowMapMatrix; varying vec2 vShadowMapCoord; void main(void) { gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); vTextureCoord = aTextureCoord; vShadowMapCoord = (shadowMapMatrix * vec3(aTextureCoord, 1.0)).xy; } Here's the frag shader: precision highp float; varying vec2 vTextureCoord; uniform vec4 inputPixel; // Problem is here varying vec2 vShadowMapCoord; uniform sampler2D shadowMapTexture; void main() { vec4 shadowColor = vec4(1, 0, 0, 1); vec2 displacementCoord = vShadowMapCoord; vec4 shadowMapColor = texture2D(shadowMapTexture, vShadowMapCoord); vec4 finalColor; vec4 translateColor; vec2 translate = vec2(inputPixel.z,-inputPixel.w); for(int i= 0; i < 10; i++) { displacementCoord -= translate; translateColor = texture2D(shadowMapTexture, displacementCoord); if (translateColor.x > 0.0 && shadowMapColor.x == 0.0) { finalColor = shadowColor; break; } } gl_FragColor = finalColor; } Clearly the issue is with inputPixel, displacementCoord is not decrementing properly on each iteration in the for loop. Here's how I calculate the matrix for the texture public apply( filterManager: systems.FilterSystem, input: RenderTexture, output: RenderTexture, clearMode: boolean ): void { this.uniforms.shadowMapMatrix = filterManager.calculateSpriteMatrix( this._matrix, this._shadowMapSprite ); filterManager.applyFilter(this, input, output, clearMode); } So the question is. How do I properly calculate inputPixel so that I don't have the irregular staircase problem? Thanks.
  14. 1 point
    Rudi

    Offroad Mania — free keys for feedback

    I played the demo on GameDistribution as well. Let me start of with saying that the game looks good! There's some improvements to be made though. Like others mentioned, it should auto restart when you fall. Also, I can drive off the track when I cross the finish line! The camera.. it makes me a bit 'motion sick'. I think it should follow GTA5 rules, when you steer a bit to the left or right, the camera doesn't follow. When you're about to lose proper sight, then the camera should adapt. Steering the jeep is also a bit wonky. It responds a bit 'slowly'. Or at least it feels that way. I'd also add a check box on the control menu that pops up everytime that says 'Hide this on start'. I'd also call the 'Secrets' something else, they're not exactly secrets, more like 'Trophys'. Perhaps also add a time limit per level? To make it more challenging, or as an optional 'Time challenge' as a seperate mode. Other than that, game looks good, I really like the virbrant colors, the offroad experience is a nice theme as well. UI also looks great. And I'm loving the roarring sound of the engine, well chosen! You know what would also be cool? At the end of the level, just after the finishing line, add a big ramp, so you can jump real high! Would also be really nice if you added a slow, descending ridge all along side the parcours, which starts at a steep depth of say 5 metres. So you'll be like 'I don't want to fall in there!' And when you do, have the truck fall into pieces. The ridge doesn't have to extend into infinity sideways. Just a border of descending 20 metres or so? That way, you'll actually have an effect when you fall down, instead of into infinite nothingness. And finally, at the end of the level, you get to smash the truck into pieces after that high jump I just talked about! Or an alternative. In any case, it needs a 'reward' after you finish a level, something fun, not just a statistic. The game itself is probably not something I'd pay money for on Steam, it seems to fit better as a mobile game (perhaps you already made it an app), with say, a virtual thumbstick to control the jeep. All it needs is some polishing. P.S. I'm always curious to know, did you create the objects yourself? Also, can't believe this is HTML5! Is there a specific engine/framework you're using?
  15. 1 point
    FYI, see here : https://github.com/melonjs/melonJS/issues/982
  16. 1 point
    nice! it works well. thank you for your help.
  17. 1 point
    Thanks! I got it to work by changing the local source links to CDNs with the version downgrade. And yes, still pretty new to everything, only picked up coding a few months ago and learning to navigate all the systems.
  18. 1 point
    PRiSMiWi

    Scratchcard

    Hello, I know this question has been already answered and posted. But I am having a problem trying to achieve this "scratchard effect" https://pixijs.io/examples/#/demos-advanced/scratchcard.js I have it working nice, with a superb brush and drawing nicely from last postiion to new one, when I have one image over another and I apply a mask. It works flawlessly. No complaints at all. The problem is when I want to have this overlay as "standalone" scratchable overlay. What I mean is I want to cover a few sprites, with this overlay and scratch this surface/overlay and draw what it is under it. I am used to PIXIJS 4, and even upgraded to version 5 to try to use BLENDER_MODES.ERASE but it does not work in any way. Is there anyway to: Access overlay sprite texture Paint with the brush so we add ALPHA to the "selected pixels"? In this way i think it does not matter what's below the overlay/scratchable image, as we will draw "holes" on it and see through the sprite. Cheers
  19. 1 point
    ivan.popelyshev

    Fastest way to do masking?

    OK, i recommend to test it for pixi 5.1.5 and 5.2.1
  20. 1 point
    Hi, I'm the one who made that example. Here's a short description on how it works. The text uses only one reel as an example as all the others function in the same way: Let's say we have a position where the reel is (reel.position). This position is increased on each frame. Then each sprite is positioned based on that position. When the symbol is detected to be back to start, a new symboltexture is randomized to it.
  21. 1 point
    ivan.popelyshev

    Fastest way to do masking?

    > Also seems that using graphics for masks on V5 doesn't work on mobile for me? In a project I'm working on at the moment I have a scene with 5 masks that are simple rectangular graphics and the height of the masks is tweened on occasion. It should work. If it doesnt work - make a demo and tell us a device that doesnt work with it. We made several changes in v5 releases regarding masks, and one of them - scissor masks for rects work inside the filters too. Its not easy to debug that stuff because we have not enough reports from people. For 5 objects there cant be benefits, 5 is a very small number. Pixi-heaven sprite masks weren't ported to v5 but i can port them provided you can actually test it and report back.
  22. 1 point
    Dilantha

    Change background image

    Hello, Im trying to change the background image of a game built using pixijs. Im just wondering what is the best way to do it ?. Currently im using the below method but the problem is i have to redraw all the other child elements after i change the background. Thank you const parent = app.view.parentNode; var imagePath = "images/"+image; var landscapeTexture = PIXI.Texture.fromImage(imagePath); var texture2 = new PIXI.Texture(landscapeTexture, new PIXI.Rectangle(0, 0, parent.clientWidth, parent.clientHeight)); background = new PIXI.Sprite(texture2); app.stage.addChild(background)
  23. 1 point
    Hi, I'm new to PIXI.js and we just have upgraded our project (floor planning) from v4 to v5.2.0 We set the background to white, draw horizontal and vertical lines, two axis lines and the floor design itself and everything was working on v4 before the upgrade process. the problem that not all lines are visible correctly, some lines disappear on zoom in and appear on zoom out. here is the code for drawing the horizontal and vertical lines: draw(keepCurrentGridSpacing?: boolean) { this.clear(); this.removeChildren(); let backgroundLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundLineSize, PixiConstants.backgroundLineSizeMax, PixiConstants.backgroundLineSizeMin); let mainAxisLineSize = this.stage.getPixiConstantBasedOnCurrentScale(PixiConstants.backgroundAxisLineSize, PixiConstants.backgroundAxisLineSizeMax, PixiConstants.backgroundAxisLineSizeMin); if (!keepCurrentGridSpacing || keepCurrentGridSpacing.valueOf() === false) { this.updateBackgroundSquareSizeBasedOnScale(); } let fromX = ((-1 * this.stage.position.x) / this.stage.scale.x); let toX = fromX + (this.stage.canvas.getCanvasParentWidth() / this.stage.scale.x); let fromY = ((-1 * this.stage.position.y) / this.stage.scale.y); let toY = fromY + (this.stage.canvas.getCanvasParentHeight() / this.stage.scale.y); let startX = (fromX - (2 * this.backgroundSquareSize)) - ((fromX) % this.backgroundSquareSize); let startY = (fromY - (2 * this.backgroundSquareSize)) - ((fromY) % this.backgroundSquareSize); let endX = toX; let endY = toY; let width = endX - startX; let height = endY - startY; this.beginFill(0xFFFFFF); var color: any = PixiConstants.backgroundColor; this.lineStyle(backgroundLineSize, color); this.drawRect(startX, startY, width, height); // Draw Horizontal and Vertical Lines var i: number; for (i = startY; i <= endY; i += this.backgroundSquareSize) { this.moveTo(startX, i); this.lineTo(endX, i); } for (i = startX; i <= endX; i += this.backgroundSquareSize) { this.moveTo(i, startY); this.lineTo(i, endY); } // Draw Axis this.beginFill(0xFFFFFF); this.lineStyle(mainAxisLineSize, PixiConstants.backgroundAxisColor); this.moveTo(startX, 0); this.lineTo(endX, 0); this.moveTo(0, startY); this.lineTo(0, endY); this.stage.animate(); } private updateBackgroundSquareSizeBasedOnScale(){ let canvasWidth = this.stage.canvas.getCanvasParentWidth(); let canvasHeight = this.stage.canvas.getCanvasParentHeight(); let max = Math.max(canvasWidth / this.stage.scale.x, canvasHeight / this.stage.scale.y); let ratio = max / this.backgroundSquareSize; if (ratio < 10) { while (max / this.backgroundSquareSize < 10) { if (this.backgroundSquareSize == 100) { // Smallest grid size allowed is 1 meter break; } this.backgroundSquareSize /= 2; } } else if (ratio > 20) { while (max / this.backgroundSquareSize > 20) { this.backgroundSquareSize *= 2; } } } i'm sure it would be a small issue but i can't find anyone to help me, appreciate your efforts.
  24. 1 point
    Thanks for the reply @ivan.popelyshev. I think i got where the problem is. I was trying to understand how this particles effect works and basically i tried to emit only a particle at a time, if i increment the max particles, it will just work.
  25. 1 point
    Dilantha

    Change background image

    Hi @ivan.popelyshev Thanks for replying. Sorry if its not clear. Let me explain further. Im creating a simple jigsawpuzzle game and Im following the method explained in below thread . Now i want to add a background to the game. For that im using the method i have explained in the post. My problem is, whenever i change the background image i also have to redraw the puzzle pieces again. So im wondering is there a better way to do this where i can just change the background layer without having to redraw all the pieces ?
  26. 1 point
    Make some kind of a grid algorithm PixiJS doesnt have anything in the package, we dont handle collisions. Grid usually is coded by users themselves.
  27. 1 point
    We are lazy. We use a physics engine (or collision library). Wikipedia is quite enlightening. Optimization is done mostly through pruning and partitioning.
  28. 1 point
    Hey! Thanks for commenting, I’m still developing although in a bit slower pace as it didn’t get a lot of feedback here, which I hoped for. But I hope to get up to speed again! Backend is .net core (c#) with communication over websockets(SignalR). Hosted on an ubuntu server with docker. Frontend was plain js which I struggled getting smooth 60fps with. So I rewrote it using pixi.js, which made it easier to achieve 60 FPS. I’ve also changed focus a bit, to make it available on phones, so right now I’m working on getting the combat smooth on phones.
  29. 1 point
    After playing around for a bit I am impressed, and as a lover of Tibia I am excited to see this project develop! Would you talk about your tech stack a bit? (i.e. what you use on the frontend and backend, graphics libraries, etc)? That would be amazing to hear about! Thanks for sharing!
  30. 1 point
    ivan.popelyshev

    Scratchcard

    Hello! This is my example that was added before we had ERASE blendMode. There are several ways to do the same thing. Yes, there's an easy way to do it through ERASE blendMode in brush sprite, if you draw that brush in overlay renderTexture. That way you dont need masks/filters, you just need a sprite with renderTexture over everything. But, even if you described situation correctly, you made something wrong if it doesnt work for you. Please share your demo in pixiplayground.com or jsfiddle or codepen. One of ways to debug whats going on there is to use https://spector.babylonjs.com/ , it can capture one frame and give you information about webgl commands inside.
  31. 1 point
    @gogoprog have help me to solved this problem. And this topic is closed. Thanks everyone.
  32. 1 point
    Here for you if(resource.extension === "mp4") { const texture = PIXI.Texture.from(resource.url); const videoSprite = new PIXI.Sprite( texture ); /**@type {HTMLVideoElement}*/ const videoControler = videoSprite.texture.baseTexture.source; videoControler.currentTime = 0; //jump to 0 will also autostart videoControler.onplay = function() { //TRIM VIDEO after loading or onplay videoSprite.texture.trim = new PIXI.Rectangle(0,0,400,400); videoSprite.texture.frame = new PIXI.Rectangle(0,0,400,400); }; app.stage.addChild(videoSprite); } Don't ask me why but you need do the thing async ! or pixi going crazy with gl error. So perform this inside on start. I can't investigate more because you don't join me a `launch.json` for debug in IDE.
  33. 1 point
    rkrasky

    Render only on change

    Hi all! First - thanks for the great work on PIXI. But now to my question. Is it possible to render only when there are visible changes? So not 60 times a second. I'm currently hanging on to the interaction manager and listen to almost all mouse and touch events. I also monitor DisplayObject.alpha, Sprite.tint, Sprite._onTextureUpdate, Transform.updateTransform, Transform.updateLocalTransform, Transform.onChange as well as Text.updateText and Text.text. As soon as changes are made there, I set a flag so that I can manually call the render function. Is this correct, are there easier ways? Thank you in advance!
  34. 1 point
    Antriel

    Game loop advice

    With a brief look, I don't see anything wrong with the implementation. I would say it all comes down to `ctx.imageSmoothingEnabled = false`, which will cause the pixel positions to be rounded (which is desired for pixel-perfect pixelart game). At 60 FPS you sometimes get a pixel movement, sometimes don't, and not moving is essentially a frame skip, which at 60 FPS is visible. At 144 FPS, not so much (i.e. the timing is much smaller, so it's closer to reality). You can test that by playing around with speed setting, making it work well in 1/60 intervals. Although looking at your code, speed of 20 should work well (1 pixel every 3 frames). Try logging rounded position delta every frame and see if there's jitter or not. Repeating 0-0-1 should look good. Something like 0-0-1-0-1-0-0-2 will not. @Milton No, it's correct. It's simply an implementation of fixed timestep with rendering interpolation. When `dt` comes back smaller than `STEP`, rendering interpolation still makes the movement necessary. Thus allowing for a game with low logic rate (e.g. heavy physics running at 30 Hz) still render nicely on modern desktop with whatever refresh rate the display/gpu manages (~144 Hz, but anything really). Using `dt` directly would make anything with higher differential order non-deterministic and unstable (e.g. applying acceleration).
  35. 1 point
    In this case I am making the width smaller, so I was expecting it to be cropped just like the images. This is why I have manually set the frame with and height of the sprite to the known video dimensions. That's what I tried to do, hence my minimized example above. But you are right, of course the images and video are missing, so I created a full, self-contained example that I attached. There you can see that the video get's extended instead of cropped – as opposed to the images that get cropped to half their width. Thanks for having a look! videoCrop.zip
  36. 1 point
    I just now found the time to give this another try and just wanted to let you know: With the updated CDN file it works perfectly now! Thanks so much for your quick help, you saved my day! Great library and great support here in the forums. Thanks!
  37. 1 point
    Allen T

    ALIENbit - A very bad alien

    Not bad little game, like a gameboy color game. That boss face is SCARY 😌
  38. 1 point
    @ivan.popelyshev Yeah, the answer is not for newbies, I will need to learn this to implement. (im doing this right now) Can I stay this post OPEN to make new questions when I need? TY @eXponeta for the answer! My case its much more simple than your, but I will need to learn what you say to implement. Thank you!
  39. 1 point
    Hi, I am using PixiJS version 5.2.0 with the compressed-textures plugin version 2.0.3: If two dds-images are placed directly next to each other in a container and the container is scaled, a thin strip appears between the two images: If the scale of the parent container is exactly 1, no stroke is visible. With PixiJS 4.8.8 and compressed-textures-plugin 1.1.8 it works correctly and no stroke is visible. When the PixiJS scale mode is set to nearest (PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST) no stroke is visible (but the images becomes a little bit blurry). I suspect this is related to the interpolation constraint of the scale mode LINEAR, but I'm not sure if this is a PixiJS problem or a compressed-textures-plugin problem ... This is the complete code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>PixiJS v5 Compressed Textures Bleeding</title> <script src="https://cdn.jsdelivr.net/npm/pixi.js@5.2.0/dist/pixi.js"></script> <script src="https://cdn.jsdelivr.net/npm/pixi-compressed-textures@2.0.3/dist/pixi-compressed-textures.min.js"></script> </head> <body> <script> //PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST const app = new PIXI.Application({ width: 1024, height: 512 }) document.body.appendChild(app.view) new PIXI.Loader() .add('photo1', './1.dds') .add('photo2', './2.dds') .load((loaderInstance, resources) => { const sprite1 = new PIXI.Sprite(resources.photo1.texture) const sprite2 = new PIXI.Sprite(resources.photo2.texture) sprite1.width = sprite1.height = sprite2.width = sprite2.height = 512 sprite2.x = 512 app.stage.addChild(sprite1, sprite2) app.stage.scale.set(.8, .8) }) </script> </body> </html> Has anyone a good idea? Siddi
  40. 1 point
    OK, done, npm 2.0.5 , or "dist" folder of the repo.
  41. 1 point
    Congratulations, you've found a bug! https://github.com/pixijs/pixi-compressed-textures/blob/6fa56acaa6a98863f3f00bdf2ed2be16f864f42d/src/CompressedImage.ts#L125 - compressed textures didnt handle CLAMP/REPEAT at all
  42. 1 point
    Yeah, i think @eXponeta solved that for his game. He can make you simple demo because his code is usually reusable
  43. 1 point
    Actually, I do not consider html5 as a way to earn money for now. It's a hobby for me and maybe only in the future, I'll be able to do freelancing. Nowadays I just try to use decent financial tools in order to keep my money save. For example, on this review, I found information about one visa credit card. It's quite advantageous because it has no yearly fees.
  44. 1 point
    bliitzkriegx

    Sprite blending

    Does anybody have any suggestions on how I can get this effect using PixiJS? I'm new to PixiJS and game development in general so any suggestion would be great. How I think it works is that the water sprite is rendered on a higher layer and has its edges transparent. The only thing that doesn't work when I think about it this way is that the cells overlap eachother which doesn't make sense if each cell is in a grid at a fixed size. Hope somebody can help demystify how I can accomplish this in PixiJS. Thanks
  45. 1 point
    8Observer8

    collision in js + three.js

    I read in this article Real Time Multiplayer in HTML5 that we should to create a fixed physics loop on server and on a client. Server should have high frequency loop for physics and low frequency loop for sending messages to clients. I upload the example from the article on the free Heroku hosting https://battle-world.herokuapp.com/?debug You can run it in two browser windows. Free hosting has limits. If no one runs the application 30 minutes the server will sleep until someone wake up it. To wake up server you need to wait 10-15 seconds.
  46. 1 point
    jasonsturges

    Change cursor view in PIXI.js

    Since this is the #1 Google Search result for changing Pixi cursor, just noting the URL appears to have updated: https://pixijs.io/examples/#/interaction/custom-mouse-icon.js
  47. 1 point
    samme

    Tween inside mouseover event

    var tween = (undefined).add({ targets: heart, alpha: { value: 0, duration: 3000, delay:2000}, });
  48. 1 point
    @ivan.popelyshev AWESOME! I knew it was something logical, was going crazy there for a while. Thank you very much! Now a followup question: How would I go about using another image as the "renderTexture", so instead of using WxH pixel values use an image instead and therefor being able to count pixels that are not just 400x400. Here is a fiddle with updated assets. Hope that makes sense, not sure how to explain it..
  49. 1 point
    Hi there, We are trying to make a very innovating web game and we are seeking developers or a team to create our game. We are not yet decided on frameworks or any technologies. Although we are very interested in HTML5 & no flash. This game will be very social media integrated. Here would be a sample but just much more creative.... http://www.lunarcafe.com/fun-games/3-card-tarot-reading-free If you believe you can help, Please email me at: Arian.y@pacificmez.com Thank you