Leaderboard


Popular Content

Showing content with the highest reputation since 05/17/19 in all areas

  1. 2 points
    Rezoner

    SpriteStack - 3D Pixelart Editor

    Ahoy there. I have just released a standalone version of my voxel editor where you draw models layer by layer like a 2d image. It features very neat spritesheet exporter with my handcrafted retro renderer made in WebGL. Please take a look at https://spritestack.io/ to get more info. I am also glad to anwser any questions.
  2. 2 points
    Dumadu

    3d Highway Racer

    My 3d game in html5. Looking to provide non-exclusive licenses of this game https://playcanv.as/p/f5b2f1db/ Contact me for more details: arif@dumadu.com
  3. 2 points
    Thank you for your answers! I was thinking about creating a custom tools, but I figure this should be a fairly common issue so there had to be a solution out there I didn't know about that PS to Spine exporter, that looks really promising! I'll take a look at it! Thanks!
  4. 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.
  5. 2 points
    Trump's Wall Game started out as a joke but somehow manifested into something that is...still a joke. It's a persistent world with one thousand nine hundred and sixty virtual miles along the border. Choose either the red team (builds wall) or the blue team (breaks the wall). Then go nuts and build or break away. Trump's Wall Game is a living breathing thing so any changes you make will be reflected for the rest of the world to see. Oh, we also hired a Trump impersonator to do the voices. That in itself is worth checking out. Enjoy! Play the game here: https://meowyorktimes.com/wall.html Game was created by a three man team in a few weeks. A designer (me), a developer and an artist.
  6. 2 points
    YMShen

    Text smooth scaling / text mipmaps

    I'm glad you that my old plugin can offer some help It is still at an early stage and only tested in pixi.js v4.7. Don't even have a README yet. Since pixiv5 have breaking changes in mesh & bitmap font classes, I still need time to learn and adapt. PR is welcomed! Take this snippet as a quick-start if you don't want to clone my repo and build it yourself: https://jsfiddle.net/g04xLqdh/ BTW: Here is a command line tool to help you generate MSDF bitmap font assets: https://github.com/soimy/msdf-bmfont-xml
  7. 2 points
    ivan.popelyshev

    Making GUI in 2019 with Pixi

    Do the right side with react, field with pixi. problem solved. The biggest collection of pixi ui elements is https://github.com/pixijs/pixi-ui/ but its not documented nor is it moved to v5 and typescript yet. Text input: https://github.com/Mwni/PIXI.TextInput SDF fonts: https://github.com/PixelsCommander/pixi-sdf-text , https://github.com/avgjs/pixi-richtext We are working on moving all plugins to v5 and we are making new tutorials. I hope in half of year we'll have complete set of stuff for games, but right now its not the case, so go for React to save time.
  8. 2 points
    Are you sure you didn't turn on Battery Safe Mode when trying Cordova?
  9. 2 points
    I wrote an article on this. Thoughts welcome! https://medium.com/@michelfariarj/scale-a-pixi-js-game-to-fit-the-screen-1a32f8730e9c
  10. 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.
  11. 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?
  12. 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.
  13. 1 point
    Hi everyone, I've implemented a webapp where the user sees a table from top-down perspective and can decorate a cookie. For different sprinkles I've used simple rects and animated them with tween.js (or something like that). For liquid sugar I've modified a native webgl implementation based on the navier stokes equation. The last part to implement are marshmallows. Since the 2d projection of cylinders (which a marshmallow more or less looks like) can vary quite a bit if you rotate it I thought its time to try out the PIXI.Mesh, PIXI.Shader and so on classes. const vertexSrc = ` precision mediump float; attribute vec3 aVertexPosition; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; void main() { gl_Position = vec4(projectionMatrix * translationMatrix * aVertexPosition,1.0); } `; const fragmentSrc = ` precision mediump float; void main() { gl_FragColor = vec4(1.0,1.0,0.0, 1.0); } `; I've noticed from another example that pixi passes a projection and translation matrix already. However... I dont know really how the projection Matrix looks like. If I pass in the 3d cylinder coordinates (range [-100,+100] for each dimension), I can just see two parallel yellow lines with quite a bit space between them. I guess the projection matrix must somehow slice the z-dimension probably at z=0 or something. Sooo my question is ... if I pass in a custom projection matrix is there something I need to consider? or is there any pixi.js magic happen that will make it hard to visualize this cylinder? Thank you very much : -)
  14. 1 point
    Using pixi.js v5, I'm trying to fill a polygon with about one hundred vertices using Graphics.drawPolygon(), but the polygon is drawn incorrectly. When I reduce the number of vertices to about 50, then the polygon is drawn correctly. Is there any limit (near 100) to the number of vertices that Graphics.drawPolygon() can draw? Thanks.
  15. 1 point
    PixiJS Application class is for hello-worldies. I congratulate you! You passed to the next step - you have to create your own app and gameloop: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop I hope that article explains everything. Well, except interaction. Interaction currently is inside Renderer as a plugin, `renderer.plugins.interaction` and i dont know if it runs on app ticker or pixi shader ticker or pixi global ticker (yeah, there are THREE tickers)
  16. 1 point
    Not just webgames, any games! Not just games, any applications! The easier you make it for people to just get going, the less friction they have, and the more likely they are to get to the 'am I having fun?'. Games like Dwarf Fortress take a lot of effort to get going, they lose a lot of players before they get to the 'am I having fun?' question. Affordance theory (presented initially by Gibson) is the theory that objects 'project' their usage, the normal example is a door handle, the shape of the handle implies gripping and turning, you can argue whether this is learned or innate but you can not argue that almost every one on the planet knows how to use a door handle without thinking about it. The holy grail is to get your game/UI/app so intuitive that users just naturally fall into a 'pit of success' and are able to perform the actions they need to to meet their goals, i.e. win the game. I'd argue that advanced users might want more information, but, ideally that information should be in-game. The opposite view to this was popularised by Minecraft where players were encouraged to discover mechanics together, usually outside-of-the-game (at least initially) via the internet (youtube, forums, etc etc). Minecraft is a bit of an outlier for many practises though, but, its an interesting game mechanic to explore, of course, you need to player base in the first instance to be able to explore it.
  17. 1 point
    b10b

    How to write game instructions?

    These days I've come around to that point of view - zero upfront time investment from a player should be the default expectation for a mass market game ... ... because modern games should basically play themselves, and the player influences the game to make it play better. Ideally such influence should be highly intuitive and avoid any need for text or instructional ui. That said ... quality text still has utility as a secondary or completionist device. Explaining a game in 8 short bullet points or less is always possible, forces the creator to emphasise the essential core, provides SEO or submission content, and defines a framework for more detailed content to follow (e.g. introducing the game's nouns for future strategy guides or YT narration). Will everyone read it, absolutely not. Additionally text is pretty cool (and cheap) for providing background narrative, dialogue and exposition if the game style suits it (like those early 90s Nintendo manuals) - and I still believe players' time investment is a valuable precursor to playing more specialist titles.
  18. 1 point
    You can find a tool to generate JSON file and write a custom PIXI loader for it. I've done similar stuff, here's my in-house framework: https://github.com/pixelpicosean/voltar It is PIXI based, and I have scripts to convert Godot scenes into JSON and load. I've gone that way too far, even heavily modified PIXI to support this workflow though. You can do same thing without modify PIXI at all, only write scripts for features you want (layout with containers/sprites) which I think is fairly easy.
  19. 1 point
    You mean 7 offline bots.
  20. 1 point
    I want to render a simple JPG (just to begin with) using PIXI v5 inside of my Vue v2 page. The sprite is not rendered (most likely PIXI.Container is not rendered too). Still, I can see in Network that the image is loaded just fine. I append pixi.js app instance on $ref in created() hook. I use PIXI.Loader to load the image - still it does not appear on the screen: just some background color provided on PIXI.Application initialisation. This is how I init pixi app instance: created() { this.$nextTick(() => { const { pixi } = this.$refs; PixiSceneRenderer(pixi); }); }, This is the exported function: export default function PixiSceneRenderer(element) { const app = new PIXI.Application({ // setting like width, height etc }); const { renderer, stage, loader } = app; // Appending view to DOM elem element.appendChild(app.view); const container = new PIXI.Container(); container.x = app.screen.width / 2; container.y = app.screen.height / 2; container.pivot.x = container.width / 2; container.pivot.y = container.height / 2; stage.addChild(container); loader.add('image', require('path to my image')); loader.load(); loader.onComplete.add(onAssetsLoaded); resize(); window.onresize = function(event) { resize(); } function resize() { let w; let h; if (window.innerWidth / window.innerHeight >= ratio) { w = window.innerHeight * ratio; h = window.innerHeight; } else { w = window.innerWidth; h = window.innerWidth / ratio; } renderer.view.style.width = w + 'px'; renderer.view.style.height = h + 'px'; } function onAssetsLoaded () { createElements(); update(); } function createElements () { const texture = loader.resources['image'].texture; const sprite = new PIXI.Sprite.from(texture); // setting up sprite x and y coords, height, width etc container.addChild(sprite); } function update () { renderer.render(stage); requestAnimationFrame(update); } } What am I doing wrong? I followed tuts on this forum and on pixi's docs and still couldn't get a solution
  21. 1 point
    @ivan.popelyshev I followed your suggestions and pixi started to work. Thanks!
  22. 1 point
    ok, what do i see here: 1. app has no `autoStart:false` but at the same time you use custom RAF. please read https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop to avoid that kind of problems in future 2. when you assign container pivot its width and height are zero I don't even know why do you need center pivot without center screen position here. Just delete those lines. 3. you use default canvas width/height which is 800/600 i think. Your image will be pixelated or blurred depending on CSS. Use "renderer.resize()" instead of just css stuff if it evolves into a problem. 4. new PIXI.Sprite.from - from is not a constructor, its a static function . in your case you need "new PIXI.Sprite(texture)". Even with all those problems you should see an image, but you dont! That means that my telepathy didnt pick up your issue. Please make a demo so I or someone else can debug it.
  23. 1 point
    buryo

    Creating Input element

    How I fixed this: I've put the input and canvas in the same div (this is the parent div) and set the parent div to Relative Set the input field to Absolute, and now you can put it where you want with Top and Left
  24. 1 point
    ivan.popelyshev

    Creating Input element

    Here's a plugin: https://github.com/Mwni/PIXI.TextInput
  25. 1 point
    @ivan.popelyshev, I think you were right to question the pixel width and height! I looked at the blue arrow png and it was 1920x1080 because of a ton of extra transparent space around the arrow. I edited it down to a much smaller resolution in Photoshop instead of scaling it down in Pixi and now it shows up again! I think this means that the canvas has trouble drawing pngs that have a greater original width or height than the canvas itself in Cordova's WKWebView.
  26. 1 point
    Keep a list of points and only draw the section you actually need to show. That way you wont need to upload a very large amount of vertices to gpu. Another way to optimize a large set of lines would be to use rendertextures, though if the lines are dynamic then that wont be of help. But for static lines you could build a rendertexture for every 2048 (or lower) pixels and draw the line into that, then clear the line and start drawing again. Then when the old portion would need to be shown you could just use that texture instead of a line.
  27. 1 point
    You can maintain 2 or more Graphics objects and delete the old one when it goes outside the screen, creating new one at the right side. Or just clear() and move it to right. Also I saw that you depend on RAF too much, if you switch tabs and then switch back, something wrong can happen 2 minutes is strange, i think it'll crash later. First you'll have too many lines inside and everything will disappear because we have only 16-bit indices at the moment. It'll become slow because of constant reupload. The next day it will crash. Are you on linux?
  28. 1 point
    Here's project without docs : https://github.com/eXponenta/pixi5-playables-boilerplate , it has big number of hacks to store everything in one file, I'm sure you can strip it down to make an example. Dont forget to star it. It has gulp, but I dont think its possible to survive with just browserify. For example, I have projects that rely ONLY on typescript, but I never had something that has only browserify+ts, its usually more than that.
  29. 1 point
    I'm sure your thread was noticed but its difficult to answer right now
  30. 1 point
    Here is one example: https://github.com/llorenspujol/parcel-pixijs-quickstarter Is a simple quickstarter project with PixiJs and Typescript using Parcel. Here are it's default scripts: "test": "karma start", "start": "npm run clean && parcel src/index.html", "build": "npm run clean && parcel build src/index.html --public-url ./", "build_serve": "npm run build && http-server ./dist", "clean": "rimraf ./dist ./.cache" In order to build the project just run 'npm run build'. If you want also serve it, just run 'npm build_serve' (it uses http-server in order to serve it as you). About the disk space, having the dependencies globally is not the best solution and it has a lot of troubleshoots. There are many other ways in order to 'share' dependencies between project more safer and efficient than that. You can have for example a 'monorepo' like infrastructure, in order to achieve it. Check it out yarn workspaces and the lerna project, I am sure it will make you re-think the way you are managing your projects. One HUGE advantage of that, is that it will enable you to share ALL your dependencies, not only Browserify and Typescript. With this improvement, you will no longer need to zip/unzip your project anymore, since most of the MB you see now when zipping/unzipping are from the node_modules. So in resume, check it out to move your examples into a monorepo-like infrastructure. With that, you will solve 2 problems: 1- Share ALL dependencies (and do it safely), since now you are only sharing Browserify and Typescript (as far as I know) 2- Avoid zipping/unzipping your project, that I am sure that is a costly extra step. That of course you can automatize or whatever, but you can get rid of it with this solution. If you need some help about that 'monorepo-like' infrastructure, you can DM me.
  31. 1 point
    P.s. thank you very much for your amazing work, @ivan.popelyshev. I've been using your pixi-projection plugin recently and it's awesome!
  32. 1 point
    i use this on my side But my app are intended to be played in full screen, frame and scale mode are luxe feature. requestFullScreen() { var element = document.body; if (element.requestFullScreen) { element.requestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } this._fullScreen = true; }; cancelFullScreen() { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } this._fullScreen = false; }; scaleToWindow() { const canvas = this.view; let scaleX, scaleY, scale, center; scaleX = window.innerWidth / canvas.offsetWidth; scaleY = window.innerHeight / canvas.offsetHeight; scale = Math.min(scaleX, scaleY); canvas.style.transformOrigin = "0 0"; canvas.style.transform = "scale(" + scale + ")"; if (canvas.offsetWidth > canvas.offsetHeight) { if (canvas.offsetWidth * scale < window.innerWidth) { center = "horizontally" } else { center = "vertically" }; } else { if (canvas.offsetHeight * scale < window.innerHeight) { center = "vertically" } else { center = "horizontally"; }; }; let margin; if (center === "horizontally") { margin = (window.innerWidth - canvas.offsetWidth * scale) / 2; canvas.style .marginTop = 0 + "px";canvas.style .marginBottom = 0 + "px"; canvas.style .marginLeft = margin + "px";canvas.style .marginRight = margin + "px"; }; if (center === "vertically") { margin = (window.innerHeight - canvas.offsetHeight * scale) / 2; canvas.style .marginTop = margin + "px";canvas.style .marginBottom = margin + "px"; canvas.style .marginLeft = 0 + "px";canvas.style .marginRight = 0 + "px"; }; canvas.style.paddingLeft = 0 + "px";canvas.style.paddingRight = 0 + "px"; canvas.style.paddingTop = 0 + "px";canvas.style.paddingBottom = 0 + "px"; canvas.style.display = "-webkit-inline-box"; return scale; };
  33. 1 point
    I can explain what I want using the example. This example uses Babylon.js, TypeScript and it draws a cube. You can run it on Playground: click to run This is an archive with source code: color-cube_babylonjs-typescript.zip This archive requires only 1.34 MB. If you unzip it you will see that it requires 7.52 MB. It is good because it allows to create a lot of examples for studying and it will not spend a lot of space on my laptop. If you have the browserify and typescript that is installed globally you can bundle the "Program.ts" and "Game.ts" files using this command: npm run release-client The "bundle.min.js" file will be created in the "dist_client" folder. You can just open the "index.html" file in your browser. I use "http-server" module to run examples. I need a similar archive with very simple Pixi.js example that contains a few TypeScript files. My "release-client" command looks like this in the package.json file: "scripts": { "clear": "rmdir /s /q dist_client", "compile-debug-client": "tsc -p tsconfig.debug.client.json", "compile-release-client": "tsc -p tsconfig.release.client.json", "bundle-release-client": "browserify dist_client/Program.js -o dist_client/bundle.client.js", "uglify-release-client": "uglifyjs dist_client/bundle.client.js -o dist_client/bundle.client.min.js", "release-client": "npm run compile-release-client && npm run bundle-release-client && npm run uglify-release-client" },
  34. 1 point
    Are you sure you've got the correct typings for your pixijs version? In v5 animatedsprite is moved from extras to PIXI namespace, and those typings have only stub class. Well, if you dont understand how to fix typings or you cant wait for answer you should use JS. In that case i recommend to clone pixijs repo to your computer because docs can wrong you too. There's a rumor that certain parts of PixiJS will be moved to typescript this year *insert evil laugh here*.
  35. 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
  36. 1 point
    visgotti

    Growing RenderTexture

    lol crap... seems like my second implementation was all for naught thanks though going to try this now. edit: yep so sure enough my original function would have worked with just adding the false flag to renderer.render Thanks @ivan.popelyshev It seems to be working awesome now, I can start focusing on optimizing my packing algorithm.
  37. 1 point
    before that, I've ready search the google, this forum, stack overflow, and found only broken answers. My doubt: -how can I flip a single sprite in Pixi? What I need: -flip the sprite BUT hold its center (width/2, height/2) in the same place like it was not flipped, without change the anchor. Example: Before: After flip X: NOTE: the sprites stays in the same place X and Y. So how can I do this? Second question: After flip the sprite, how to rotate with origin in its center? The sprite is in the smae position, but I want rotate only relative to width/2 and height/2, and not with the anchor. I've tryed set the pivot to center of size but the sprite is moved to the anchor. Is possible do this without gambling with anchor?
  38. 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?
  39. 1 point
    ivan.popelyshev

    Redrawing only when needed?

    https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop As for how to detect if something was changed - we can't implement that because we value readability of PixiJS code more than that feature. Its possible to track changes in transforms, but everything else is difficult. Usually people just set special flag if they app changes something and add "if (flag) { renderer.render(stage); } " in gameloop
  40. 1 point
    That's one of big problems with text. WebGL and animated vector text aren't made for each other. Text texture never mipmapped because we cant be certain if texture are pow2, and pixi-v4 cant just change the filtering on fly. Did you read "Text" code? you can actually hack it that way the canvas size is pow2, and PIXI.Texture takes only part of its area. If you go further in Text code you'll see how it works - it actually renders canvas2d css text and uploads stuff to videomemory only if it was changed (changes texture updateID). If you store some FIXED pow2 size, and set the mipmap, pixi-v5 can also generate new mipmaps every time this things is updated, but I'm not sure about v4. That way there'll be no allocations. There are many ways to solve those issues, like sdf, msdf, I have experimented with them a lot, but I cant teach you all that in 5 minutes. You have to spend time to get good result for your case, because its not the easy task.
  41. 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.
  42. 1 point
    Hi! I think that you could easily implement these controls yourself without paying someone: 1. On mousedown or touchdown record the input value for the Y axis. 2. On mousemove or touchmove compute the difference between the recorded value and the current Y axis input. 3. Translate the camera on the Z axis based on the difference.
  43. 1 point
    It appears from your code that all of your sprites are the same. If this is the case, I suggest using a ParticleContainer instead as this will vastly improve rendering performance. const renderer = new PIXI.autoDetectRenderer({ width: 1920, height: 1080, preserveDrawingBuffer: true, transparent: true, backgroundColor: 0xffffff, antialias: true, }); let stage = new PIXI.display.Stage(); let spriteContainer = new PIXI.ParticleContainer(); stage.addChild(spriteContainer); for (let i = 0; i <= 150; i++) { let sprite = PIXI.Sprite.fromImage(tallLine); sprite.x = i * 10; spriteContainer.addChild(sprite); } requestAnimationFrame(rafGameLoop); //move all the sprites left 10 pixels per frame const rafGameLoop = () => { requestAnimationFrame(rafGameLoop); spriteContainer.children.forEach(sprite => { sprite.x = sprite.x - 10; }); renderer.render(stage); }
  44. 1 point
    Thank you! It is in the plans, although I did not have much time for development lately, so I cannot promise it will come soon. I have some changes already done for the next version (touchscreen controls and some important fixes for broken rendering on certain machines and more music tracks), which can be expected soon, but collision is not included yet. I do have some ideas for a solution that might work decently enough and would be fast enough for the browser, if that works out, I could push it out in the next months.
  45. 1 point
    Mat Groves

    Is pixi.js dying?

    Good question! Theres lots of reasons! 1 - I genuinely feel happy when I see something we created help other people to create. 2 - I find it super challenging, constantly trying to be render things faster, whilst hiding away complexity from users (not everyone wants /needs to know webGL). can be frustrating, but ultimately makes you feel warm and fuzzy inside when you figure out a new way to do something thats faster and easy to use. 3 - I get a serious education in how the team manage communities, and how to work with other devs. 4 - Team is cool smart bunch o'people. I like interacting with them 5 - Its helps our agency from a business perspective through increased exposure. 6 - Its ultimately helped me become a better dev. 7 - We would have build something like pixi internally anyway as it helps us make what we need more effectively, we just went a step further and shared the code No plans on stopping anytime soon!
  46. 1 point
    STuFF

    Scaling the canvas for pixel art

    it's much more easier with Phaser 3 in you config, just add: pixelArt: true, zoom: 4, pixelArt option to true will prevent the texture to blur when scaled, and zoom will scale your whole game. here is the game I'm working on. It's designed in a 128 x 96 resolution, and is scaled up 5 times, it works like a charm! const config = { type: Phaser.WEBGL, width: 128, height: 96, parent: 'game', backgroundColor: '#1b2632', zoom: 5, pixelArt: true, physics: { default: 'arcade', arcade: { tileBias: 4, gravity: { y: 250 }, } }, };
  47. 1 point
    Tom Atom

    rotate sprite along z-axis

    Tween with yoyo should do all the job for you! Let's say, you have coin atlas and two sprites in it: "front" and "back". Then you can listen to onComplete and change frame in it: var sprite = game.add.sprite(0, 0, 'coin', 'front'); sprite.position.set(100,100); sprite.anchor.set(0.5, 0); var tween = game.add.tween(sprite.scale).to( { x: -1 }, 1000, "Linear", true, 0, -1, true); tween.onLoop.add(function() { sprite.frameName = (sprite.frameName === 'front') ? 'back' : 'front'; }, this);
  48. 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.)
  49. 1 point
    GreenSock

    GreenSock

    Howdy folks. Just wanted to chime in with a few comments: Someone mentioned that there's a lot of extra baggage in TweenMax like CSSPlugin that perhaps you don't need - you can simply use TweenLite and TimelineLite separately to keep things very small. TweenMax is intended to be super robust and easy to drop in without hassles of loading multiple files, that's all. With TweenLite/Max, you get the lagSmoothing() feature baked in which helps automatically recover from lag without skips/jumps, all while keeping every animation perfectly synchronized across the board. I'm not familiar enough with Phaser's built-in stuff to know if it has that sort of feature, but I've never seen any other engine that has it. You can read more at http://greensock.com/gsap-1-12-0 Again, I'm not familiar enough with Phaser's built-in capabilities but I'd venture to guess that there are quite a few features that GSAP offers uniquely, whether that be nestable timelines, animation along beziers, complex overwrite management options, unique eases like RoughEase, SlowMo, tons of callbacks, etc. There's a page that discusses some of this stuff at http://greensock.com/why-gsap/ in case it's helpful. Rich is right - TweenMax.pauseAll() and TweenMax.resumeAll() are probably the most intuitive option for what you guys are describing, but I'd also point out that you can use TimelineLite.exportRoot() to basically have it take all of the active tweens at any given time, wrap them in a TimelineLite which you can then control however you want, like pause() it or tween its timeScale to make things go in slow motion. The really cool thing about this is that you can then create new tweens that still work while all the others are paused (or slowed down or whatever). Imagine a game where you want to pause the game but open a modal window and when the user is done interacting with it, it tweens out of the way and you resume() the game. As far as the license goes, most people don't need the special commercial license, but we like to think it pays for itself very quickly in cases where you do need it. See http://greensock.com/licensing/ for details. Happy tweening!
  50. 1 point
    lewster32

    How to disable collision for body

    You can use the processCallback in the collide function. The 4th parameter is a function which, if it returns true, will allow the collision to happen, otherwise the collision will be ignored. This allows you to keep the body enabled for velocity calculations etc, but just temporarily disable collisions between these two objects. If you set enableObstacleCollide to true, the obstacle will begin colliding with the player again: var enableObstacleCollide = false;game.physics.arcade.collide(player, obstacle, function() { // do any collision stuff here}, function() { if (enableObstacleCollide) { return true; } return false;});