Leaderboard


Popular Content

Showing content with the highest reputation since 04/25/19 in all areas

  1. 2 points
    Exca

    Redrawing only when needed?

    I have a method where I have two different changes that can happen in the scene. Tweens and handlers that get run every frame. For tweens I check if amount of active tweens creater than 0, then it means that something is changing. For onrender-handlers I have a custom component that allows for components to register themselves to get onrender -events and their return value will tell if something has updated. If either tween has updated or any of the components requires rendertime, then that frame is rendered. Otherwise no render will occur. In some cases this can be improved by splitting the scene into multiple canvases. One that gets updates rarely and one that holds the actual gameplay and is updated frequently. Though using that method is something that should be clearly thought out beforehand or you'll end up with multiple canvases to render each frame. Having render loop stop completely is something that you shouldn't do. As calling requestanimationframe is really cheap and not worth the trouble to build a mechanic with renderloop cancellation. Easier to just skip rendering on frames that dont need it.
  2. 2 points
    Anchor and Pivot are your friends. If you don't wish to use them because you want to maintain left alignment then consider using a child Sprite, or other arrangement of Containers. Then you can freely adjust the anchor (or pivot) of any child, do the transformation as would be intuitive and the parent will be unaffected. There is minimal overhead in using children and they can improve code readability and maintenance. The alternative (using a single Sprite) involves translating (x=-width) before the flip (scale.x*=-1) or rotation, then translate back again when done. It's unlikely to feel as intuitive - and is likely more prone to mistakes or confusion later?
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 2 points
    jonforum

    Line of sight triangles in v5

    It reminds me of what has been implanted in this game. https://ncase.me/sight-and-light/ I suppose that you have already got your hands on these articles, I share them in case. it in canvas no pixi but it will be cool to see this in pixidemo ! a codepen ** https://codepen.io/xno/pen/YOQZzw https://codepen.io/pandaec/pen/rzxYNB a jsfiddle ** http://jsfiddle.net/nLMTW/ http://jsfiddle.net/s2un50dp/ Shadertoy ** best performance i think https://www.shadertoy.com/view/4dfXDn Some code for do it in a shader GLSL https://stackoverflow.com/questions/34708021/how-to-implement-2d-raycasting-light-effect-in-glsl and a very good article https://www.redblobgames.com/articles/visibility/
  8. 2 points
    Exca

    creating a animated soft color

    You can do that with vertex shader by giving each vertice a color and then gpu interpolates between those points. Or you can do the calculation in fragment shader to get more refined look. Here's an example how it could be done with fragment shader https://www.shadertoy.com/view/tls3zS For info on how the color palette is done read this article http://www.iquilezles.org/www/articles/palettes/palettes.htm
  9. 2 points
    khleug35

    Space Shooter J Hit

    Hello Everyone. My new HTML5 shoot em up game made using Panda2 This game can play on mobile or desktop, but this game is no sound yet. Special thanks to @enpu, @Stephan and @Wolfsbaneteaching me coding skill, really thanks This game can play on mobile or desktop Try the game in here , hope you enjoy: https://superfranco.itch.io/space-shooterjh Android Version: Google Store Link ScreenShot: How to Play? For desktop control W key - Up A key - Left D key - Right S key - Down P Key - Pause the Game Space - use subweapon For Mobile control You can control the ship movement with JoyStick Click or press the icon to use subweapon and Pause the game. You can destroy the enemy and get money to buy a new ship and upgrade them. Mega Bomb - Mega Bombs damage and clears all forms of the enemy from the screen. When upgraded to level 3 or above,it can also clear enemy gunfire or bullet. Laser - Laser allows you to deal massive damage onto your enemies. Energy Shield - Energy Shield can protect player, When upgraded, it improves the duration of the shield. Mobile version. Android This is a classic vertically scrolling space shoot 'em up game. It has 9 levels with Easy and Hard unlocking regimen. The Hard mode can make double the amount of stars as your reward. You can go to store to upgrade your ship and buy a new ship. How to play -Control the ship movement with JoyStick -Click the icon to use subweapon and Pause the game. Item- Coin - Dropped from enemies , you can take this to upgrade your ship and buy a new ship. Health - Heals 20% of your ship. Subweapon item - increase one Subweapon amount of use. SupWeapon Mega Bomb - Mega Bombs damage and clears all forms of enemy from the screen. When upgraded to level 3 or above,it can also clears enemy gunfire or bullet. Laser - Laser allows you to deal massive damage onto your enemies. Energy Shield - Energy Shield can protect player, When upgraded, it improves the duration of the shield. Ship upgrades are Attack -power of bullets from main cannon. Speed - speed of ship. Health - endurance of the ship. SupWeapon - increase your SupWeapon power or improves the duration of the shield. If you clear all the stage with Hard mode. You are successful to complete the game. Made With: https://www.panda2.io/
  10. 2 points
    If you don't need gradients, there is this clever 3 sprites approach :
  11. 2 points
    themoonrat

    PIXI Interaction Touch

    You rang, m'lord? @JECKL try looking at `renderer.plugins.interaction.eventData.data.global` instead
  12. 2 points
    We are working on full example for playable ads with hacks for pixi loader that allow to bundle everything including Spine models into one file . You can either wait 2-4 weeks or do it yourself.
  13. 1 point
    al3abmizo

    We'll help you promote your games

    Hello, Actually, this isn't a script, it's a handmade site. I am a web designer and developer and created it since 2013, with some regular updates, it finally became as you see now.
  14. 1 point
    I am creating a game, where a lot of tiles need to be rendered. My goal is to render with this method at least 500k tiles. Since the tiles won't be redrawn every time but moved, this method should work out. I am using the pixi-tilemap library to create a fast & simple renderer to render a dynamic tilemap. The renderer approves itself to work, but .position.set seems to pull the tilemap from the interface away. I know, the function .position.set does not contain the same parameters as the one of the demo, however this function also does not work with the parameters of the demo. Some parameters must be added. The tutorial I have been using this classic demo: https://github.com/Alan01252/pixi-tilemap-tutorial
  15. 1 point
    1 should work, you can just add "app.stage.scale.set(yourScale)" and change position if you want to add letterbox. Usually I position canvas itself, and scale the stage.
  16. 1 point
    I have updated the pixi tilemap renderer. However it seems that the the .addFrame function has some sort of limit, as it displays at a certain point only a specific amount of tiles. Ivan, can you check the renderer, if I am not wrong please. Fully working renderer: https://github.com/StephanHQ/PIXI-Tilemap-Renderer
  17. 1 point
    !untrue

    Redrawing only when needed?

    How I usually use Pixi is that the render loop will just keep going. Which is fine for things that are undergoing constant change and interaction, but I'm considering using Pixi for something more static... something that'll display a certain thing.... be interactive and respond when needed, but really be doing nothing most of the time. What I'm concerned about is the idle CPU usage... it uses a relatively small amount of CPU to leave the whole thing running at 60fps doing nothing, but it feels inefficient and wasteful. (As a user of an older mobile device, it really drives me nuts when I encounter a site that's inexplicably a performance pig.) I'm just curious what other people are doing in these situations, and how you approach this. Does it make sense to exit the render loop when everything is finished updating, then have an event put us back in? Can you stop/pause Pixi itself? Or is this just more trouble than it's worth?
  18. 1 point
    Hi. Is this still relevant? I'm interested in collaborating with your team.
  19. 1 point
    I've been struggling to find a bit of paid work lately, so I have been working on a set of assets that I intend on packing up into an asset pack, the character is in the style of a project that I am currently working on in Phaser 3 titled: "Karzak The Slayer" where you play as a barbarian that has had his victory feast stolen by some mischievous goblins. The tile are nothing alike that project's tiles but any way, I was hoping to supplement the income I have from the days or work I find labouring here and there or odd contracts and this was the best way I could come up with. I started thee project when I was homeless which wasn't too long ago, and a friendly donation from a member of a game development community helped me out of that situation, where I am now under a roof and attempting to get things back up and running, struggling to find work is quite stressful and having my laptop stolen recently, I lost much of the work I would have used for my portfolio, so I decided to start this as a new portfolio piece and as a potential trickle of funds that I would divert to things like my Karzak project IF it gets anywhere. I started this post because I don't quite know of anywhere to post about it, collect feedback or opinions and the like, being an artist I struggle to think of what a programmer or non-creative would consider when looking for a pack of assets for use in any kind of development. I have tried many places like the itch.io devlogs, facebook and other sources to attempt to get some feedback, but people just like or share and rarely read the posts on facebook, which doesn't help when you're seeking information! So if any of you have some time (I apologize in advance if this isn't a good place for this kind of post) I do have some questions not only regarding where would be best for this kind of discussion but about the pack itself (I will share links below) To consider purchasing an asset pack, what do you consider essential? When looking at a character's animation set for a project's prototype asset or final asset, what animations are rarely there when you're developing your prototypes and have bought an asset to use? Do you prefer to get a whole set of assets intended to be used together or do you mix and match? ... I do have more questions but I have a doctors appointment that I cannot miss and time is getting on, I will add more later. Asset Pack Previews: Album link - https://imgur.com/a/r4qs6Dy The above link contains animation previews of both the character and a handful of the enemies, UI previews and some basic tiles I've made. All of the tiles are at 16x16. Monkey Boy Character Asset: I genuinely struggled when it came to the character, I had no idea of what to create, my mind was completely blank, but I didn't want to sit around doing nothing and I hit a creative block in the level design for my project Karzak, so I felt that I needed a little break... Anyway, a random thought came to me about Monkeys and so I decided to make a Monkey-like-Man or as it turned out, boy, and that's how the character was spawned into existence. The style of Karzak was well received and that was just with the prototype art so I decided to use a similar style with these assets and I hope that is instilled in the character, these previews above are not finished though and will get a lot of polish before they are released, but that style will remain the same throughout. Hopefully you can tell that the run style is intended to be a man/boy mimicking a monkey's run. The animations that caused most issue where the jump which there isn't a preview for yet, and the death, I couldn't figure out how I wanted it to look, there will likely be multiple death animations eventually though as I intend on updating the pack a little even once the baseline set is polished and released. At first I wasn't quite sure about the character, I was really unsure in fact about how it looked but it grew on me and now I quite like it! The Snail Enemies: The idea is that these enemies would be able to transition to a vertical climb obstructing the player at times or causing the player to have to get hurt to avoid a greater or stronger enemy, but these blue ones can only move in one direction, whereas another coloured variant would be able to turn around and move the other way, following the direction of the player but sticking to whichever surface they are still on. There is intent on adding an enemy that does this but can hop to local tiles in pursuit of the player. There is a slime enemy that is not yet finished, A giant fish that leaps out of water to get to the player across certain deep water gaps, plant based enemies that are ranged and melee that can leap out of the background to strike the player based on many variations in mechanics or triggers. Conclusion: There is still a great deal of work left to finish on these assets, and it is at this point, taking some time away from my project Karzak, but I am having fun and hopefully it helps a little in the long run with supplementing a little trickle of funds towards it. In any event, it will help me update a new and fresh portfolio with some content that is consistent. I hope to get some feedback from potential users or people that have used assets in the past. -------------------------------------------------- Karzak The Slayer: Title Screen Logo - https://imgur.com/8jLPwa0 Character & Enemies - https://imgur.com/l8yYjHY Old Phaser 3 Demo Screenshot - https://imgur.com/S0fseQt Karzak Animations - https://imgur.com/wIcLPmz Updated Tiles (Style) - https://imgur.com/g4jROEN - https://imgur.com/ruoXbVn -------------------------------------------------- Random animation samples: Goblins - https://imgur.com/a/BwZS3 -------------------------------------------------- I hope you're all having a good day and developing some awesome projects! Kind Regards, Patrick.
  20. 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.
  21. 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.
  22. 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!
  23. 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.
  24. 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
  25. 1 point
    Hello! I have a square picture,Now I want to cut this picture into a hexagonal picture without using photoshop. Is there any good implementation idea? mask?or frame?
  26. 1 point
    I want to restrict the size of the applied filter on canvas. In the below codepen i have set the displacement filter and moving it according mouse position. But the problem is it's covering entire background. I want to fix the size of the filter. I'm new the Pixijs and any help is appreciated. https://codepen.io/ajitcj/pen/yWOaaY
  27. 1 point
    Hello, nerds ! Happy v.5 release also ! So I`m making pinch to resize(zoom like), stretch and shrink(which is basicly resizing to constant values) over class that extends Sprite or Container. I`m not defently sure what I should extend. My class has methods resize(newWidth, newHeight), stretch() and shrink() . For ease I will call the class Player which extends Sprite or Container with the 3 additional methods. Everything was okay when the parent was Sprite with texture. Then I had to add as child different sprites. So the composition went complex and the algorithm went to the trash. The composition is: Player - extends Sprite or Container, methods resize(newW, newH), reposition(newX, newY), stretch(), shrink(); Background1 - extends Sprite, has texture; visible only when stretch() is called; size - 50x50 Background2 - extends Sprite, has texture; visible only when shrink() is called; size - 100x100 Video - extends Sprite, has texture; always visible; initial size - 500x500 Label - extends Sprite, has texture; visible some times only; size - 70x70 Text 1. At the begining the Player instance has to be shrinked. So the size has to be 50x50. If user tab it, it has to stretch with size 100x100. 2. If user use pinch when it is stretched it has to resize. The question is: In my methods resize(newWidth, newHeight), stretch() and shrink() which children I have to scale, change width and height and so on. Where the factors are - the Background sprites are with different sizes and changing its visibility and the Video sprite is with bigger size than the need. Additional(useless): I tried a lot of things but there is no success. And maybe I`m wrong with something small. If the problem is not clearly defined I`ll make changes! Thank you very much !
  28. 1 point
    You are lucky! We are working on examples for playable ads. Unfortunately, they are not available yet. Wait a month or two. Also "no one ever posted their code for the issue" is MY phrase, that's how I explain people why is feature X not available. Someone asks help, I provide a few snippets, they make their app and do not share the result. Then second person asks the same thing. Then third. On 10-th attempt we have a hero who makes an article or repository and shares it with community!
  29. 1 point
    Its cool that you used WebGL for this, and the code is easy to read. Nicely done. I found bug in this example. When snake length is greater than 1 and its moving right when you press up arrow and then left arrow the game resets.
  30. 1 point
    Too bad that the forum was down for so long... anyway I peeked at the problem that Ivan encountered in his V5 demos, and found out that syncUniformsGeneration function generates empty function (full story can be found here). Having done that I went back to v4 and got the thing working, with one little caveat that I feel like is worth mentioning. When testing out filters I found out by default the last shader is set active.So if you have multiple shaders setup, you'd have to manually "activate" appropriate shader before writing to uniforms, otherwise webgl would swear at you in console with red errors. In order to do that, however, you'd need access to shader created by this line (cached one will also be fine) 19478: shader = new _Shader2.default(this.gl, filter.vertexSrc, filter.fragmentSrc); However, it is a local variable of FilterManager's applyFilter function, so I ended up using this monstrocity as a workaround PIXI.InjectedApplication = class InjectedApplication extends PIXI.Application { constructor({width = arguments[0], height = arguments[1], options = arguments[2], noWebGL = arguments[3], sharedTicker = arguments[4], sharedLoader = arguments[5]}) { super(width, height, options, noWebGL, sharedTicker, sharedLoader); var oldSyncUniforms = this.renderer.filterManager.syncUniforms; this.renderer.filterManager.syncUniforms = function(shader, filter) { //shader is NOT of type PIXI.Shader but of _Shader2 ! //Call "vanilla" sync uniforms oldSyncUniforms.call(this, shader, filter); //Then call custom one if(filter.syncUniforms) { filter.syncUniforms(shader); } //Save references to filter //in order to be able to switch active shader. filter.__program = shader.program; filter.__shader = shader; }; } updateShader(shader, func) { //this.shaders is just a map of PIXI.Filter shaders let shdr = this.shaders[shader] || shader; let prev = this.renderer._activeShader; this.renderer.bindShader(shdr.__shader); //Make shader use program (openGL terms) func(shdr); //Execute function app.renderer.bindShader(prev); //Bind previous original shader back } } And the use example is simply this: function mouseMoveHandler(e) { let newpos = e.data.getLocalPosition(app.stage); app.updateShader('squareshader', function(shader) { //_uniforms are my custom uniforms and squares is array of structs in GLSL shader._uniforms['squares[0].coords'] = new Float32Array([newpos.x, newpos.y]); }); } Thank you, I already knew that. To my knowelage this also applies to arrays, ex. struct SomeInfo { vec4 color; }; uniform SomeInfo c[2]; to access 1st color the correct string for position getter would be "c[0].color"
  31. 1 point
    Exca

    Line of sight triangles in v5

    I have done similar thingie with v3, though it was heavily optimized with assumptions about what kind of lights there were, what was the world size etc. What I did in short was this: - Build a texture (2048x2048) with all the shadow casters in it. - For each light, do a raycast to 512 directions (on gpu) and build a 1x512 texture with each pixel value telling how long the light can go from that point. - Render lights using that texture (calculate angle, check if distance is over the value in texture, if it is, ignore pixel, otherwise draw light with light settings). - Draw lights into a single texture and blend that with diffusetexture. - Split the lights into static & dynamic groups for performance. That solution also included normal mapping but in this case that's not needed. Maximum world size was 2048x2048 in this case, as everything had to fit inside a single texture.
  32. 1 point
    Dude, you're amazing. You always reply right away! > Need ES6 or something like that in the libs., I dont remember exactly. I trid that, no luck > Workaround: If you dont use webpack and other things you can just copy that file to your libRoot or somewhere in your project and remove those lines. Unfortunatelly I do use webpack > That's how pixi-spine works: https://github.com/pixijs/pixi-spine/blob/master/tsconfig.json#L13 I tried the different parameters in that tsconfig.json without sucess. So I'm likely missing something. Anyway, I solved it by removing those 3 lines out of pixi.js.d.ts Now I'll spend some time porting the existing code Very excited to finally try 5.0! Cheers
  33. 1 point
    jonforum

    Line of sight triangles in v5

    hum, if am not wrong, this kind of stuff should be done in a shader to get good performance. Di you check work of this guys. https://tarvk.github.io/pixi-shadows/build/demos/system/ https://github.com/TarVK/pixi-shadows i think it similar of what your target? a kind of Ray casting. Also @ivan.popelyshev show here how proceed with a kind of ray shadow from a source with shaders. Maybe play with can inspire you. https://www.pixiplayground.com/#/edit/5bqI8BM2qadFFt8eCWc7n ... this will mean, high cpu work instead of gpu ? hope those link can't help you. Also if you can share some code this will help to understand.
  34. 1 point
    Hello, guys! I need some mechanism which can take text and retrieve polygon coordinates of it. Is it possible by using PIXI.Text()/Pixi.BitmapText()? What I mean is: https://p5js.org/reference/#/p5.Font/textToPoints If not, then maybe there is it possibility to parse coordinates from image (png)? Can you, pls suggest something?
  35. 1 point
    Wolfsbane

    Space Shooter J Hit

    Hey, congrats on finishing another game. I've given it a go on PC for the moment, and got so far as stage 6. It plays really well! And looks pretty good. But no sound? Will play on the Android version a bit later, and let you know how that plays. 👍
  36. 1 point
    BdR

    Link It Up!

    Saw it on the WebGames subreddit, pretty cool platform puzzle game
  37. 1 point
    DrSnuggles

    JavaScript nested array stumper

    yes, init of the new object in the array is important. It's important because later you want to access gear.something and gear has not yet been created. That's where the error is coming from. JS can not DIM an array from begin like it is possible in other languages. You can DIM with var myArray = new Array(20) but this just creates empty entries and not objects, so you cant set the property "cost". Have look here: https://www.w3schools.com/js/js_arrays.asp var myArray = []; Dim(myArray, 20); // maybe you like this more than the for i=0;i<myArray.length;i++ loop for (key in myArray) { myArray[key].cost = 20; } // another way to fill it myArray.forEach(setDmg); console.log(myArray); // shows filled array function Dim(arr, size) { for (let i = 0; i < size; i++) { myArray.push({}); } } function setDmg(entry) { entry.dmg = 10; } Working with the good old arrays is absolute no problem and a clean way to do that. Try to make it easy for you to understand that code again if you dig it out in some years.
  38. 1 point
    DrSnuggles

    JavaScript nested array stumper

    [] = array {} = object That's right and important this here works. I'm doing hard finding the prb without weaponsList. var weapons = [ { name: "Knife", rank: { damagePerClk: 2, cost: 1, }, }, { name: "BFG", rank: { damagePerClk: 9999, cost: 500, }, }, ]; for (var i = 0; i < weapons.length; i++) { console.log("Name: "+ weapons[i].name); console.log("damagePerClk: "+ weapons[i].rank.damagePerClk); console.log("Cost: "+ weapons[i].rank.cost); } it looks like you want to init your weapons in the initGame function. several way to do that. var weapon = []; var weaponList = ['Knife', 'BFG']; var spell = ['Light', 'Fireball']; function initGame() { var wLength = weaponList.length; var sLength = spell.length; for(let i = 0; i < wLength; i++) { weapon[i] = {}; // this is important, creates an object in weapon array weapon[i].name = weaponList[i]; //spell[i].name = spellList[i]; console.log(weapon[i].name); } } function initGame2() { var wLength = weaponList.length; var sLength = spell.length; for(let i = 0; i < wLength; i++) { // push the full object weapon.push({ name: weaponList[i], anotherKey: 0.666} ); console.log(weapon[i].name); } } function initGame3() { var wLength = weaponList.length; var sLength = spell.length; for(let i = 0; i < wLength; i++) { var tmp = {}; tmp.name = weaponList[i]; tmp.foo = "bar"; weapon.push( tmp ); console.log(weapon[i].name); } } hope this helps you.
  39. 1 point
    xRa7eN

    JavaScript nested array stumper

    OK, I think i have "BASIC" understanding.. Let me know if this is correct: So a "bracket" is used to make the basic traditional array game [] which will give game[0], game[1] etc... correct? Braces will give an object? game{}, so game {name: coolplayer, hp:10} which yeilds game.name // coolplayer? then to combine, make your arrya first? then put in anything you want, but if you want another array, you use brackets again - like so? game [ player[{name:'george', hp:25}]] then I can pull it as such: game[3].player[2].name // george So do I have the gist of that? Seems to work when I test it. Totally not like arrays I am used to LOL, but unique and more flexable So... when i get to this: weapon = [ { name, rank:[ {damagePerClk, cost} ] } ]; works fine if i manually insert data, but if I loop as shown below: function initGame() { var wLength = weaponList.length; var sLength = spell.length; for(let i = 0; i < 14; i++) { weapon[i].name = weaponList[i]; //spell[i].name = spellList[i]; console.log(weapon[i].name); } } crashes. Says "i" is not defined, but that is not the issue. and stops at 1. (example, log shows 0,1 crash). "i" is fine, and if i loop through a list - (spellist for example) it list all my spells as they are. I am guessing it is how I have weapon defined (declared). Right?
  40. 1 point
    Stephan

    RESOLVED: graphics hires problem

    I just had another look at the problem and I think it is a small bug in the engine. I just posted a pull request for the develop branch to fix the problem.
  41. 1 point
    If there's no rotation involved making a spritesheet parser for any tool is very easy even for people who hate math. It comes usually with a xml or json that lists frames with position, dimension, and names. You extract those names in a loop, create rectangles out of position/dimension, put everything in a dic and voila, now you can run another loop to create texture from the main texture and pass along those frames(rectangles) you created when parsing. NO MATH involved.
  42. 1 point
    Thanks for your reply, but I just got it working. Yes, I want the slide type controls. I added a sprite for the tiller, and created a touch rotate function for it using 'pointermove'. I then record the rotation of the tiller and translate that to the degree to which the boat turns.
  43. 1 point
    In npm. Or you can clone the repo and build them. Unfortunately typings for 5.0.0-rc3 have one small problem that had to be fixed manually, so here we go: index.d.ts
  44. 1 point
    grelf

    2D Map Representation as 1D array

    I have managed to rewrite my scene drawing (in www. myforest.uk) so that it does not reallocate two huge arrays and fill them with freshly created objects every time. This rewriting reduces the scene drawing time by about 30%. There is also less variability in the time taken from one scene to another which tends to confirm that garbage collection and reallocation were taking a lot of the time. Reallocation would be variable because it depends so much on what contiguous chunks of memory are available. I have written the following to show some things that developers may need to consider in their own code. My terrain is generated by a function of (x, y) position (in fact a method of an object of type Terra). It is a complicated function so it does not want to be done repeatedly for each position; instead its results must be held in arrays for subsequent reference during scene building. Two big arrays hold the results of that around the (moving) observer's current position to enable the scene to be drawn. For each position the arrays refer to an object of type ScenePoint which contains the distance and bearing of the point from the observer and other things (such as terrain details and amount of fogging for distant points). Each ScenePoint object has 10 properties so requires at least 80 bytes, probably more like 100 bytes allowing for the Object structure itself (I think that varies from browser to browser). One of the big arrays, around [x][y], goes out to the current view range which is user-selectable and can be up to 400 meters, so the array may have to be 801 x 801 to surround the observer. This is now allocated at the start of the program. Each array value will be a reference to a ScenePoint object so the array itself takes 8 x 801 x 801 = 5.1 megabytes. Then the 801 x 801 ScenePoint objects, also now allocated once at the start instead of freshly in each call to Scene.draw (), occupy about 100 x 801 x 801 = 64 megabytes. Another array, ahead , contains references to the same ScenePoint objects but is sorted during scene drawing so that the most distant points come first. This array does not contain references to objects behind the observer and so it is allocated as new Array (400 x 801). It requires a mere 8 x 400 x 801 = 2.6 megabytes. So my latest version of The Forest, v19.4.10 (see www.myforest.uk ) allocates just over 70 Mbytes when it starts and then no longer has to reallocate this (in many pieces) every time a scene is drawn. I still find it remarkable that my scene drawing is done in a couple of seconds even for the 400 metre horizon range. During that time the 'ahead' array is sorted too! When starting to draw a scene 'ahead' has to have all its elements set to undefined because as the observer moves and turns a varying number of points can lie ahead. I rely on the specification for Array.sort() which says that undefined elements get sorted to the end of an array. To support all this I have written a new JavaScript file to create one object of type Around. People may be interested to see it (below) but first Matt: Having made this change it was then easy to experiment with making 'around' a 1D array instead of 2D, calculating the index from x and y myself. I found no difference in performance (in FireFox). // Part of The Forest www.grelf.net (www.myforest.uk) // Copyright (c) Graham Relf, UK, 2019 /** One object of this type is constructed at the start to avoid reallocating * big arrays every time a scene is drawn */ function Around () { var el = document.getElementById ("range"); this.aMid = 0; // The middle index of each x/y array // Find largest range user may select: for (var i = 0; i < el.options.length; i++) { var r = parseInt (el.options .value); if (r > this.aMid) this.aMid = r; } var wd = 2 * this.aMid + 1; this.aheadChange (this.aMid); this.around = new Array (wd); for (var x = 0; x < wd; x++) { this.around [x] = new Array (wd); for (var y = 0; y < wd; y++) { this.around [x][y] = new ScenePoint (0, 0, 0, 0, 0); } } } /** Use at the start of drawing a new scene * NB: mex, mey are rounded observer coordinates */ Around.prototype.init = function (mex, mey) { this.xOffset = this.aMid - mex; this.yOffset = this.aMid - mey; // Clear previous scene: for (var i = 0; i < this.nAhead; i++) this.ahead = undefined; this.nAhead = 0; }; /** Only used if user changes the range (and in Around constructor) */ Around.prototype.aheadChange = function (range) { this.ahead = new Array (2 * range * range); this.nAhead = 0; }; /** Add a ScenePoint object reference to the scene ahead */ Around.prototype.aheadPush = function (sp) { this.ahead [this.nAhead] = sp; this.nAhead++; }; /** How many active ScenePoint objects are currently ahead */ Around.prototype.aheadLength = function () { return this.nAhead; }; /** Get a reference to the ith ScenePoint object ahead */ Around.prototype.aheadGet = function (i) { return this.ahead ; }; /** Sort the ahead array in descending order of distance */ Around.prototype.aheadSort = function () { this.ahead.sort (ScenePoint.prototype.sort); }; /** Get a reference to the ScenePoint object at (x, y). * This is so that extra properties can be added to it. */ Around.prototype.aroundGet = function (x, y) { return this.around [x + this.xOffset][y + this.yOffset]; }; /** Set the fields of the ScenePoint at (x, y) as if freshly constructed */ Around.prototype.aroundSet = function (distance, bearing, x, y, odd) { var sp = this.around[x + this.xOffset][y + this.yOffset]; sp.fogNo = 0; sp.tr = undefined; sp.building = undefined; sp.drawn = undefined; sp.clear = undefined; sp.d = distance; sp.b = bearing; sp.x = x; sp.y = y; sp.o = odd; }; Note that in my previous version of Scene.draw () each ScenePoint object was freshly constructed and subsequently might or might not get extra properties added (such as .tr or .drawn). That was poor practice really. For easier maintenance it should be clear in the constructor as to what properties an object can have.
  45. 1 point
    Deltakosh

    AmmoJS support

    YOU FREAKING ROCK!!!
  46. 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
  47. 1 point
    SinhNQ

    Combine Babylon.js with Pixi.js

    Hello, * Introducing a bit of pixi.js: pixi.js has full webgl support, a best framework for 2D game with rendering very fast. Would be great if you want make UI game with pixi.js and combine with babylon.js. (Will I get paid for advertising? NO..🤣) Demo babylon.js + pixi.js : https://jsfiddle.net/y5q7Lb1v/21/ This is a perfect duo for your web game world, which you can create high quality games. 😁 Moreover, you can also use GSAP for creating high-performance animations. Demo babylon.js + pixi.js + GSAP lib: https://jsfiddle.net/y5q7Lb1v/28/
  48. 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); } }
  49. 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.)