When checking out some games, it can definitely motivate to do some coding. I found it very joyful to see some Cities Skyline on youtube. It is a city building game with extensive traffic management features. Its 3D graphics is beautiful. Watching how someone was managing the traffic, has something very satisfying.

While watching, it made me thing, I would like to build a game on the map, maybe on the open street map. I had the idea, to render the map using pixi js, still, I wanted to create some effect, that looks like 3d. My plan was, to tilt, scale and rotate the two dimensional map of openstreetmap, so that is looks a little like 3D. But I could not find a setting, that made the effect look great. The effect looked good, for moments, but I could not do a complete spin.

At some point, I got frustrated and dropped Pixi and throw in real 3D with three.js. Drawing the map, I implemented a camera module, that is easier to use then the original perspective camera, (of course, the original is used internally). Having the camera setup, I wanted to control it with gestures. So I got back to the gesture recognizer I made a long time ago at molasync. I found, this is not what I wanted to use with typescript.

When I added the code to the project, typescript show errors, in about one third of the lines. That was some refactoring work, making functions to private methods, most local variables also became private properties. I changed to my new implementation of tmitter, what creates one emitter for every type of event. I made a better separation of what is a touch- and what is a mouse-event.

Ohh, that was nice, to resolve one issue after the other, and then, in the end, when testing, I only needed three tests, and it worked as before. Nice, having such old code, refactored and still work as intended.

Contents