Popular Content

Showing content with the highest reputation since 08/15/19 in all areas

  1. 2 points
    That's nice using particles. Looks great. Using a shader would also be an option for water simulation.
  2. 2 points

    Latest version persists in browser

    Can you check what you have in your package.json to make sure npm is doing what you think it's doing? i.e. making sure it's explicitly setting 5.1.2 After that check the package.json inside pixi.js inside your node_modules folder for the version there. After that you need to make sure your bundler is not mucking around, as you mention a service worker it looks like you're already looking at this. _edit_ ooh, have you checked your package-lock.json file? it could well be the 'caching' issue is in there.
  3. 2 points
    Hello, Starting back from the Triangle Mesh Example, I would like to add it to a Container, and use the Container.alpha variable to act on my triangle (as it would do with a sprite). Please see this playground: https://www.pixiplayground.com/#/edit/5usZGTmqzQ4MtxP~QLUfF container.addChild(triangle); container.alpha = 0.5; // <- NOT WORKING (EXCEPT FOR 0.0) Triangle should be semi-transparent. What is the good way to do that? Thanks Romain
  4. 2 points
    Welcome to the forums! Congratulations with hitting a problem that is not possible to solve through docs in your first question on this forums. However, PixiJS is not a black box, it has sources: https://github.com/pixijs/pixi.js/blob/dev/packages/mesh/src/Mesh.js#L275 OK, either you override _renderDefault, either make "update" function that'll pass calculated alpha to uniform. https://www.pixiplayground.com/#/edit/dCSAWarvEMdFqWip1BcuO const shader = PIXI.Shader.from(` precision mediump float; attribute vec2 aVertexPosition; uniform mat3 translationMatrix, projectionMatrix; void main() { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); } `,` precision mediump float; uniform float alpha; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * alpha; }`); shader.update = function() { shader.uniforms.alpha = shader.alpha; } btw, that code in _renderDefault is low-level pixi over webgl, you can add hack more stuff if you override it
  5. 2 points
    One thing you may want to try and do is some more research regarding tile map engines. There are probably some GitHub repos for some. This way you can better learn how others are doing it. I have built tile map and scrollers a while back. The engine core itself was very different, since the engine was C++/OpenGL and specialized to handle it. Whereas in your case, you're using an existing engine and its methods to draw. If you are still truly destroying/creating 500 sprites per frame, you should rewrite your algo now. You definitely want to have a sprite pool you render from. Think of the problem as paging in 1-2 rows or columns. For most cases, those are your deltas. Take the simplified case of moving in the X axis. In this case, as you move to the right, for example, you will eventually hit the point where you will need to page in a column to the right. You can achieve this by simply grabbing the leftmost column and rebinding the texture (no destruction or creation) and updating positioning. Note at this moment I'm ignoring z order. The trick here is your overall tile area needs to be larger than your viewport so one doesn't see either side pop in or out. Now much overdraw will be dependent on individual tile size and the max speed you need to scroll through your map. Your "worse case" will be 2 dimension movement where it triggers both row and column swapping. However if you think about the problem more. You are no longer modifying 500 sprites. Rather in your case, about 150 sprites. Note in your code, you do far more than 500 sprites, you're doing 1250 sprites, but for consistency I'll use 500 as the high end number. This means that for the 350 other sprites, they should be "correct" and don't need adjustment. Now you have to address z order. You could opt to re-build z-order each round. The problem area really are when you need to insert versus append/push, since depending on implementation, that will move memory (unless it's a linked list ... I have't looked at the code). If it is a linked list, then it should be relatively cheap, but based on Ivan's comment, it sounds like it is not. One partial "cheat" you could do for draw order too is to have layer containers in your master container, and use that for your z. Note you'll still need to sort that. The other thing is clever art usage can minimize how much sorting is needed. A thing to look out for is how non-world objects interact. So, for example, if characters can look like they are "behind"/occluded by tiles, you need to have a method to control that draw order. In short: - Look for other tile engines and see if you can find some code to study. You want approach, engine type doesn't matter so much. You need to understand the basics of that type of engine more. - Don't destroy/create per frame. Reuse. In general this is a good rule. If you find yourself creating and destroying objects a lot during normal runtime, you should scrutinize your technique. This is not to say you never can do it. I do have some games where I actually create and destroy on the fly but it is for a handful of objects on a custom C++ engine. - Embrace object management. This is the unfortunate responsibility of the game dev. Sure you want to try and avoid it when possible, but world management ... in particular ones which incorporate a lot of animating visuals need to be managed.
  6. 2 points

    Why did the forums move?

    Sadly I share the same experiences. Lots of Facebook groups active on the gamedev subject but so goddamn toxic that there is no motivation whatsoever to stay there. I like forums like this, they are organised and structured, and when properly moderated, very fun. Completely agree with your opinion on Discourse there, just one big list with very user-unfriendly way to filter it.
  7. 2 points

    Why did the forums move?

    When I go to the Discourse site, I just see a list of messages. It doesn't look anything like this site. I guess I will have to make a fake username, and join, if that is where everyone is going. I can never fool these sites. Later some site will ask me "Vornay, do you know someone named <insert my real name>???", and I'm like, "No man, never heard of them." I guess if Phaser doesn't want to run a message board, that is the real issue. Having to moderate it probably distracts from working on Phaser. That is too bad. Social media is pretty toxic nowadays, with everyone apparently being either a Communist or a Nazi. If you get called a Nazi, these larger platforms will simply ban you. If one bans you, the others may ban you too. Your investment in their platform gets nullified. That is why I don't use Unity, Unreal, or other non-free engines. That is why I don't want to be dependent on the App Store or Play Store. That is why I don't work in Swift in anymore. One person gets a wild hair up their butt, and you lose everything. You find out your castle was built on their land, and you never really had a castle. That is why I wont use those forums. They are the opposite of free.
  8. 2 points

    Why did the forums move?

    I am not sure on Discourse policy of sharing data with 3rd party, but you can't really escape tracking. Most websites use Google Analytics. Your best bet is probably using Firefox with disabled tracking, using throwaway email for each service, (+ KeePass so you do not have to remember) and VPN.
  9. 2 points

    Need some help with a Free Drawing App

    Worked like a charm! You are a lifesaver, Ivan, thanks a lot.
  10. 2 points
    Usually its good to use "position" because it affects transform and not the shapes inside graphics. But in your case, you have to rebuild shape every time because UV's are changing, that means you have to change ONLY the shape, not the position. store position somewhere else, not in "position" field. this.brush.position.set(0, 0); this.brush.clear(); this.brush.beginTextureFill(this.resources.t2.texture); this.brush.drawCircle( event.data.global.x, event.data.global.y, this.currentWidth ); this.brush.endFill(); If you want to apply brush multiple times you can just drawCircle multiple points in it. I'm not saying that its best practice, but just if you understand how transforms and texture shift work (and they work like in a Adobe Flash), then this method is probably the best for the case. There's also "matrix" param in beginTextureFill that can help you . Of course when you experiment more, you can start using position + custom matrix inside beginTextureFill but at this point im afraid to suggest that, it will only confuse you.
  11. 2 points

    SpineBoy Mouse Track

    Hi, It should be something like that : // 0. Listen which Pixi mouse event that you want (here PointerDown) stage.onPointerDown = (pixiEvent) => { // 1. Get the bone/constraint that you want to move using mouse const target = mySpineObject.skeleton.findBone("target"); // 2. Modify it's coordinate with the mouse event of pixi target.data.x = pixiEvent.data.global.x; target.data.y = pixiEvent.data.global.y; } Not test..
  12. 2 points
    Hello, and welcome to the forums! I like drawing apps and i helped with several before. Basically, you want a textured brush, right? Graphics.beginTextureFill might help with that, you just have to clear() and drawCircle(x, y, r) every time you draw a brush. Usually I use multiple brushes (whole stroke!), and render() a container that has them - its more efficient per frame. There are other tricks, like, how to make transparent (alpha=0.5) brush and not override brushes in the same stroke. As for your original question - you have to wait some time before someone reponses, because my telepathic abilities aren't enough. My post was written without preparation, i didnt even look at your demo yet. Precise answer takes time to prepare.
  13. 2 points
    Igor Georgiev

    Load all assets in a folder

    How about a script like this: var fs = require("fs"); var list = fs.readdirSync("game/static/assets/audio"); var dynamicAssets = "{\n \"paths\":\n ["; for (var i = 0; i < list.length; i++) { dynamicAssets += "\n \"/assets/audio/" + list[i] + "\","; } dynamicAssets = dynamicAssets.substr(0, dynamicAssets.length - 1) + "\n ]\n}"; fs.open('build/dynamicAssets.json', 'wx', (err, fd) => { if (err) { if (err.code === 'EEXIST') { console.log('dynamicAssets.json already exists'); return; } throw err; } fs.write(fd, dynamicAssets); }); and then you load them like this: let bootLoader = new PIXI.loaders.Loader(); bootLoader.add('dynamicAssets', 'dynamicAssets.json?version=' + version) let dynamicAssetPaths = this.app.bootLoader.resources.dynamicAssets.data.paths; for (let assetIdx=0; assetIdx < dynamicAssetPaths.length; assetIdx++) { let assetPath = dynamicAssetPaths[assetIdx]; let regExp = /([^\/\\&\?]+\.\w{3,4})/g; let assetName = regExp.exec(assetPath)[1]; PIXI.loader.add(assetName, "." + assetPath + "?version=" + version, {loadType:"XHR", xhrType:"blob"}); }
  14. 2 points
    I wasn't aware that you guys had done this in 5.1.1. So I enabled PIXI.SCALE_MODES.LINEAR and went back to the default DisplacementFilter and ... it worked perfectly. The new shader code I was so happy about is completely unnecessary (on desktops at least - maybe I'll still use it if I want to be ambitious about mobile support). Oh well, at least I learned a lot the past few days. Don't worry about missing my issue, I'm sure I'll manage to wear you down with a million other questions in the next few months. In fact, I already have a tricky one in mind - I'll start a new thread right away.
  15. 1 point
    I wrote a filter to achieve special effects. Part of the code is as follows,scale and rotate works well,but the anchor I set seems not right,the sprite still rotates around the upper left corner. constructor(texture:PIXI.Texture) { super(MyFilter.vertSrc, MyFilter.fragSrc) this.maskMatrix = new PIXI.Matrix(); let sprite = new PIXI.Sprite(texture); app.stage.addChild(sprite); sprite.visible = false; this.maskSprite = sprite; this.maskSprite.anchor.set(0.5) //it doesn't work! this._translate = [0, 0]; this.uniforms.mapSampler = sprite.texture; this.uniforms.filterMatrix = this.maskMatrix; } translate(x:number, y:number) { this._translate[0] = x; this._translate[1] = y; this.uniforms.vTranslate = this._translate; } scale(x:number, y:number) { this.maskSprite.scale.set(x, y); } rotate(rad:number) { this.maskSprite.rotation = rad; }
  16. 1 point
    Hello Gurus, I'm working on a project where I have 400,000 static rectangles (5px*5px) and a 20 rectangles that get added dynamically every second. At any given point in the frame, I only need to keep 3000 rectangles in the viewpoint. I'm using single graphics object and clear() method to render 3000 rectangles every sec (draw + clear). I have pan/zoom functionality added as well, and I'm using downsampling to remove overlapping pixels and reduce the number of points that I draw at any given point (to around 5000 rectangles). It works fine but the CPU/GPU usage is around 15%-23%. I'm looking for some suggestions to optimize CPU/GPU and memory usage and reduce the load on CPU/GPU. I set antialias:false on the app. It seems to help a bit. Any further suggestions to improve performance would be greatly helpful. Thank you. Here are couple of things that I tried, but no luck. 1)Instead of draw+clear, I created sprites using graphics and moved them around. That did not help either. 2)I cannot avoid clear and redraw because I have 400,000 points to draw. So I cannot draw all at once and have to downsample. Also, dependeing on the view window, I need to rescale the rectangles, which is extremely difficult to achieve without repaint.
  17. 1 point

    Relic Runway

    RELIC RUNWAY Are you ready for crazy adventures? Run as far as you can, collect coins, upgrade useful bonuses, pick up parts of ancient relics, unlock amazing characters, and compete with your friends to be the best relic runner! LINK: https://gemioli.com/relicrunway/ MAIN FEATURES: Beautiful and dangerous Inka Ruins 10 brave heroes to unlock A lot of ancient relics to discover on your way Play with your Facebook friends And it's free for embedding on your website <iframe src="https://gemioli.com/relicrunway/" name="Relic Runway" width="640" height="480" frameborder="0" scrolling="no" allowfullscreen="true"></iframe> Please contact us at contact@gemioli.com if you have any questions, suggestions, etc.
  18. 1 point
    I think for generating a texture from the line graphic you would do something like this, however I will be quick to add is in my test, it comes out a bit jaggy. The actual sine wave as a graphic is slightly jaggy as well, just not as bad. I also notice clipping. You should be able to draw the two and compare to see what I mean. const graphic = new PIXI.Graphics(); graphic.lineStyle(2, 0xff0000, 1); const startX = 0, startY = 0; const increment = 0.1; graphic.moveTo(startX, startY); for (let x=increment;x < 100;x += increment) { const y = Math.sin(x) * 20; graphic.lineTo(startX + x * 10, startY + y); } graphic.endFill(); let sineTex = app.renderer.generateTexture(graphic, PIXI.SCALE_MODES.LINEAR, window.devicePixelRatio); let lineSprite = new PIXI.Sprite(sineTex);
  19. 1 point
    actually, SVGResource is created automatically by loader, with baseTexture and Texture , its inside "res.svgTest.texture.baseTexture.resource" you can just create a sprite based on it: "new PIXI.Sprite(res.svgTest.texture" - that'll work Yes, there are 5 different objects here : 1. sprite - element of the stage tree, like in Adobe Flash. 2. texture - region of baseTexture 3. baseTexture - stores things in videomemory 4. texture resource - DATA that can be uploaded to videomemory, and how exactly to convert it to RGBA 5. raw data from loader When you get more experience, you'll understand why is it wrapped like that. Basically, if you have some other text vector format (not svg), you can make your own resource that have parsing and uploading algorithm and re-use it for many images.
  20. 1 point
    Is line thckness constant relative to stage (zoom) or screen? You dont need to clear() and repaint every time if you just adjust position and scale. clear&refill is needed only for chunks that weren't visible in previous frame, or the one that is updated (new data). UPD: I love that kind of threads! When you make the main algorithm, while pixijs or any other renderer or framework is just your building blocks
  21. 1 point

    physics library

    Please tell me, what is the best physics library for Pixi.js or commonly used and do they all work with pixi.js v5?
  22. 1 point
    Have you tried the pixi plugin for Chrome? It will display the actual sprite bounding boxes for you. https://chrome.google.com/webstore/detail/pixijs-devtools/aamddddknhcagpehecnhphigffljadon?hl=en Bump.js is my project, so I'm to blame if there's a problem with it! 😀 But my guess is that the actual width and height of the sprite is bigger than you think it is because of child sprites increasing its size.
  23. 1 point
    How large is the texture? If the width is large enough then some devices might have problems with shader precision. You can test if this is the case by changing from webgl rendering to canvas rendering temporarily. If it works properly on canvas then having a smaller texture or splitting the current one into smalle chunks might help.
  24. 1 point

    physics library

    > I already have a working code base with Box2d and there doesn't seem to be any issues ... so just double checking if I was missing something. OK, thought about that while i was sleeping. Finally got an answer: its very good topic for book. As a result, we have books for 40$ and no open tutorials on physics integration I had something with box2d+liquidfun but now i dont remember where is it. Here's the example of what can happen when you do integration with p2, with very helpful comments: import { BodyOptions, Body, Box, Shape } from "p2"; import { PIXEL_TO_METR, METR_TO_PIXEL } from './constants'; export class PixiBody extends Body { display: PIXI.DisplayObject; _lastTransform: number; constructor(options: PixiBodyOptions | undefined, display: PIXI.DisplayObject) { if (!display) throw Error("Display object can't be null"); options = options || {}; options.boundsToShape = options.boundsToShape == undefined ? true : options.boundsToShape; const pos = display.position; const force = options.force ? options.force : { x: 0, y: 0 }; const vel = options.velocity ? options.velocity : { x: 0, y: 0 }; const opts: BodyOptions = { ...(options as any), //because PixiBodyOptions have some other definitions ...{ position: [ -pos.x * PIXEL_TO_METR, - pos.y * PIXEL_TO_METR ], velocity: [vel.x, vel.y], force: [force.x, force.y] } }; super(opts); this.angle = display.rotation; this.display = display; if(options.shape instanceof Shape) { this.addShape(options.shape) } else if (options.boundsToShape) { const bounds = display.getLocalBounds(); const box = new Box({ width: Math.abs(bounds.width * PIXEL_TO_METR * display.scale.x), height: Math.abs(bounds.height * PIXEL_TO_METR * display.scale.y) }); box.material = options.material; //todo fixme, pass valid offset; //FIXME //FIIIIIIXXXXXMMMMMEEEEE this.addShape(box); } this._lastTransform = (this.display.transform as any)._localID; } update() { if (this._lastTransform !== (this.display.transform as any)._localID) { this.position[0] = -this.display.x * PIXEL_TO_METR; this.position[1] = -this.display.y * PIXEL_TO_METR; this.angle = this.display.rotation; } else { if (this.sleepState != Body.AWAKE) return; this.display.position.set( -this.position[0] * METR_TO_PIXEL, -this.position[1] * METR_TO_PIXEL); this.display.rotation = this.angle; } this._lastTransform = (this.display.transform as any)._localID; } destroy() { //??? this.display = undefined; } }
  25. 1 point

    physics library

    Using physics libraries is ok in my opinion. People just need to know that there's no pre-existing integration, so you have to basically do one of these: - Integrate physics library to pixi directly (I wouldn't recommend, that would break updates etc.) - Run the physics and rendering separately and have some kind of synchronization between the two. This is the method I have used succesfully with matterjs. - Build a plugin for physics syncing to pixi. The second method I basically had all physically interacting game objects paired with a physics body and on each renderloop the transforms for those objects would be synced with physics bodies.
  26. 1 point
    Okay, I think I found an answer to my own question. The trick seems to change the alignment if the lineStyle. Doing the following gives me the expected results. this.panel.lineStyle(this.menuDef.panel.stroke.thickness, this.menuDef.panel.stroke.color.color, this.menuDef.panel.stroke.color.alpha, 0);
  27. 1 point

    physics library

    DONT USE PIXIJS WITH PHYSICS LIBRARIES. We tell that every time to every person who ask. But you guys are stubborn. p2, matter, box2d, people use everything even when we forbid them to do so. Whatever you use, those two libs can help with editing shapes for your physcis engine: https://github.com/eXponenta/pixi-poly - integration with physics-editor https://github.com/eXponenta/pixi-tiled - integration with tiled (shapes, not tilemap!)
  28. 1 point

    Relic Runway

    Player clicks button, game hides its canvas and shows IMA SDK elements, loads IMA SDK, loads video ad, does all other SDK work and finally google.ima.AdsManager start method call. Then game listens for finish events of an ads, hides IMA SDK elements and shows its canvas. All java script code of getting it to work is on many IMA SDK tutorials, like link above
  29. 1 point

    [Beta] Retro RPG Online 2

    We use socket-io to parse messages back and forth from the server. We have currently one server, and each map is an instance containing the players and monsters. This is so less traffic is needed to maintain the world state. It uses what I call a message pump to avoid packet flooding the client in the initial packet and map changes. The renderer re-uses its previous render in optimized mode and loads only the new edges and in smaller screens which are then scaled to fit the user window. Checkout the open client for more information. Just thought I'd update the Player User Interface has had an overhaul and the window backgrounds are pure html/css without images (except the close buttons). I have yet to update the NPC windows as they will require more complex adjustments particularly for lower resolution devices. Enjoy!
  30. 1 point
    Hi Everyone, Just letting you know I'm busy updating my old Pixi game loop, Smoothie, from Pixi v3 to v5: https://github.com/kittykatattack/smoothie/tree/dev I'd appreciate any contributions or improvements. Feel free to PR minor tweaks, but for any feature changes or major refactoring let's discuss those in the Issues. Thanks!!! kk.
  31. 1 point
    There's also plenty solutions that build on top of cordova and make the build pipeline easier / enable use of native ui components / add more features. For example phonegap: https://phonegap.com/ Ionic: https://ionicframework.com/ Appgyver steroids: https://www.appgyver.io/steroids Framework7 https://framework7.io/ Then there's also more native solutions like react-native, flutter and nativescript. With these though using pixi is much harder as they run as native apps. You could also use a pwa builder https://github.com/pwa-builder/PWABuilder-CLI to package existing web app into a PWA (progressive web app), though with that accessing any native components is much harder. I have done one project with pure canvas 2d 4 years ago with appgyver steroids (decided to go with that mainly because it had a build pipeline) and in app purchases were pretty easy to do. I'd assume same from all cordova based stuff.
  32. 1 point
    Hi guys, After skimming through the forum, I really couldn't find any sound information about the mobile game development with PixiJS. I used Starling before and had success with it. I don't want to use Unity for my next game as it feels somewhat overkill for a word game I'm going to create and coding the game with TypeScript / JavaScript sounds really nice. Some questions come to my mind are: 1. What are you guys use to publish your WebGL games to Google Play Store / AppStore? 2. How's the performance of the games, are you happy with it? Are you able to provide near native feel to your players? 3. I see that CocoonJS was a popular option to publish the games to devices but as it's gone and no more an option, how do you create native apps, Cordova? 4. Do you have any experience with In App Purchases with Cordova? Is it a seamless work or did you have headaches trying to implement iap? Thanks for the help
  33. 1 point
    1. It's pretty common to use Apache Cordova (https://cordova.apache.org/) to bundle JavaScript into an app-like experience. There are some quirks with supporting old version of Android, but otherwise, there are lots of plugins available for interacting with native APIs (accelerometer, haptics, etc). 2. PixiJS uses WebGL which is very fast, especially on mobile devices. There are some performance tips on the GitHub wiki and I'm sure lots of advice here. You will probably be able to achieve 30+fps, if not higher, on mobile. Although, it's also easy to abuse performance, so make sure you understand issues of limited RAM and slower CPU, which are big limiting factors on mobile. 3. Yes for Cordova. In PixiJS v5, we have dropped support for CocoonJS. 4. A 2 second search revealed a bunch of Cordova plugins: "cordova in-app purchases", looks like there are a few options that would be worth testing. Good luck!
  34. 1 point

    Why did the forums move?

    I am not sure what you mean by "forums". It sounds like you try to say as if everything and everyone from this website moved over to Discourse. The only thing I know for certain is that Rich and his team decided to setup a Discourse for Phaser to replace the existing subfora on this website with a new, official Phaser community forum. And since a lot of users here were using Phaser as their main engine, they also started moving over to there and stopped being active here. I mean, look at the stats. Barely 200 people visit this website daily (from which like 10-20 are actual members!) while it used to be like 4000 last year. That is a serious drop imho. I also don't see Rich being active here anymore, heck, wonder if any mod or admin is active at all. I sent the guys a message last month but have yet to receive a reply. I know many users check it daily but barely anyone replies anymore. I also have seen topics here on fora where they don't belong, let alone follow the rules if they do. If you tried such a thing last year, it got closed almost right away because mods still used to login daily, but now.. They got a lot of cleanup work to do if they do, I tell you that. That being said though, I looked at Discourse and I agree with point of view. I don't really can find it in my heart to like it either.. But than again, while there is lot to complain about Discourse, the forum software they use here is quite expensive on the other hand. I mean, look at the prices on the Invision website, bloody hell. Invision charges based on how many visitors you have daily while Discourse's pricing model is not based on your total daily visitors amount. So I completely get that Rich and his team started to look for alternatives. I mean, I respect the fact they use paid forum software without charging us anything at all, let alone pumping the website full of ads like any other company would do. You got to hand it to them, that is one damn respectful thing.
  35. 1 point
    For my app I also implemented freehand drawing but I use a two-stage approach: first I print circles on a renderTexture (that covers the viewport) wherever the cursor goes, and once the user emits a mouseup-event, I re-render the whole thing on a regular layer using a non-closed polygon along with simplify.js to reduce the number of vertices. For really quick movements there were 'gaps' in my implementation (since the mouse-emit-rate seems limited), so I also used interpolation to make that smooth. Works also really nice
  36. 1 point

    jump character in a game

    You should apply somekind of force in the button down handler and then update the character position in your ticker. The vy & vx are look like they would be your forces? Then the loop could be something like: character.y += character.vy; character.vy += gravity; if( character hits ground ) { character.y = groundy; character.vy = 0; } Or if you have something that has no gravity and you only wish to move the character from a to b on button press then I would suggest using somekind of tweening library. I use TweenJS myself. With that you could do something like this: up.press = function(){ Tween.get(character).to({y:0}, 1000); } up.release = function(){ Tween.get(character).to({y:255}, 1000); }
  37. 1 point
    ok, i dont know need to replicate it somewhere but i dont have apple devices
  38. 1 point
    John swana

    firedrone js13kb contest game

    real objective soon to come it's a work in progress kind of game
  39. 1 point
    Your models look awesome, good job
  40. 1 point
    Thank You! How far did you play in the game?
  41. 1 point

    Bouncy Jump (3d)

    My new game in html5 done in Playcanvas engine For game licenses contact: arif@dumadu.com https://playcanv.as/p/0OdQ0ldY/
  42. 1 point
    Your translation project looks incredibly cool too. I know a bit about i18n
  43. 1 point

    Error with Spine version 3.8.60

    quick fix for the time being: you can change the spine version in spine settings => Version =>to 3.7.x (dropdown) and it should work again.
  44. 1 point
    I finally managed to learn (just barely) enough shader programming to fix this myself. The problem was as I suspected that the displacement map wasn't getting interpolated properly by just by calling texture2d. So I added bilinear interpolation manually in the fragment shader, like this: varying vec2 vFilterCoord; varying vec2 vTextureCoord; uniform vec2 scale; uniform mat2 rotation; uniform sampler2D uSampler; uniform sampler2D mapSampler; uniform highp vec4 inputSize; uniform vec4 inputClamp; uniform vec4 mapSize; vec4 texture2D_bilinear(sampler2D sampler, vec2 coord, vec4 samplerSize) { vec2 uv = coord*samplerSize.xy - 0.5; vec2 icoord = floor(uv); vec2 f = fract(uv); vec4 topleft = texture2D(sampler, (icoord + vec2(0.5,0.5)) * samplerSize.zw); vec4 topright = texture2D(sampler, (icoord + vec2(1.5,0.5)) * samplerSize.zw); vec4 bottomleft = texture2D(sampler, (icoord + vec2(0.5,1.5)) * samplerSize.zw); vec4 bottomright = texture2D(sampler, (icoord + vec2(1.5,1.5)) * samplerSize.zw); vec4 top = mix(topleft, topright, f.x); vec4 bottom = mix(bottomleft, bottomright, f.x); return mix(top, bottom, f.y); } void main(void) { vec4 map = texture2D_bilinear(mapSampler, vFilterCoord, mapSize); map -= 0.5; map.xy = scale * inputSize.zw * (rotation * map.xy); gl_FragColor = texture2D(uSampler, clamp(vTextureCoord.xy + map.xy, inputClamp.xy, inputClamp.zw)); } The vertex shader is the default DisplacementFilter shader. I also had to pass in a new uniform ("mapSize") to tell the fragment shader the dimensions of the displacement map. But it works 100% - the warped result is just as smooth and pixel perfect as my manual canvas version linked above. So now I can warp large images at 60 fps instead of taking roughly one second per frame. But I still don't understand why this was needed. I was under the impression that Pixi used bilinear interpolation by default in texture2D calls (by passing GL_LINEAR). Or am I wrong about this? To Pixi devs: feel free to add this as an boolean option to DisplacementFilter. Call it accurateDisplacement or smoothDisplacement or something. But it probably shouldn't replace the default shader since the bilinear interpolation makes it run slower than the default (4x the number of calls to texture2D).
  45. 1 point
    I hope this happens as soon as possible. I will wait.
  46. 1 point
    Good to know, I have just sent them my first invoice. I will publish with them instead of GameDistribution when possible. Was just curious, as they both use very similar platforms.
  47. 1 point

    Server javascript code

    Rightly or wrongly, most JS applications now use a build system of some sort, which means they have access to a module system, which means that they can understand `require` (which is CommonJS format, as used by Node, to complicate things, there is now ES6 module spec as well, using `import` and `export` syntax, mostly, build systems will understand both, mostly). As most JS apps use a build system this means that most JS libraries (such as found on npm, which is *not* just for node, its for JS, which includes node and client and IOT and and and etc etc etc) now _expect_ that build system and the module system that it allows. However, many many JS libraries also expose a client-only version of their library for those who do not want to use a build system. Even if you are building an entirely client-side application I would still advise setting up a build tool chain. Some disadvantages of a build chain: * Can be tricky to set up * Still not quite as simple as just running code in the browser Some advantages: * Many cross-browser issues disappear due to transpilation * You get access to a module system, helping you to organise your code base * Due to module system you get easier access to external libraries by using a service such as npm to access that code (i.e. you no longer have to reinvent the wheel and it is considerably safer than other methods of accessing third-party code) If you did want to go down the route of using a build system I think the following steps would get you there, usually without too much trouble, but, it might involve quite a lot of learning depending on how experienced you are: * Install node on your local machine, this side-installs npm, the node package manager. * Install a command line on your machine (if it does not already have it) and spend a few hours understanding how to use it. * Create a new folder for your new project. * From the command line run `npm init`, this sets up a new project. * From the command line run `npm install -g parcel-bundler` * Create an `index.html` file and put whatever you like in there * From the command line run `parcel index.html` At this point 1 of 2 things will happen: 1) You will have port access issues on _some_ systems. Resolution to this depends on your machine, google the solution, there will be lots of solutions. 2) You local server will fire up and will serve your index.html. If you run in to point 1, fix it, and you will be at point 2. This is good. Now cancel that running script (usually ctrl-C/cmd-C from the command line). From the command line run `parcel watch index.html`. Now you have a development build running. Change the code within index.html, switch back to your browser tab, see those changes instantly propagated in the browser _without_ a page refresh. It is magic. Beyond installing node (and npm), these steps are outlined in more detail at https://parceljs.org/getting_started.html. Parcel is one of many bundlers you may use, but it is the easiest to get going with (and very good I might add, but you have choices if you don't like it). Note that none of this is non-trivial, and its up to you if you think the advantages (which I have barely touched on) outweigh the initial cost of setup. Also note that this isn't necessarily the 'best' way to get started, I'd advise some changes, but, you can do those later. This is likely the easiest way to get going with build tooling for JS.
  48. 1 point

    Rotation of arcade physics body

    I'm pretty sure you can just set the property `angle` or the property `rotation` on the an Arcade physics body. I believe `rotation` uses radians.
  49. 1 point

    Pixi.js Showcase

    Yes i made https://skyfight.io and i had submitted it to your pixi gallery a while ago, but it appears to have been ignored, which i don't understand as its a game that really shows what can be done with pixi. About Skyfight Skyfight is a multiplayer dogfighting game where the players control a fighter aeroplane and fly around the game zone trying to destroy other players' planes. Each fighter is equipped with basic machine guns which can be temporarily upgraded by catching falling parachutes, there are also upgrades for manoeuvrability, shields, speed and our favourite Kamikaze. As the players play they gain rank and as they progress through the ranks, the more features such as custom and team games become available at those ranks, also as you play you will also be awarded medals for completing some of the 49 achievements which are distributed throughout the game. How to Play Skyfight The objective of the game is to shoot down as many planes as possible while increasing your score and rank. As you enter the game for the first time there is a keyboard layout which consists of up down left and right and of course shoot which is the space bar. It’s not complicated just lots of fun. Skyfight Strategy The strategy is to kill everyone, but there are some hidden gems like looping which always gets you out of trouble when someone is on your tail. Collecting the health parachutes should keep you alive, but if you do get shot down then just hit enter and take off again as your rank and medals is automatically saved no matter how many times you go down. So don’t just sit there get one up!
  50. 1 point

    Pixi.js Showcase

    This is the isometric engine I'm working on, it use Pixijs v3 for rendering. Nothing playable for now, but I'll share an online demo soon