Week 11, 2023

Posted on
by

I’m wondering how to present ultra wide screenshots for a while now, because most people will not have an ultra wide display at hand or not run their browser in fullscreen on such a device. A scaled down version with retained ratio also just don’t really cut it:

Now what if we could wrap this in some sort of 360° image? This isn’t really 360°, of course but you get the idea. A quick search usually yields JS libs like Pannellum (https://pannellum.org/), which look great for this use-case as well and yes we could also solve this in CSS by using an animation and go for a little camera ride.

What if we could optionally also make use of a gyroscope though? You know, that sensor every mobile phone, tablet and VR device comes along with. So the user could device where to look just by moving the device around?

This was when I stumbled over A-Frame (https://aframe.io), which is basically a library for building 3D AR or VR experiences and while I may only scratching it’s surface with my quick tests here it does deliver exactly what I was looking for.

I built demos for various games today and I don’t know how long I’ll host the files here but they all follow the very same code pattern that I’ll add in the end:

https://beko.famkos.net/aframe-elite-dangerous.html

https://beko.famkos.net/aframe-fly-dangerous.html

https://beko.famkos.net/aframe-nms.html

https://beko.famkos.net/aframe-rebel-galaxy-outlaw.html

https://beko.famkos.net/aframe-spacebourne2.html

https://beko.famkos.net/aframe-starcitizen.html

https://beko.famkos.net/aframe-x4-foundations.html

Please be aware that I’m loading a ~5mb blob of JS code directly from A-Frame in the demos so don’t check them out if that is a problem for you. The image asset adds another whopping MB so please be patient. The best experience is on a mobile phone where you should be able to look around by moving the phone left and right. It works on a desktop browser too where the mouse can be used to look around.

Here is a code snippet that shows hows it’s done:

<!DOCTYPE html>
<html>
<head>
  <script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
</head>
<body>
  <a-scene loading-screen="dotsColor: #ff6a00; backgroundColor: black">
    <a-assets>
      <img id="sky" src="./wp-content/uploads/2023/03/elite_dangerous_odyssey_for_my_valentine.jpg">
    </a-assets>
    <a-entity id="rig" position="-8 0 0" rotation="0 90 0">
      <a-entity id="camera" camera="fov:45; zoom: 1" far=90 look-controls></a-entity>
    </a-entity>
    <a-text color="#fff" value="Elite Dangerous ...on a canvas" width="3" position="-10.5 -0.5 1.5"
      rotation="0 135 9"></a-text>
    <a-curvedimage src="#sky" height="20.0" radius="10" theta-length="180" rotation="0 180 0"
      scale="2.5 1 2.5"></a-curvedimage>
    <a-sky rotation="0 0 0" position="0 0 0" color="#000"></a-sky>
  </a-scene>
</body>
</html>

Feel free to copy this snippet and play around with it. Just keep in mind that you have to use _local_ assets too or they won’t show up. Make sure to read the documentation too and play with the built in inspector opened with the key combination ctrl + alt + i.

And yes I’ll happily take a CSS only variant too but I really doubt that’s possible without loosing features like gyroscope data usage.

CC

This content is licensed under a Creative Commons Attribution 4.0 International license.

Posted on
by

Another night in the X4 sandbox: https://www.youtube.com/watch?v=665hXLKSfek / https://tube.tchncs.de/w/pHFP8jZf7PYLyLZSARZQ4T

This is heavily distilled early gameplay of X4: Foundations, where I started another play-through slowly expanding my little empire with trade, side missions, station building, border patrol (loosing the the “Misfit”, my good old starter-ship), a surprise Xenon attack on a station where I was just for shopping and eventually good old fashioned piracy with unexpected guest appearance of some Kha’ak trying to crash the party.

01:11 Setting up trade routes aboard The Law Abiding Windrunner
02:20 Switching over to the Misfit
03:05 Witnessing the death of a trading station (while escorting my own ships to safety)
03:50 Patrolling for money (and looting stuff)
05:48 Repairing satellites (in EVA suit)
07:32 Docking at the impressive Teladi ring station for shopping
08:45 Surprise attack on the ring station by a Xenon K (and it’s demise)
14:32 Extending my own station and buying more mining ships
11:26 Switching over to my frigate for border patrol (lots of pew pew)
14:30 Loosing the Misfit to Kha’ak (and avenging it)
16:07 Going for resupplies and preparing for piracy
16:39 Ambushing the prey, a fat water freighter looking for a new owner
17:59 Starting the boarding operation
18:40 Realizing I need more support to deal with surprises
18:58 Stumbling over mentioned surprises, Kha’ak trying to crash the party
19:51 Sending more boarders as the first group fails
20:22 Finally going home with the price, a “slightly banged up” L water freighter