Hachi

Members
  • Content Count

    26
  • Joined

  • Last visited

About Hachi

  • Rank
    Member

Recent Profile Visitors

930 profile views
  1. After you replied to my post I remembered your name, You're making that Civ like engine right? How's it coming on?

  2. Just some thoughts that came up when testing it. - I think the game sound should pause when the game pauses (e.g. when you switch tab). - You should be able to see the options for upgradeable menus, before you upgrade, as you have "no idea" what they hold before you upgrade.Of course using them would be locked, but seeing what awaits you is important. - The functionality of setting up the machines is kinda annoying for me. I mean when you open the semi-transparent menu and select something, it stays active / selected until I press x. It should at least not show up as active, when you hover over the menu. Otherwise you get the feeling: "If I click now, will it setup the machine as it shows up on the map" - Floors and walls could be on the same upgrade. As now I kinda see no point of having tiling, without being able to expand your arcade space. - How about an option to keep the game active, when tab is switched or speed up the game, so if you have nothing to change for now, the game can still go on. Or then add small tasks that you can do no matter the money. - I think the game so far has too little data to make decisions on. So e.g. how much have one machine been used, how happy customers are with it and how effective is the pricing etc. Though I just suspect there it at least a bug as it shows "earnt: 100" in all of them ;). Though arcade is dead (oh sorry, I'm just trolling there :D), It's a really cool game concept!
  3. I get the following error: [.Offscreen-For-WebGL-000001AC0475EBB0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: range out of bounds for buffer This happens when the map I have is zoomed out / scaled to big enough size (scale less than 0.5) and I use drawRect of drawRoundedRect on graphics object. It does not occur if I use drawCircle. Also the size or position of the rectangle doesn't matter drawRect(10000, 10000, 1, 1) gives the same error as anything else). This change occured in PIXI versions 4.1.1 -> 4.2.1 and seems to be present still in the 4.5.2 version. E.g. this version: http://flatworld.level7.fi/manualStressTest.html works fine, but when I update the PIXI to 4.2.1+, it breaks down. It occurs when the map is moved so that the whole canvas area is covered by objects + a little outside the browser. Seems to be related to the amount of objects on the stage / container, but not sure. So if I comment this command away: FoWOverlay.drawRect(coordinates.x, coordinates.y, coordinates.width, coordinates.height); it does not throw the error. Also the rectangle can be of any size and it still throws the error. It is kinda hard to isolate the issue from the code as I don't really know what specifically causes it and I suspect it has something to do with the other parts / sprites on the map (for what ever reason). So if you have an idea what could cause that in this case or what change in 4.1.1 -> 4.2.1 could cause this, I'm happy to receive ideas :). I will happily investigate further. Otherwise, I'll setup a "working" faulty example for you later on. I only have the working example. Basically same codebase (https://github.com/Hachitus/FlaTWorld/), but with different PIXI-version. EDIT: I updated the PIXI version to the url: https://github.com/Hachitus/FlaTWorld/ , so that is the faulty one now. The PIXI version is 4.2.1, though the same issues occur with 4.5.2 also (just rather keep lower version and introduce as little changes as possible to the mix). EDIT2: I traced it down to being related to being combination of the drawRect and particleContainer. If I use a normal container the error does not occur. There was another thread about the same error, where particle container was also used, so I thought it might be related:
  4. Thanks for notifying. I changed the link to correct one: https://github.com/Hachitus/FlaTWorld/blob/master/src/core/utils/mouse.js#L14
  5. Last time i followed guides, that one was most thorough (my knowledge is outdated). But I dont think there is anything better yet, but you can at least check the pixis own examples, you might get something out of them: https://pixijs.github.io/examples/#/basics/basic.js And my suspicion would be that most of the info is still correct at kittykatattacks tutorials, but they just dont work directly copy pasting as few really fundemantal things might have changed
  6. Hachi

    Pixi.js Showcase

    It is still a work in progress and I have not paid attention that much to any "external" usage (so e.g. documentation is out of date), but I've made an engine on top of PIXI for building turn-based strategy games. To simplify and make my aim clear: freeciv on steroids (also known as PIXI and webgl required ). https://github.com/Hachitus/FlaTWorld Simple examples can be found in http://flatworld.level7.fi/manualStressTest.html or http://plnkr.co/edit/X9XexHw65aB5Sa6xSroZ?p=preview
  7. I can not promise you it works 100% as my system hasn't been battle-tested ny outsiders so far. But I haven't found issues with it so far (in multi browser tests). So... I use these: https://github.com/Hachitus/FlaTWorld/blob/master/src/core/utils/mouse.js#L14 /** * Detects if the mouse click has been the right mouse button * * @method isRightClick * @param {Event} e The event where the click occured */ function isRightClick(e) { return e.which === 3; } /** * Disabled the right click (or something else in mobile) context menu from appearing */ function disableContextMenu(canvas) { canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); }); } So just disable context menu and check is the actual click a right click, left, click, middle click or something else. I found the context menu "hack" not working correctly in the end.
  8. I got busy, so couldn't test / implement it for real sooner . But it works A LOT better now :). Thank you! You are really a life saver with PIXI, Ivan :). I was actually having an issue with renderTexture, cause I was using separate canvas to generate the texture and using it in different one :D. Learnt the lesson hard way. I will really have to devote time to check the gameofbombs more thoroughly once I have time. It just needs a bit more in-depth knowledge of PIXI, time and patience :).
  9. Regarding using RenderTexture for that, you mean something like this? var renderTexture = new PIXI.RenderTexture(new PIXI.BaseRenderTexture(500, 500)); renderer.render(maskContainer, renderTexture, true, null, false); stage.mask = new PIXI.Sprite(renderTexture);
  10. Normal containers don't have a possibility to use blend mode? That is why I was trying out particleContainers. Otherwise I don't use them. But I do actually have a lot of sprites, for me the desktop-version has 2 layers of 1500 - 2000 sprites on screen (so at least around 3000 + fog of war), though no animation. PIXI actually seems to handle that amount quite nicely still, no issues there that I've noticed so far. 1. Now I was using Texture.fromCanvas. But I could use RenderTexture without being forced to upload a new texture to GPU each time? 4. The fog of war has a black quad and some parts cut out of it based on units / FoW sprite on the map. So I didn't come up with any solution where z-order can help. Can it?
  11. I have been trying to implement a simple fog of war a while, which means just normal "fog masking" on top of the stage. Basically it's a movable map and a big map, so the content / mask has to be generated quite frequently when the player moves the map. I have so far 4 options to try to implement it. Some I have tried and some I have issue with: 1. Masking. Failed in this. Since I need to generate a texture out of the fog that is used for masking. This was a bottleneck (I had to continuously update the texture used in the fog of war and upload it to the GPU). 2. Using blend modes. Particle containers seems to support .blendMode suggesting, that I would not need to generate a texture, just create particle container with i.e. black-and-white and make the white transparent? I think MULTIPLY should work for that. For some mysterious reason my tests failed (using v4-dev). If the particleContainer supports that and it's efficient way (not generating another texture and keep updating it or such :)). 3. Custom shader. This is very tempting and sounds best, but the issue is I hate shaders, I'm totally lost with them and I hate mathematics involved with them :). So it would take me enormous amount of time, most likely. I actually tried to test this lightMapping shader: http://codepen.io/Oza94/pen/EPoRxj , but converting it to V4 was a pain, couldn't do it. When I use the V4-dev it complains that the fragment shader has an issue. Though it works in V3 (I tested the codepen with i.e. changing it to noise shader and it works without issues, pretty much out-of-the-box so it indicates the issue would be with some changes to filters v3 -> v4 or with the shader). If it help, I still have open the codepen for trying out noise shader there: http://codepen.io/Hachitus/pen/JKvywp and here is the light map shader that uses newer pixi (through rawgit): http://codepen.io/Hachitus/pen/bZrAzG and complains "Could not initialize shader.". 4. Using Canvas-only and blend_modes / globalCompositeOperation to cut the areas. I've actually done this before when I was working with easelJS and that was pretty easy. But PIXI seems to handle the things a bit differently, since webGL is involved too. And using canvas2D might not be the most effective method, so I have not checked this option very far. I'm mostly interested in should particleContainer work in this case perfomantly? And what might be causing issues converting that lightMap shader from V3 -> V4? If I would be able to fathom using shaders in filters a bit better, I might try some ready glslify-shaders, but that's a really long way to go for me.
  12. Hachi

    generateTexture (v4)

    I guess using separate canvas should fix the issue, like instructed here: (and in this plunkr I tested it with) https://plnkr.co/edit/FF6HUUN88kmEHu8HDRRa?p=preview Though I haven't yet checked do I get any issues in my particular case, but it should be fine with that.
  13. I am trying to set a mask up, with generateTexture. The only problem I'm having is the placement of the sprite / container. From what I understand generateTexture should take sprite or container position into account, right? If not, then I'm wondering what are the alternatives? If it should, then I'm wondering what I'm doing wrong? There is a plunkr of it here (https://plnkr.co/edit/HU9YwhqBiRfG5J1mILxG?p=preview). The only relevant parts are lines 88 - 108, everything before that is setting up the game (preloading etc.). It works correctly, but it might be difficult to notice the mask, but you can notice it when you drag the map around. This is because the mask is not where I would intend it to be, since it seems to ignore the position (sprite and container position).
  14. Just to quote goodboydigitals blog: " PIXI.GC_MODES.DEFAULT = PIXI.GC_MODES.AUTO; " (http://www.goodboydigital.com/pixi-js-v4/). Is this convention ok in PIXI code, to change variables that are (in principle) marked as "constants"? I have already one convention of changing scale modes DEFAULT to something else, so that it works in all the situation with pixelation strategy. But I wouldn't want to do that as I regard that as a bad move (without yet coming up with a better way). In normal javascript coding standards, you wouldn't change variable that is capitalized to anything else, as de-facto it is treated as constant. So: 1) Is it ok to change those "constants" (any of them)? Or are they subject to be changed with the assumption that they should be and are treated as constants? 2) Why are they capitalized if they are also "supposed" to be changeable? So why not leave default as normal and others as capitalized?
  15. I assume you are scaling something with plus and minus. How are you managing the scaling? You have something special regarding it?