https://viglino.github.io/ol-games/examples/map.gameloop.html

Mixed Content: The page at 'https://viglino.github.io/ol-games/examples/map.gameloop.html' was loaded over HTTPS, but requested an insecure stylesheet 'http://viglino.github.io/ol-ext/dist/ol-ext.css'. This request has been blocked; the content must be served over HTTPS.

Uncaught TypeError: ol.inherits is not a function
at ol-games.js:41
map.gameloop.html:100 Uncaught TypeError: ol.Game is not a constructor
at map.gameloop.html:100

:(

Hey, i use ol-games lib and i set a path for animation. But i want to add a tail/trace to see where i've left on the path/animation.
Is it possible to add extra linestring dynamically to follow plane while animating?

From showcase: plane is flying on the path!

Thanks!

Hello, first of all, thanks for this lib!

I'm trying to change image within time or speed which comes through websocket. I couldn't find an official method to change it.

var animationObject = new ol.Sprite({
    position: [lon,lat],
    src: imgSrc1,
    size:64, // i'd like to be happy if there is an option "width and height" instead
    scale:1.5,
    opacity: 1,
    zIndex: 11,
     status: {
       idle: {
            line:0, length:1
        }
   }
});

then i want to change only "src".

animationObject.getStyle()[0].setImage(new ol.style.Sprite({
    src: (speed > 120) ? imgSrc2 : imgSrc1 ,
    size:64, // i'd like to be happy if there is an option "width and height" instead
    scale:1.5,
    opacity: 1,
    zIndex: 11,
}));
animationObject.setDestination(coord,speed);

after this set, nothing happens unless move/zoom on map.
Also i have an interval to check if device is in passive mode and not sending gps data So i change image to passive one.
Is there any better way to update image for this purpose?

ol: v5.2.0
ol-ext & ol-games: latest

Hi,
Thanks for your nice libraries, ol-ext & ol-games
I want to use itin a VueJS application, I installed the package from npm but I can't import the FrameRate to use with Sprite

ol_source_ImageCanvas.call (this, { canvasFunction: this.drawHex });

On above line (line 29 of HexMap.js) i am getting
Uncaught TypeError: Class constructor ImageCanvasSource cannot be invoked without new

When constructing the hex map per below

const hexgrid = new HexGrid ({ size:4000 });
const hexmap = new HexMap({ hexGrid: hexgrid });

I saw in ol-ext that you had to make some changes for ol 7 so maybe similar problems here ?

Not sure if that's the proper place to post questions, but this issue is indeed more a question. I see that when we set a path of a destination, we can add a parameter for speed. On this example: https://viglino.github.io/ol3-games/examples/map.sprite.path.html, the initial speed is 10... But what does that actually means? 10km/h? 10px/s?

Hi,
I'm using sprite path animation
Is it possible to show the animation like a movie? I mean to have a progress bar/seeker bar like media players, so we can show animation progress with progress bar/seeker bar and vice versa?

Hi,

We have identified a problem to update OL6 with ol-ext and ol-games.
When installing packages, we get the following error message:

WARNING in ./node_modules/ol-games/source/HexMap.js 31:0-11
export 'inherits' (imported as 'ol_inherits') was not found in 'ol'

Do you know how we can solve this problem ?

Thanks,
Adrien

Setting style on sprite's name, such as red font, can distinguish the enemy

不断的map.render() 导致电脑cup过高
Continuous map.render () causes computer cup to be too high

Hi, thanks for the excelent work. I'm looking at some example pages, https://viglino.github.io/ol3-games/examples/map.sprite.destination.html, and they are not working. It seems some error while importing javascript. The same happens on ol-ext examples for assets animation.

I am trying to rotate the entire hexagonal grid (canvas of HexMap)...

Unfortunately I haven't found a documented method of doing this through ol-ext and ol-games.
Do you have any idea if this might be possible with a herited method somewhere or with an other solution ?

Hey @Viglino
I was animating a sprite (ex. plane) on a LineString. I have coords,date,speed..etc (comes from GPS device to the DB) and i draw a LineString from coords on map. While animating a sprite on it, i need to show other data on info window or popup which is appearing with select interaction. But i do not know the exact place a sprite on LineString.
This would be very nice idea if someone want to make timeline or info window like me while animating..

Is there any internal solution for this in the libs (ol-ext,ol-games?) .

• If there's no solution for this, I'll try get closest point or something to get LineString position and calculate it manually.

Hope you have a better solution for ms.

NOTE:
I follow this instructions while animating a sprite:
https://viglino.github.io/ol-games/examples/map.sprite.path.html

While plane is flying, it would be better to show info about real time/speed/battery etc.

DB stores data like this:
[lon,lat,speed,time,total_km, battery_level...etc]

https://viglino.github.io/ol-games/examples/map.sprite.path.html

replace the path with
// 向上
var path2 = new ol.geom.LineString([
[265500, 6270000],[265500, 6280000],[265500, 6285000],[265500, 6290000],[265500, 6295000],[265500, 6300000],

]);
// 向下
var path = new ol.geom.LineString([
[265500, 6300000],[265500, 6295000],[265500, 6290000],[265500, 6285000],[265500, 6280000],[265500, 6270000],

]);
as you can see theirs difference

When a sprite is moving to a destination or along a path, if you scroll the map or move the map (I mean, drag the map around), the sprite freezes and won't move. When the map zooming/moving stops, the sprite jumps to the point where it should be. This can be see at https://viglino.github.io/ol3-games/examples/map.sprite.destination.html.

When you do the same thing using the feature animation with ol-ext (http://viglino.github.io/ol-ext/examples/animation/map.featureanimation.path.html), that does not happens. Any chances the issue with ol3-games is a easy fix?