• Content count

  • Joined

  • Last visited

  1. Physic simulation is calculated only by host or by all clients as well? If by all clients/players, then how you deal with non-deterministic math between different browsers (firefox and chrome still can produce different results using Math.cos/sin etc. and box2d using it as well)
  2. There is a bug when you quickly change character in some way you can float up and higher and higher, so then you hit ceil, but your physic leads to teleport to second floor and so on you end up at the top of a cake, you can then go out of map
  3. I've implemented `Timer` class for high accuracy timing (for example for update logic/game-loop, sending ping each 15 seconds by WebRTC etc.) setTimeout/setInterval fires once per second when tab is inactive, so how to gain accuracy timing? We could set up `setTimeout/setInterval` in WebWorker, because in WebWorkers when tab is inactive, `setTimeout/setInterval` still fires with it's own interval/delay. We could then send message `postmessage/onmessage` from WebWorker to Main Thread on each `setTimeout/setInterval` fire calls as a tick. For some time this idea was working and was brilliant, but when I'm looking now (latest chrome version) this isn't working anymore because of `postmessage`, now `postmessage` delivers event with delay when tab is inactive.. Looks like Chrome Dev Team noticed this feautre, and they've fixed it.. but it wasn't a bug? gaah.. or maybe I have something wrong in the code: https://jsfiddle.net/mfzmotb1/16/ Timer = function Timer(callback, interval) { var id = Timer.prototype.__idCounter++; Timer.prototype.__hash[id] = callback; this.started = false; this.package = JSON.stringify({ id: id, interval: interval }); } Timer.prototype.__workerScript = function() { var __hash = {}; onmessage = function(ev) { var data = JSON.parse(ev.data); if ( __hash[data.id] === undefined ) { __hash[data.id] = { id: data.id, lastTime: performance.now(), interval: data.interval, step: 0 } } else delete __hash[data.id]; } function loop(start) { if ( !start ) for ( var id in __hash ) step(__hash[id]); setTimeout(loop, 0); } loop(true); function step(unit) { while ( performance.now() - unit.lastTime >= unit.interval ) { unit.lastTime += unit.interval; unit.step++; var now = Date.now(); console.log("ww", unit.step, "-", now/1000); postMessage(JSON.stringify({id: unit.id, time: now, step: unit.step})); } } } Timer.prototype.__idCounter = 0; Timer.prototype.__hash = {}; Timer.prototype.__worker = new Worker(URL.createObjectURL(new Blob(['('+Timer.prototype.__workerScript.toString()+')()'], {type: 'application/javascript'}))); Timer.prototype.__worker.onmessage = function(ev) { var data = JSON.parse(ev.data); Timer.prototype.__hash[data.id](data.time, data.step); } Timer.prototype.start = function(){ if ( !this.started ) { Timer.prototype.__worker.postMessage(this.package); this.started = true; } } Timer.prototype.stop = function(){ if ( this.started ) { Timer.prototype.__worker.postMessage(this.package); this.started = false; } } var timer = new Timer(function(wwTime, step) { var now = Date.now(); console.log("m_", step, "-", wwTime/1000, now/1000, (now-wwTime)/1000); }, 100); console.log("starting in 2sec, so you have time to switch tabs"); setTimeout(function() { timer.start(); }, 2000); Basically this code produce new class called `Timer`, there is WebWorker based on one function body `Timer.prototype.__workerScript` <- this fn's body happens in WebWorker. One WebWorker handles all instances of Timer, each instance is for one timer. Any ideas how to fix it? Here goes output: Some tips: ww - console.log called from webworker m_ - console.log called from main thread 1,2,3 - number of timer step Tab Active: starting in 2sec ww 1 - 1485111848.697 //webworker tick time in seconds m_ 1 - 1485111848.697 1485111848.707 0.01 //webworker tick time, main thread tick time, diff ww 2 - 1485111848.798 m_ 2 - 1485111848.798 1485111848.799 0.001 ww 3 - 1485111848.898 m_ 3 - 1485111848.898 1485111848.898 0 ... Tab Inactive: starting in 2sec ww 1 - 1485110821.95 //webworker tick time in seconds ww 2 - 1485110822.049 ww 3 - 1485110822.149 m_ 1 - 1485110821.95 1485110822.169 0.219 //webworker tick time, main thread tick time, diff m_ 2 - 1485110822.049 1485110822.17 0.121 m_ 3 - 1485110822.149 1485110822.171 0.022 ... Do you know any ideas for measuring time for html5 gaming without throttle?
  4. Garbage Collector vs Pixi.js

    Hello Have an Important question. Is Pixi garbage-collector safe? I've found, for example, kind of terrible pieces of code. I will not show them here, because they are easy to find. Just search for "splice" method in pixi.dev.js. You will find it used for deleting elements from array. But Splice always return an array with deleted element/s. In pixi it isn't grabbed to some var, so Garbage Collector will eat it and after eating enough of unused vars, GC will make a lag in runtime, because of freeing memory. Wonder if there are more of memory-unsafe fragments, is Pixi GC safe? EDIT:Some other example:PIXI.Rope.prototype.updateTransform = function(){ var points = this.points; if(points.length < 1)return; var lastPoint = points[0]; var nextPoint; var perp = {x:0, y:0}; //:O object created every call of functionInstead of perp object it may be two variables, perp_x and perp_y, as you can see in the next lines (that aren't shown) perp is used only for some in-function calculations. EDIT2: Garbage Collector based on snake example: Even better..:
  5. position of sprite in shader

    Also is it possible to add new uniforms any time? I'm gonna send array to shader and create uniforms like this: this.uniforms = { "some_array[0]" : {type: "1i", value: 0}, "some_array[1]" : {type: "1i", value: 0} };and later: this.uniforms["some_array[2]"] = {type: "1i", value: 2};and then always update uniform that say about length of this array too. EDIT: Ha! It works!
  6. Pass array to filter/shader

    How to pass an array to shader/filter in pixi.js? For example array of textures. This is what I need and guess that pixi.js doesn't support it yet? The answer is here: http://www.html5gamedevs.com/topic/7055-position-of-sprite-in-shader/?p=42687
  7. get pixeldata in a webgl canvas

    Try checking color of pixel on canvas: image.onload = function() {var canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;var context = canvas.getContext("2d");context.drawImage(image, 0, 0);imageData = context.getImageData(mouse_x, mouse_y, 1, 1).data;//do something with imageData}
  8. position of sprite in shader

    How to know about position of sprite in fragment shader program? I can pass data to shader as uniforms, but it happens only once, when filter is created. I need to know, always current, position of sprite in shader program. Also depending on it, pass appropriate textures.
  9. Hi I need to pass a monochromatic texture (or just about 5-6 colors) to fragment shader and access it. The thing that stopped me is that textures size has to be power of 2. Why this is needed? I think these days gpus shouldn't need things like this. Is it possible to break this requirement?
  10. I try to create mask that clip sprite(light) in this way that we will see shadows. Lets assume: 1. Draw a pixel map where black pixel means rock, white means air. 2. Draw black lightmap on it (black sprite on whole map, with MULTIPLY blending) 3. Draw an light(sprite with ADD blending) on lightmap texture by PIXI,RenderTexure these 3 steps allow us to create lightmaping on map, but lights always will go through walls. So we need to use masking. 1. use Bresenham Algorithm for rasterize Circle (with radius of our light = half of width of texture) result is array of pixels XY that create circle. 2. sort these pixels based on angle (from 0 to 360) so we have then polygon/circle data array. 3, create a mask based on these data now we have masked light but nothing is changed, now we need to raycast from center of light to each pixel on circle again with Bresenham Algorithm 1. use Bresenham Algorithm for rasterize Line from center of light/sprite to each point on circle, result is pixels on the radius/line, if one of them are Rock/black pixel - change this position/pixelXY on circle to collision position. 2. apply mask now we see occlusion to the pixels (rock/air) on map, and shadows. But.. it is too slow!! I've searched a lot of stuff to find a better way, but have nothing. Someone knows a better way for occlusion lights/sprites to pixel map(rock/air)?
  11. Pixi and Google Maps

    If I understood correctly you want to keep interactions with sprites in PIXI. But pass events to map if happened on empty space of stage. You should then listen for click events on stage and pass it to next/under element. Don't know how to do this, maybe there is some API in JS events for it, like "event.passToNext()" or you could listen on mouse enter/leave sprite/stage events in this way: when mouse enter a point/sprite then set canvas "pointer-events:auto;" but if mouse enter stage(so no sprite under mouse) then set "pointer-events:none"; edit: it will not work because of losing canvas interaction with mouse, so enter/leave events won't be fired.
  12. Pixi and Google Maps

    Try css value "pointer-events:none;" for canvas. It should ignore mouse events on it and send them to next element under canvas.
  13. [Pixi] texture or setTexture?

    Definetly using setTexture is better method, because it does a few more things than just replacing texture variable. Check this out here: http://www.goodboydigital.com/pixijs/docs/files/src_pixi_display_Sprite.js.html#l127 this method notices when old and new textures(just a region definitions on real texture?) has different baseTexture(real texture). I think it is necessary cause WebGL need to switch baseTexture currently in use and it takes some gpu. So if baseTexture are the same, we don't need to do this.
  14. Hi It's my first post here, glad to join you guys. Anyway I try to flip sprite(or just texture) horizontally, these are the only ways I found: sprite.scale.x = -1;or sprite.width = sprite.width * -1;but both of them are buggy ways (I don't mean that scalling has a bug). They of course flip sprite horizontally, but also move it to the left of sprite.width pixels. I don't really like the solution that we could keep state for example: sprite.flippedH = true; //user defined variable; so then we can move it to the right preventing displacement of sprite. Is there something to just flip it without changing displaying position? EDIT: Is this the only way we can do it? //extending PIXI.Sprite classPIXI.Sprite.prototype.__defineGetter__("flippedH", function() { return (this._flippedH === true);});PIXI.Sprite.prototype.__defineSetter__("flippedH", function(val) { if ( val != (this._flippedH===true) ) { if ( val ) { this.anchor.x = 0.9; //not 1, because then 1px is out of place to right side } else { this.anchor.x = 0; } this.scale.x *= -1; } this._flippedH = val;});it uses scale and anchor vars, Why it's bad way to achieve it? Because when we use anchor or scalling things to do something different that this, we need to care about negative value of scale and occupied field of anchor. Any ideas?