Giter Club home page Giter Club logo

cat422-glitch-location-viewer's Introduction

CAT422-glitch-location-viewer

Landscape

This code is an attempt to bring Glitch landscapes back to life, and maybe even eventually walk around them and chat with other people. In the meantime try out the viewer here, maybe it'll work!: http://revdancatt.github.io/CAT422-glitch-location-viewer/?v=0.3.6

See the TODO list down at the end for more information

Viewer

The viewer is here: http://revdancatt.github.io/CAT422-glitch-location-viewer/?v=0.3.6 and is just an example of how you can load in the location .json files and render thelandscape with the .png files.

Its not tested on all browsers and is for demo purposes only.

Location JSON files

All the locations in the game have been converted from their original .xml files into JSON files. Not all the content in the .xml has been ported over to the JSON yet, but there's enough to build the scene. You can find them in the locations directory.

Each file has two formats .json and .callback.json. The .json file is what you'll generally use if you're loading in the data to a backend (or making a proxy .json loader that adds a callback).

If you want to load the data into javascript from github, then use the .callback.json files, in jQuery you would do something like this...

$.getScript('http://revdancatt.github.io/CAT422-glitch-location-viewer/locations/GLIERMJ93DE1H25.callback.json');

...which has a built in callback, you'll need a root function getRoom, rather like this...

function getRoom(dataJSON) { console.log(dataJSON); // pass the dataJSON back to something else }

Scenery .pngs

Nearly all the scenery objects (not sprites and other characters & objects) have been converted to .png files. Not all the images made it and I'll be adding them by hand over time as I figure them out.

Note the directory structure has been flattened, all the .pngs now sit in a single directory /img/scenery.

Example Image would be here

Example Image would be here

Tools

There's a few tools that I used to convert all the stuff, that you can find in the tools directory.

1

convert-fla-to-png.jsfl is a script file for Adobe Flash CC, go to commands | Run Command... and open the convert-fla-to-png.jsfl file. This will ask you for an input directory which contains the .fla files from Glitch, it will attempt to open then and export them as .png files to a parallel directory called output.

You don't need to use it, as you can just use the .pngs hosted here. But it's there for reference. Note: at the moment you have to babysit the script when it hits a file it can't convert, I'll fix this in some future version.

2

convert-locations.coffee ... you need to compile this to .js obviously and run it with Node, you'll need to npm install xml2js to ge the xml2js lib. This converts the games .xml files into .json files. Again it's just here for reference as you can use the .json files hosted here. But maybe you want to convert over more stuff, like doors and ladders and what not.

TODO

  • Apply the filters to change the colours
  • Option checkbox to turn blurring on/off (blurring slows everything down)
  • Maybe render to canvas layers instead, may speed the blurring up
  • Some elements need to be flipped horizontally or vertically
  • Work out which bits of scenery are missing
  • Add the name of the current location somewhere on the screen.
  • Add a list of connected locations that the user can click to move from one location to another.
  • Add signposts to the scene so the user can move from one location to another using those
  • Convert the Path lines and walls into the JSON to, so we know where a play can walk
  • Add a player sprite to the scene and let them walk round
  • Add a simple node/socket.io chat server, with global and local chat
  • Write a node script to automatically convert the rest of the location XML files into JSON
  • Work out why the positioning is a bit off on certain landscape elements
  • Work out how to know when to horizontally flip some elements
  • Render a location's "layer" to a number of DIVs to build the whole scene
  • tea and biscuits

Contact

Say "Hi" @revdancatt

License

All scenery .png files and location .json files are provided under the Creative Commons CC0 1.0 Universal License. This is a broadly permissive "No Rights Reserved" license โ€” you may do what you please with what we've provided. I'm just converting them (and hosting on Github) to save other people the time and effort. A shoutout would be nice (it was a pita converting them) but you don't need to.

Original files can be found via glitchthegame.com

cat422-glitch-location-viewer's People

Contributors

remixz avatar revdancatt avatar

Watchers

 avatar  avatar  avatar

Forkers

mexiswow

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.