PanoPuzzle

<img src="screenshots/PanoPuzzleLogo_4.png" align="right" width="320" height="320"> A 360 panoramic puzzle game - create longer interactions with your 360 images The game subdivides the cubefaces of a 360 panorama and rotates some of them. It is your job to find and rotate all the wrongly rotated ones and restore the 360 panorama to it's original glory.

When starting the game it will look like this <img src="screenshots/MainInfo.jpg" width=1000> This gives you all the information you need to play the game - just look around by dragging the panoramic image with the finger/mouse or move your mobile device around and click/tap on a tile to rotate it until all the tiles are pointing in the right direction. Some settings can be changed, puzzles can be selected directly and puzzle categories can be changed by clicking/tapping the settings cog-icon at the bottom left of the screen which will open up a small settings panel. <img src="screenshots/SettingsAndCollections.jpg" width=1000> The game also allows you to zoom out and solve the puzzle looking at the cube from the outside, a tile counter can be en/disabled to make it easier/harder and you can share a specific puzzle via the share button on the bottom right. <img src="screenshots/UI2a.jpg" width=1000>

Getting PanoPuzzle for your own web site

Getting the code

--- Still working on it You can always just get the whole thing as a zip file - the directory structure needs to be observed. Will try to put some zip files as releases together.

Preparing the panoramic images

The directory is the path relative to the images directory

├───images
   ├───collection2
   │   ├───pano1
   │   │       back.jpg
   │   │       bottom.jpg
   │   │       front.jpg
   │   │       left.jpg
   │   │       right.jpg
   │   │       top.jpg
   │   │
   │   └───pano2
   │           back.jpg
   │           bottom.jpg
   │           front.jpg
   │           left.jpg
   │           right.jpg
   │           top.jpg
   │
   ├───pano1
   │       back.jpg
   │       bottom.jpg
   │       front.jpg
   │       left.jpg
   │       right.jpg
   │       top.jpg
   │
   └───pano2
           back.jpg
           bottom.jpg
           front.jpg
           left.jpg
           right.jpg
           top.jpg

In the directory (e.g. pano1) the script expects the cube faces named back.jpg, bottom.jpg, front.jpg, left.jpg, right.jpg and top.jpg as you can see in the directory tree above. The directories are specified in the <a href="https://github.com/kronpano/PanoPuzzle/blob/main/README.md#creating-and-changing-the-configuration-file">configuration file</a>

Please create the cube faces so that they are sized to a power of 2 e.g. 1024x1024 or 2048x2048 This will prevent the script from complaining (warnings) that the texture is not a power of 2

I use PTGui to make this conversion - this allows to set the size and jpg compression - smaller files load quicker BUT you might get compression artifacts

There are also free online services you can use to convert an equirectangular image to cube faces like https://360toolkit.co/convert-spherical-equirectangular-to-cubemap or https://jaxry.github.io/panorama-to-cubemap/ and free tools for download (windows) https://pragmar.com/qbit/

This conversion could be implemented in javascript as well but it would need to run every time again to convert an equirectangular input to cubemap images. Doing it in javascript means it would use the device for the conversion which takes time/proessing power...

Doing it "offline" also gives the user the possibility to choose a jpg compression which makes the image files small enough but doesn't leave too many compression artifacts. I usually end up using a compression between 50-70 - using a higher compression for 2048x2048 files to shrink them a bit more.

Creating and changing the configuration file

--- Still working on it The example configuration files like <a href="include/PanoPuzzle_config_1.js">PanoPuzzle_config_1.js</a> have a comment section at the start and a descriptiopn of all the grid patterns at the end but a better explanation will follow soon.

The configuration file is divided into a couple of sections:

head the head contains the following code and is the same no matter if you have a config with one or many collections

// this is the first .js file to be included in the HTML so I need to define it here
// because a multi collection puzzle might need this value
// this value should not be changed or PanoPuzzle might not work any more properly
const baseURL = window.location.href.split("?")[0];

// needed to make it possible to run several puzzle games on the same URL with different settings...
// this name is used as a post-fix of the local storage values of a game - if two puzzle games are run
// under the same URL with the same ConfigName - there will be a problem!!
const ConfigName ="OneCollection"

// which configuration to read for the current puzzle collection
// if you point to the main URL e.g. panopuzzle.created-by.me without any additional parameters
// the whichDefaultConfig variable will determine which part of PP_config will be used as the default
// So if you add a whole new collection and want people to see it add it in PP_config and change the default value here
const whichDefaultConfig = "demo_1";   //possible values come out of the PP_config variable 

// time in ms the info stays before before hiding by itself
const infoTime = 15000;

// percentage of tiles shuffeld on easy or hard
// to check the end blurbs after the puzzles are finished (defined in PP_config) I set the easy value to 0
// this reports a wrong time for solving the puzzle but you don't have to play it - it will be solved
const panoShuffleEasy = 10;
const panoShuffleHard = 90;

// percentage of normal shuffle rate is pecified in PP_config for each panorama individually

PP definition (PP for PanoPuzzle) This part is different for PanoPuzzles with one or more than one collection. A configuration with only one collection basically defines the info variable which is shown at the start of the game or when you click the i in the settings panel. The variable contains HTML formatted text which can be styled using CSS. Because it is a multi-line variable definition it needs to be enclosed in ` (back ticks) so you need to be careful if you want to use any back-ticks in your HTML. The basic format is

PP = { 
"InfoLinks":{
      "info":`
              multi line
              HTML variable with formatting
      `
      }
}

check out <a href="include/PanoPuzzle_config_1.js">PanoPuzzle_config_1.js</a> as an example A configuration with multiple collections defines the info variable as well but in addition it will have descriptions and links to the other collections. The collections are defined furher down in PP_config but the text that will appear in the "More collections" tab and the links and tooltips are defined here. The basic format is

 PP = { 
 "InfoLinks":{
      "info":`
              multi line
              HTML variable with formatting
      `,  //so far the same -- definition of info and now the additional values - don't forget the , after the `
      "links":{
              "maze":{                                        // config name - needs to be defined in PP_config
                      title:"A puzzle of a maze",             // tooltip when hovering over that collection
                      href:baseURL+"?config=maze&pano=2",     // the link to that collection + which pano to start
                      text:"Maze Puzzle plain"                // the text in the "More collections" tab
              },
              "grid":{                                         // config name - needs to be defined in PP_config
                      title:"Shows the build-in grid patterns", 
                      href:baseURL+"?config=grid",            // if no pano is given a random panorama in the first half
                                                              // of the list will be selected by the javascript 
                      text:"Grid demo - shows build-in grid patterns of PanoPuzzle"
              }, 			 
              "ColouredMazeNames":{                           // config name - needs to be defined in PP_config
                      title:"Coloured maze with names", 
                      href:baseURL+"?config=ColouredMazeNames",
                      text:"Coloured maze with names different subdirectory"
              }
      },
      // here you define which of the links above will be shown for a certain configuration
      // if you have several collections and you do not want all the other collections to show up
      // for everything you can select which ones to show - or show them all	
      "maze_Links":[                                          // this name is a config name defined in PP_config
                                                              // followed by "_Links" 
              "grid","ColouredMazeNames","ColouredMaze"       // all those names need to be defined in PP_config
      ],
      "grid_Links":[
              "maze","ColouredMazeNames","ColouredMaze"
      ],
      "ColouredMazeNames_Links":[
              "maze","grid","ColouredMaze"
      ],
      "ColouredMaze_Links":[
              "maze","grid","ColouredMazeNames"
      ]        
      }
}

check out <a href="include/PanoPuzzle_config_2.js">PanoPuzzle_config_2.js</a> as an examp

PanoPuzzle

Install / Use

README

PanoPuzzle

Getting PanoPuzzle for your own web site

Getting the code

Preparing the panoramic images

Creating and changing the configuration file