Table of Contents
A very simple system that aims to emulate sailing or, in general temrs, navigating, in a 2D plane with some solid or otherwise unpassable abritrary polygonal shaped areas. The core principes of this system and why not the code itself can be used on any web game where such a system or tool would be needed.
- The front is just the barely minimum for the demo, and in no way it's a key part of the system. The heart of the system resides at the back, where the calculations and data management take place.
- PHP >=7.2
==Important:== This project makes use of the extension GDImage, which as default comes as disabled. In order to make it work you will need to manually edit your php.ini and enable this extension.
Getting this working is quite simple. Once you got a copy of the repository the next thing is downloading all the dependencies, for which you would make use of a terminal.
First you're gonna stand on the root, then make use of Composer with the next command:
- composer:
composer install
This will install all the needed dependencies and create the autoload, which is required.
The next thing is to install all the Node dependencies.
- node
cd client
npm install
npm run dev
That's all. Next thing is to start a PHP instance on the root with either XAMPP/WAMPP or your favorite web server package. You can also do it with a terminal.
Now just visit your localhost :).
The system is quite simple: either click on the map pic to set the angle in relation with the dot (which represents the being/vehicle) or set it in the angle input. Set the speed using the dropdown, then press the Next Turn button. That's all.
The system stores no data at the back, only reads it. Any further implementation is up to you and it's absolutely possible to scale this.
The sailing system consists of a back which is a very simple API made with Slim and custom classes, and a front which is a Svelte SPA.
As you the client connects to the API, it already comes with an initial pair of X:Y coords which are hardcoded at the front for ease of use. The back returns a picture representing the surroundings of the being. As the being moves around and navigates it will stumble with chunks or masses of land. These chunks are polygonal shapes defined on the database, and each time the being does move the back checks if the arriving point ends inside any of those masses or in the perimeter. - If it does, the being is then placed right outside and its speed is reduced to 0. Further tries of going in the same direction will end in the same result.
For an ease of calculations, this system rounds any number to int. There are no floats for coords.
The purpose of this project is to provide a code that could be reused by anyone. For that to happen, you, future user, must pay attention to this section.
The map you see is first divided in a discretionary amount of tiles, which are later stored in your database in base64 format, as chunks of strings. The MapManager service comes already with all the functions you would need for doing this, and all you need to do is to provide the right input and output.
You can see an example of that inside the folder ./doc/scripts.
For ease of use and simplification of maths, the map is turned into data with a redundancy of data at the borders. This helps to simplify the mechanics when the coords you want to display are near one of the borders and the other side of the map must be shown, which mathematically would be in the ranges that exceed either in negative or positive terms the size of the map.
Here there's an illustration of how the map is stored:
The green area is the data of the original map, which is divided in 4 quarters. Those quarters are then copied on the borders, giving us a x4 map.
Distributed under the MIT License. See LICENSE.txt for more information.
