Leaderboard

I just finished my coloring app! Browser / iOS / Android It took a while with some years inbetween. Aaaalll the way back in 2017 I was trying to get some basic drawing going and got it working with the help of Ivan. Thanks @ivan.popelyshev ! Looking back at this example, it's pretty much the same as in the app. Thanks for the amazing library and all the support on these forums! it's been really helpful

It's basically a 'vertical endless runner'. A google search gives this tutorial. The 'hotride' game is Isometric, but you should only worry about that after you've finished coding a basic 2D version. Then just project it to 2.5D.

Hi, actually because of the way Gamedistribution speaks in such a derogatory way about Gamemonetize it does not seem that it is from the same owner, yes it is possible that Gamemonetize has copied the structure, I will warn everything, for now Gamedistribution still does not approve a single game, in Gamemonetize almost all have already approved. I will keep the entire community informed about my experience with both companies

Download: https://www.panda2.io/plugins#vr

Hello, I guess you can use: platforms.incX(-100);: https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Group.html#incX__anchor

Round 2 guys, hope no one minds me posting these, I enjoy seeing these kinds of things myself so figured I'd share them as I create em. This time we have a bunch of spine characters, matterJS in a webworker and when collisions are registered and direction changes, it sends back a message to the main thread to update the spines animation. The input for the player is also sent to the webworker and therefore it kinda acts like a client-server solution. The webworker code can also be executed in nodeJS. Thanks! Jammy

Turns out, they were It actually was deceivingly simple. The PIXI code from my previous message works, but the parameter fontFileXML, which represents the fnt descriptor, has to be created as an XMLDocument (document.implementation.createDocument (namespaceURI, qualifiedName, docTypeObj)) and for fontPNGBase64String, instead of encoded PNG, just extract the canvas drawing as PIXI.Texture. BitmapFont will know how to interpret that as your custom font.

Hi friends, I started working with these two companies at the same time, same games, same sdk. Both are very different and here I will tell you about my experience, I hope it will be useful to you as yours has served me. I uploaded to both platforms 2 games with more than 50 million players for a week, in Gamemonetize I am going to work a long time, in Gamedistribution today I closed the account and deleted my games. Contact: * In Gamemonetize is Katie, sweet, kind, decisive, quick to respond, my experience is unbeatable. * In Gamedistribution is Marco, it takes a long time to respond and the first few times I had to speak to his boss to make him do it, he is kind but tries to defend how indefensible his company's lousy service is. Distribution: * Gamemonetize spread my games through many small portals that cannot buy licenses nor have the platform for income distribution, it is exactly the public that needed to reach. * Gamedistribution did not spread my games anywhere, only their own games stand out. Profits: I cannot give the exact numbers for legal reasons but I will try to be very clear. * Gamemonetize: The two games in one week live generated around $ 10 a day, I want to clarify that the first day live gave a great boost exceeding $ 20, around $ 80 in total / week. * Gamedistribution: In approximately the same time the games generated $ 0.03 in total, between 0.00 and 0.01 a day between the two games. Games approval: * Gamemonetize: Almost immediately, a couple of hours. * Gamedistribution: Several days and I had to put a lot of pressure on the bosses, it is not enough just to send the game to the team that is in charge of it. I hope this works for you, any private question that you have is welcome

because you have to use toGlobal(new PIXI.Point(0,0)) - point 0 om sp2 translates to "sp2.position" in container, and you want global value.

> I upload my sprites not textures prepare recursively looks everywhere and searches for textures. Sprite resize wont affect anything, you have to create a renderTexture of appropriate size, render your sprite there, and then use this new texture, and destroy old one. Alternatively: do it manually on canvas2d, and give this canvas to pixi. You can also set width=height=1 for canvas after its uploaded to save the regular memory, but turn off pixi gc so it wont release the texture from videomemory. Both images are in this case are RGBA, 4 bytes per pixel. You can use compressed textures to get 1 byte per pixel but that's special kind of compression, it has downsides that you have to be aware of.

Hello friends, I work with Poki, Crazygames, Gamepix, Gamemonetize, etc. And all these companies generate good income, I tried Gamedistribution and it does not generate a single penny, I tried several games, even one that has millions of players in the world and still nothing. i wait 2 more days and unsubscribe there, I advise you to go to Gamemonetize, Crazygames, Gamearter, Poki but don't waste time with Gamedistribution because they only distribute their own games (Spilgames)

@ivan.popelyshev @Exca Thanks guys really appreciate the information. Looks like I've got some references here to start looking at, Thanks!

When its time to render stuff, texImage2D 1. uncompresses PNG to RGBA, 4 bytes per pixel 2. uploads the result to GPU Sometime later when RGBA on js side is not needed, browser removes it. When - we dont know. In certain moment ( look up PixiJS TextureGC sources), pixi can decide that texture was used too long ago and remove it from GPU mem. For compressed texture formats the density is different - 1 or sometimes (rare) 0.5 byte per pixel. Its better to zip them server-side (static-gzip), and browser will unzip it.

There's plenty you can do with compression. For png/jpg images the amount of original image doesnt change how much memory gpu takes for that image. As those images get unpacked. But you could use compressed textures to remove decompressing and lower gpu memory usage. https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Compressed_texture_formats One thing I'm not really sure is that if you have 8 bit png does that become 8bit or 32bit image after decoding. When it comes to loading related compression (targeting minimal dl time and no compressed textures needed) my basic workflow is to do the following: - Use spritesheets to group similar colored assets together (without breaking batching). - Group assets that dont need transparency together. - Export all as nonpacked png. - For images without transparency, update the json to use jpg and pack the png with Google Guetzli (https://github.com/google/guetzli) - Pack the png images to 8 bit version and do a visual check if quality drops too much. I use PNGoo for this. (https://pngquant.org/) - Run all png assets trough PNGauntlet ( https://pnggauntlet.com/) It's a tool that combines PNGOut, OptiPNG and DeflOpt and picks the smallest png. And doing lots of profiling between steps to see what actually has a positive impact.

I'm making a chess game to practice pixi. Here's how it's set up: 1. I have a Sprite_Tile for each of the 64 squares on the board 2. I have a Sprite_Piece which represents one of the chess pieces (king, rook, queen, etc) So basic use case is player clicks on a piece to "pick it up", and then they can drag it around. I used the example onmousedown, onmousemove, and onmouseup events for the pieces, and it works, I can drag and drop pieces around. To give the player a visual reference for where their piece is going to be dropped, I added an onmouseover event to the tiles, so that when they move the cursor over it, it'll change color or something. I saw there was a topic a week ago about setting the hitarea of the picked up sprite to 0 0 0 0, and that worked well. Here's a picture of how it looks: Now I'm stuck on how to get the square I dropped it on. When the player releases the mouse, the piece will be dropped wherever their cursor is, but I'm having a hard time figuring out how to efficiently grab the sprite that I dropped it over. Since I already have onmouseover event over the tiles, I could always just store that reference globally or something, but that's probably terrible idea lol. What's a nice way to handle this?

Looks like I fixed it by doing .destroy(true) for PIXI.Text and PIXI.Graphics objects and clearing the Texture cache with PIXI.utils.clearTextureCache(). I really appreciate all the responses I got! Thank you! EDIT: Though I wonder if there's a good way to only remove certain textures. EDIT 2: I think I understand now. Here's what my code looks like. Currently I only remove the generic pixiid textures being cached that are leading to a memory leak. Good thing the API documentation has links to the source code! TextureManager.prototype.clearTextureCache = function(clearAll=false){ let generic = "pixiid"; if(clearAll === true){ PIXI.utils.clearTextureCache(); } else { let cache = PIXI.utils.TextureCache; Object.keys(cache).forEach(key => { if(key.startsWith(generic) === true){this.removeFromTextureCache(key)}; }); cache = PIXI.utils.BaseTextureCache; Object.keys(cache).forEach(key => { if(key.startsWith(generic) === true){this.removeFromTextureCache(key, cache)}; }); }; };

You want to sort stuff from different containers, right? If layer itself is under the filter - it will work, otherwise - I just dont know the order of operations that you want Just imagine how do you want pixi to push/pop filter and when to draw elements, in which buffers - and then you'll be able to make a scheme that'll work. Also if your sorted elements are all in same container - you can just use pixi-v5 zIndex + "container.sortChildren=true" (https://github.com/pixijs/pixi.js/blob/dev/packages/display/src/Container.ts#L421) instead of pixi-layers

Thanks for your replies. My game is for multiplayer using Socket.io, so I can't just use GitHub Pages or Netifly or such. I've (kind of) gotten it running using digital ocean for my static files and Amazon EC3 for my server.

Hi. Some users of this forum believe that both of these systems belong to a company means "Gamedistribution" and their SDKs are similar! I did not work with these. Anyway, if you receive a payment, please announce to us. Thank you.

Hello Everyone! I just released my new game Warp Speed! It is a fun music game, where you need to dodge the obstacles. Cool Features : 1. This game has an option to upload any audio file and play it in real-time. This gives a lot of uniqueness to this game! 2. As the game progresses, the speed of the player(block) and the background music increases which makes this game adventurous and fun to play! Please check out the game and let me know your feedback! Demo Link : https://hamzawasim.net/portfolio/warpspeed Purchase Link : https://codecanyon.net/item/warp-speed-html5-game-admob-construct-3-construct-2-c3p-capx/27806061 Thanks!

Three full game source codes now available for download: https://www.panda2.io/sources These are totally free, if you have Panda 2 license.

Understandable, Haxe (a language and transcompiler) is multi-purpose so may appear overkill for a simple browser project (which Haxe also does extremely well). But - back to original question about protecting source - consider that Haxe compiles and bundles JS into a single file by default, no bundler needed, and then with a simple compiler command can uglify it (using Closure lib or the Uglify node lib). Plus all "source" is protected to a degree because the original is never published, so the competitive advantage of fast evolution is kept offline. Furthermore, if you really want to show off, because of the inherent transcompiling / isomorphic nature, chunks of the game logic can be remoted and become server authoritative, thereby *genuinely protecting* the secret-sauce. Before I get flamed for my fanboy post, I will add much of this can be done with modern JS ... just with more dependencies and update pita imo.

lol some might say welcome to npm, others might say look at yarn. Anyways ... this is a recurring theme of the often crazy world of Javascript development ... a seemingly endless rabbit warren of fixes to fix other fixes ... I prefer to use Haxe instead.

Yup, this method works but is not flexible (e.g. adding new armours to the game later, etc) but if you want just the two sprites combined, for sure do it in photoshop or something. But again, keep in mind this is exponential, every time you add a new "layer" e.g. hat or armour or a new sprite sheet, that is a new amount of textures required goes up exponentially. Also this will have an impact on the network, for each PNG the user will have to download that spritesheet, rather than the raw sprites that are later stacked. Have to say though, this is going very deep into the rabbit hole, and it's always best to KISS (keep it simple silly). Get something working and experiment.

I found this thread and it really seems it's not possible in Phaser 3. Have to find a workaround then.

Heyoo peeps, hope all is well! I've made a video while testing the performance of pixijs with matterjs running in a webworker (or node take my pick ), as well as triggering animations etc, clearing up objects.. the usual. But I like the video so I'm sharing it I've probably got a few more cool things coming so if you have the twitter and fancy following me, I'm here: https://twitter.com/AJamDonut Enjoy. Jammy.

The difference is type of rendering buffer is used: its not 32-bit per-pixel , its much more - to store several samples instead of just one. 1. pixel fillrate suffers because for every filled pixel special algo tests several samples whether they appear in geometry. Thank god, no extra fragment shader calls. 2. extra operation to "snap" multi-sample pixel into regular pixel. Also its not possible to affect those algorithms, except "antialias" setting in webgl. In case you still need good AA edges on your sprites, you can add extra transparent column/row of pixels where its important. Yes, it'll affect width/height calculation but with constant scale it will look just like AA That's also one part where canvas2d context is better than webgl - canvas2d uses AAA (analytical AA) to calculate exact % area of pixel covered by shape, its calculated on CPU and is uploaded to GPU later. That algo is very fast. You're not the first one who makes that mistake. We had bunnymark with antialias for a while and people thought that pixi-v4 is seriously slower than pixi-v3

Hi, thanks for reply, I've finally found the reason of the bad performance, I set the antialias to true in PixiJS, while it is false in createJs even though most of my assets are sprites, apparently the performance can still be affected.

Yes, it is. unless there's no stencil in webgl and you managed to switch off pixi default behaviour "fallback to canvas if there's no stencil"

Oh 😅 the dirty way. I guess Ill try that if there is a real need, right now the cases I have use small buffers. Anyway thank you, I too enjoyed this conversation and got to know a lot more than what I came here for 🙂

Until now It was nearly impossible to get classic rewarded ads (from legit ad network) into web based games, especially for PC. Finally rewarded ads from google became true also on the PC web. https://www.gamearter.com/blog/rewarded-ads-for-web-games

i am creating a mesh using geometry and shader in vertex Shader,i transformed the point by multiply projectionMatrix * translationMatrix,which i suppose should be set by PIXI itself,but when i doing the same thing in fragement shader,problems occures, i cannot tranform the point to where i want. here is the code,thank you very much let width windowinnerWidth; let height windowinnerHeight; consolelogheight,width; let app new PIXIApplicationwidth, height; documentbodyappendChildappview; // shaders const PIXI_SVG_PROGRAM PIXIProgramfrom` precision mediump float; attribute vec2 aVertexPosition; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; uniform vec2 pPoint; void main() { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); }`, ` precision mediump float; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; uniform vec2 a_point1; uniform vec2 a_point2; uniform vec2 center; const int pNum = 128; uniform float controlPointsArray[pNum]; uniform vec4 controlPointsColors[pNum]; void main() { vec2 tCenter = vec2((projectionMatrix * translationMatrix * vec3(center, 1.0)).xy); //distance to center float r = 0.0; //Long axis and short axis length ,they are relative now float l1 = distance(a_point1, vec2(0.0,0.0)); float l2 = distance(a_point2, vec2(0.0,0.0)); //long axis's angle float mainAngle = atan(a_point1.y, a_point1.x); //point's corresponding angle float currentAngle = atan(gl_FragCoord.y-tCenter.y, gl_FragCoord.x - tCenter.x); //standard angle(long axis is horizontal) float stdAngle = currentAngle - mainAngle; //the length between point on ellipse and center float dist = sqrt((1.0 + pow(tan(stdAngle),2.0)) * pow(l1,2.0) *pow(l2,2.0)/(pow(l2,2.0) + pow(l1,2.0) * pow(tan(stdAngle),2.0))); r = distance(gl_FragCoord.xy,tCenter) / dist; vec4 color = mix(controlPointsColors[pNum-2], controlPointsColors[pNum-1], smoothstep(controlPointsArray[pNum-2], controlPointsArray[pNum-1], r)); for(int i = pNum-2;i >= 0;i--){ color = mix(controlPointsColors[i],color,smoothstep(controlPointsArray[i], controlPointsArray[i+1], r)); } gl_FragColor = vec4(color); } ` const shader new PIXIShaderPIXI_SVG_PROGRAMlet v 300 let data 0,0, ,0, ,, 0,let result 0,1,2,0,2,3const geometry new PIXIGeometrygeometryaddAttribute'aVertexPosition', data , 2geometryaddIndexresultconsolelogshaderconsoleloggeometryconst combinedShapeMesh new PIXIMeshgeometry, shaderlet container new PIXIContainer; // combinedShapeMesh.setTransform(0,0,0,0,6.2); combinedShapeMeshsetTransform0,0,0,0,0; containeraddChildcombinedShapeMeshappstageaddChildcontainer; combinedShapeMeshshaderuniformscenter 100400,600300 400300; // combinedShapeMesh.shader.uniforms.center = [100,400]; combinedShapeMeshshaderuniformsa_point1 0, 50; combinedShapeMeshshaderuniformsa_point2 50, 0; combinedShapeMeshshaderuniformscontrolPointsArray 0.0,1.0; combinedShapeMeshshaderuniformscontrolPointsColors 0.9019607843137255, 0.13333333333333333, 0.13333333333333333, 1, 0.050980392156862744, 0.9411764705882353, 0.2784313725490196, 1 ; // Animate the filter apptickeraddfunction;

thank you for helping me a lot & hope to make some contribute to PIXI someday!😁

Here you go: https://www.pixiplayground.com/#/edit

No. In fact it may be faster (depending on browser implementation) because drawImage() is more flexible, capable of rescaling the image.

Yes, in reality I don't understand too much about filters, I saw the pixi filters examples but none seems to be what I need. Also, searched for cylinder effect here before posting but nothing showed up. Trying with filter this came up and I guess that this should be the way, right? Btw, this is not for a slot, I just download it from an example that I saw, I want to apply this to a text field.. thanks @ivan.popelyshev

I cant understand what did you want to do there. gl_Fragcolor is pixel coord of current pixel. The problem is that you cant use it in pixi shaders because projection might be reversed. Also, projection*translation * point gives you viewport coords (-1,-1) - (1,1) where point is LOCAL coords in mesh. yes , you dont have a transform on it. I changed approach - i calcaulte world position =translation * local , save it, calculate viewport pos and give it to webgl. Then in frag shader i operate that world position. "center" now is in global pixel coords https://jsfiddle.net/Hackerham/sc1kmqxt/6/

i find a weild way to partly solve this problem by [100*400,-(600*300 - 400*300)]; but i am very confuse why it will works beacause center and geometry points both multiply the same matrix, and in spacial scenario like rotate,it still will not work please help me,THX!

they are same unless you start messing with pixel density. Retina, modern phones, all that stuff. YES, for UI and all stage objects you should depend on "screen". That's why I introduced it , people were relying on "view" and it depends on pixel density.

@ivan.popelyshev Hi Ivan i just wanted to tell you that it is working, thank you for your help

I see the confusion. Sound.from isn't exactly analogous to Texture.from. Sound.from API only handles remote URLs. If you want to play a sound that's already been loaded to this: pixiSound.default.play('explosionSound') Here's the documentation: https://pixijs.io/pixi-sound/docs/PIXI.sound.html Keep in mind that pixiSound.default is the same as PIXI.sound in the docs.

Hello, young people and those who want to stay young. Today we will introduce our Masao no Bouken game that we have developed for 2 years, but first let's talk about who we are. We are the group of Hemoloya Games. If you are ready, shall we move on to our game? Our game looks like a classic platform game, but it contains yinyang, object acquisition and dialogue. You need to come to any NPC by pressing our main character for the dialogue and press the Y key and after reading you can return to the next dialog or game by pressing the ENTER key. To get an object, you need to touch it with our character, but for the yinyang feature, you will first get the object and then simply press the number keys 1 to 5 on the keyboard. At least 5 items are required to pass the level in our game. While playing our game, Construct 2, Piskel and one music program were used. While the programming and design of the game and the episodes were all yours, a friend of the team was interested in their music. We have completed the demo of our game for now, but you will wait a little longer for the main game. Thank you for reading. Game Image; Download; Windows: https://yadi.sk/d/WoZCEZi3Hiy1mg Linux: https://yadi.sk/d/Dp66aaNt4KQ9eg Web: https://team.hemoloyagames.com/masaojp/

I thinks this Unreal Engine 4

More Art Works : Available for more art works! 2D Cartoon Art Work Game Assets Service : I can work on fixed price (based on my $14 per hour rate estimate), I do need a list of the assets to calculate. You can email me at oryzano@gmail.com for more details.

Here's a list of the tools I use daily for game creation, coding, animation, etc. I hope you'll find some useful info, let's begin. Art and Animation ########################################################################## Photoshop: The daddy and mommy of raster editing. I've tried lots of alternatives over the years but I always came back to it. Even though it's not a specialized tool (creating pixel art for example) I've found that it's quite flexible and it allows you to work on a variety of project types. I USE IT FOR: Text manipulation, logos, etc. GUI creation - shape tools and the alignment tools come quite in handy. Add effects (strokes, shadows, etc) and you're golden. Overall finishing touches. Playing with curves,intensity, blending modes to give my graphics that extra visual boom. ALTERNATIVES: GIMP: Also called the poor's man Photoshop. It's a pretty decent and powerful program and it has many of the features offer by it's more expensive brother Photoshop. I gave it multiple spins over the time and I was disappointed in the GUI arrangement and the overall workflow. Asesprite, Pyxel Edit, Graphics Gale: These are 3 different pixel art creation software packages. I don't do pixel art and I only tried them for a short amount of time but I hear good things about them. ########################################################################## Illustrator: One of the most famous vector editing programs out there and rightly so. First of all it's an Adobe product so you have good integration with other Adobe products (such as Photoshop) and a certain level of quality. Although it's a bit tricky to get into it at first it's really worth it - there's nothing more powerful out there in terms of vector editing (as far as I know) and you can really create some awesome art for your games. ALTERNATIVES: Corel Draw: Altough I am a big fan of PainterX (digital painting at it's best from Corel) I'm not so taken aback with Corel Draw. Obviously you can create artwork in it but I had the sensation that it is more geared towards desktop publishing. It's a good product all in all but you should rather take the time to learn Illustrator - it will be worth your time. Inkscape: This is a free vector editing software and you would probably expect it to be bad in some way. It's really not. Very easy to learn and with an intuitive workflow it allows you to create art simple and fast. True, it lacks the sophistication of Illustrator but it's the perfect choice for a beginner artist - the guy behind game art for programmers uses it extensively so he must know something. ########################################################################## Moho: IMHO the best 2d skeletal animation software out there. The only decent competitor out there is Toon Boom but it lacks in the bone setup area and it's mainly focused on frame by frame animation. Spine it's simple and intuitive but it lacks the power required for more complex setups ( it also lacks vector drawing). It's only drawback is that it can't import properly .psd's and .ai's but it compensates by having it's own (very powerful and sometimes more intuitive than Illustrator) vector drawing tools. Oh, and I mentioned that it also has particles? Motion Blur? Z Depth layer ordering and animation? IK animation? Animation Morphs (like the ones you can find in Maya)?Smart Bones? Animated strokes? 3d capabilites? You get it, I'm hooked. I USE IT FOR: Character and prop creation 2d Animation ALTERNATIVES: Spine: A lightweight 2d skeletal animation program. Intuitive and friendly especially for artists that are new to animation. ToonBoom: This is Moho's main competitor as it has similar complex animation tools. It has a steep learning curve and it offers lots of features in terms of animation. I think it is more geared toward animation movies rather than games but you can definitely create great art and animation in it if you invest in learning it. Adobe Animate:Adobe's 2d animation flagship product. Since it's Adobe you know you'll get tight integration with other products from the Adobe Suit (Photoshop, Illustrator) and a certain standard of quality. One thing I liked about it was the particle creation capability and the large variety of brushes. Although it's a bit weak in the area of rigging and bones (specially compared to Toon Boom or Moho) it is a powerful and complete piece of software so it might be worth your time. ########################################################################## Cinema4D: Altough I've been infatuated with Maya I've come to love this friendly 3d editing software. Why? Because it just works. It works fast, it works good and it's easy to learn even for 3d noobs. I USE IT FOR: 3d Text creation Various object renders ########################################################################## Lightroom:The best photography catalogue out there. I had 50 thousand photos once (paintings pics mostly) and other similar programs died just trying to read them. Not Lightroom. How can a dev might use it? For me it's useful when I gather lots of art inspiration from various websites, games, etc and I can browse and rate them with ease and pleasure. I USE IT FOR: Inspiration Management ########################################################################## SqCheck:A nifty little utility that allows you to preview rendered frames (sequenced) of animation at various speeds. It might not seem as much but it's much easier to focus on the animation final result without all the clutter of a big animation program. I can spot common mistakes quite easily - like having too much static extra frames at the end of an animation (like having a walk cycle and the foot stays just a bit too much at the end of animation). Or I can load it each third or second frame sequence to see how it looks without all that interpolation in between (because smaller spritesheets and snappier animation - Richard Williams said in it's incredibly inspiring animation book - The Animator's survival kit. I USE IT FOR: Animation final touches ########################################################################## Timeline Fx: A particle editor for all your particly needs. Explosions, flames, bubbles, etc. It has the best blend of usability and ease of use. Another particle editor beast that I like it's Particle Illusion - altough you can create the same particle effects with the standard particle properties (particle life, velocity, lifeOverSpeed, etc) it really shines at particle assembly - you can combine multiple particle effects, animate them, create deflectors/blockers/wind, clip them to alpha masks, etc. I USE IT FOR: 2d Particle creation and FUN ########################################################################## Irfan View: An image viewer that can cook, clean and take out your garbage. Well, maybe not but it does have a motherload of options and it supports a large variety of image formats (.psd, .tiff). It even reads .txt for god's sake. My favourite shortcut in Irfan View is Shift + 1. It opens your image in a predefined application - you guessed it, Photoshop. And it's very fast. I USE IT FOR: Image viewing and fast access to Photoshop. ########################################################################## Programming ########################################################################## Sublime Text: "The text editor you'll fall in love with" - says in the website title. Well I did...over the heels. Coming from a C# background I was used to Visual Studio - awesome IDE, ideal for large projects and with lots of little helpful features. Sadly using JS in Visual Studio it's a drag. Intellisense it's basically useless, go to code definition doesn't work well most of the time, starting it takes quite some time. Sublime Text to the rescue. Lightweight, uber customizable, lightning fast, works like a charm with JS. I recommend installing JS Hint for linting and Js prettify to make your code readable. Also learn some general shortcuts for a better workflow. And if you really wanna fly in it learn either Emacs or Vim shortcuts (it has plugins for both). I used Emacs first - a bit too heavy and a carpal tunnel risk. Switched to Vim and after the rather abrupt learning curve I feel much more comfortable. And if you really wanna protect your hands and increase your touch typing speed I'd reccomend switching from Qwerty keyboard layout to Dvorak. ########################################################################## Phaser: Html5 game framework. Why? You probably know why since you're on this forum so you're probably a dev yourself. Easy to learn, quite powerful, good performance. ########################################################################## Other ########################################################################## Sprite Sheet Exporter Photoshop Script: Altough you can create spritesheets directly from many 2d Animation programs I find it it allows for much flexibility to import sequenced frames in Photoshop (using File > Scripts > Load Files into Stack) and doing various refinements -I usually get rid of all transparent pixels with Image > Trim and apply various color corrections - this will be my master animation document. After that I can resize it to fit my needs (can happen multiple times during the life of a project) and export it to a sprite sheet with the Exporter script. ########################################################################## Audacity: Simple yet powerful sound editing software. While I can't create music/sfx by myself I can greatly improve it by mixing it, fading in/out, applying various effects. ########################################################################## AutoHotkey: A nifty little utility for Windows that allows you to remap various shortcuts, exe paths and other commands to custom keyboard bindings. It increases the workflow speed enormously and it makes a working day more pleasant. Imagine double clicking on Photoshop.exe 30 times a day. It might not seem much but if you're in another application you'll have to minimize it and hunt the icon on desktop - it interrupts the creative process and takes a bit of time. It's much easier just to press a combo keyboard shortcut (mine it's Ctrl + R) and there pops Photoshop. Or my current working folder. Or sublime Text. Try it - you'll love it. ########################################################################## Wamp: Web Development Environment. You'll need it to develop Html5 games and it's very easy to install and use. ########################################################################## Sumatra Pdf: For all your pdf reading needs - programming, animation and design books. First it was Acrobat reader and it was good but then it got bloated and sluggish. Then it was Foxit and it was so much faster than Acrobat Reader but then it got bloated and sluggish. Now it's Sumatra and altough it's simple it's very fast and it supports .mobi and .pdf. Let's hope it stays clean. ########################################################################## Various Online Tools ########################################################################## Tiny Png: Incredible png compression with very little quality loss (if any). I even saw 90-95 percent file reduction on my png's - that's going from 1 MegaByte to 50 KiloBytes - pretty impressive) ########################################################################## Trello: Task management and collaboration. I heard good things about it but I think it's better suited for larger projects and I still prefer to keep track using pen and paper. ############################## @Goblet Ed################################## draw.io: "draw.io is completely free online diagram editor built around Google Drive that enables you to create flowcharts, entity relation, mockups and more. Your data is stored only in Google Drive, so no additional third-party to trust with your data (or extra accounts)." It has good object snapping which makes placing and aligning things very pleasant. ########################################################################## I USE IT FOR: Creating screen flowcharts One page designs Level designs (can import your sprites) ############################## @Goblet Ed################################## Coggle.it: Pretty mind-mapping tool. I USE IT FOR: Creating pretty mind maps to organize new information ########################################################################## *************************************************************************************************************************************** Feel free to contribute in comments (link and your personal experience) and I'll try to keep this updated - just tools and utilities please, there are lots of resources lists already. ***************************************************************************************************************************************

var ZOOM = 2; new Phaser.Game({ callbacks: { postBoot: function (game) { var config = game.config; var style = game.canvas.style; style.width = (ZOOM * config.width) + 'px'; style.height = (ZOOM * config.height) + 'px'; } } });

https://github.com/samme/phaser3-faq/wiki#how-do-i-add-a-child-sprite

Hi, I'm writing an app that essentially only needs to render when the user does something. There are a few edge cases that cause one-time animations, all other stuff is a one time render situation. The main reason to avoid the render loop is that there is nothing generally going on that requires visual updates so we can save a lot of resources by not rendering all the time I currently try to handle the render loop the following way: Some consumer code calls a render on my babylon js wrapper object that handles everything In this moment, a pendingFrames variable is increased (default 0) and startRenderLoop is called with a callback doing nothing apart from scene.render() In onAfterRender, I look for further pending frames ( pendingFrames > 0). If there is nothing, I call stopRenderLoop. For animations, there is a similar approach, with the difference that the pendingAnimations variable is increased whenever an animation starts and decreased in every end animation callback. So, let's take away the animation case. I have a mouse move interaction that calls my render call on my wrapper object. It increases the pendingFrames by one every time. This is my first problem, because there is no 1:1 relation between mouse move and rendering, so I can increase more render calls than I actually need. Before, I did not use "pendingFrames" but instead had a simple flag that managed to render the scene using scene.render if anyone requested a frame. Then I did not have the relation problem BUT: positioning changes that were handled in onBeforeRender did not work even though I changed positions on depending meshes before the render call. Upon the next mouse move, without any further change, it then suddenly was correct again. So, that may also have something to do with the timing. In the end, my question now is, how do I correctly take full control so that I do not render anything I do not need. It was also noticable that, against a general render loop, my mouse move based enabling and disabling of rendering was 7 fps slower (against 37) which I currently don't really have an answer for. EDIT: I should note that another noticable thing is that the movement is not really smooth when I use my enable/disable render loop logic. The camera movement tends to jump a little. I must do something seriously wrong. Maybe some technical background helps :-)

Hey, you are not doing anything wrong and this is pretty smart actually. The first problem that I can foresee is that you won't have camera movement inertia with your system because this requires several rendering to achieve it One idea here: Your stop condition should be: no pending frames AND no running animations (ie: scene.._activeAnimatables.length === 0) AND camera.cameraDirection === Vec3(0) AND camera.cameraRotation === 0 as well