OpenTibia OTClient that unpack map.otbm to .png files - v2.0

[Acubens]

If v4 .exe did not work, but you could compile sources and run app, it probably means, you have some .dll used by application in custom version already installed in Windows.

Thanks gesior now is working i rebuild the version 4.0 using SSE2 option again and run fine, maybe was a problem saving the project.

Do you know any RDP or virtual machine that i can rent to use this client to render all fast? in my machine takes the eternity because is a old pc.

 

[jonasu]

Released v2 and v3 versions were 32bit and they could not load big maps like RL map, because of 2.6 GB RAM limit. That's why you had to use true (or compile otclient on your own to get 64bit version).
Released v4 version (64bit) should load all houses with false:

generateHouses(30, false)

Generating with true take hours - it reloads whole map.otbm for every house, with false it should be few minutes.

It should generate all houses. If some house is bugged on map (common on RL maps), if will show message in console:

After generating house images, you should check, if there are any messages like that in OTC terminal. House errors handling was also added in v4. v2/v3 version was just crashing OTC.

About displaying on site:

<?php
$houseId = 123;

// 'glob' search for files in directory and handles '*' in pattern
$imageFiles = glob('images/houses/' . $houseId . '_*.png');
foreach($imageFiles as $imagePath)
{ 
    // we need to convert HDD path to URL
    // $imagePath = 'images/houses/123_7.png'
    // $imageName = '123_7.png'
    $imageName = basename($imagePath);
 
    echo '<div><img src="HERE/path/to/house/images/relational/to/website/path/' . $imageName . '"></div>
}

Thanks alot!
Following your code I was able to implement this in myaac, tibiacom template.
First i downloaded slick - the last carousel you'll ever need (https://kenwheeler.github.io/slick/)
and put it in my webroot and renamed the folder to slick.
system/pages/houses.php

..
// 'glob' search for files in directory and handles '*' in pattern
$imageFiles = glob('images/houses/' . $houseId . '_*.png');
if(!$imageFiles) {
    $imageFiles = ['images/houses/default.jpg'];
}
..
$twig->display('houses.view.html.twig', array(
..
'houseName' => isset($house['name']) ? $house['name'] : null,
..
}

system/templates/houses.view.html.twig (in the td for pictures)

<td style="width:240px;">
    {% if imageFiles is not empty %}
        {% set i = 0 %}
        <div class="slick-carousel" style="width:200px;height:200px;margin:auto;">
            {% for image in imageFiles %}
                {% set i = i + 1 %}
                <div style="width:200px;height:200px;">
                    <img src="{{ image }}" height="200" width="200">
                </div>
            {% endfor %}
        </div>
    {% endif %}                                  
</td>

system/templates/houses.view.html.twig (at the bottom of the file)

<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.slick-carousel').slick({
        variableWidth: true
      });
    });
</script>

system/functions.php (below <meta name="generator" content="MyAAC" /> )

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

slick/slick.css (unsure if this helps, might not be needed)

.slick-slide
{
    display: none;
    float: left;
    width: 100%;
    height: 100%;
    min-height: 1px;
}

Hopefully this helps someone trying to do the same thing for their website.
You can see the live finished product on my site, not all houses have been correctly added yet, still trying to iron out the final issues. Good enough for now

 

[Gesior.pl]

@jonasu

if(!$imageFiles) {
    $imageFiles = 'images/houses/default.jpg';
}

Should be:

if(!$imageFiles) {
    $imageFiles = ['images/houses/default.jpg'];
}

as rest of script expects array of images [ glob returns array ].

 

[marcelomnzs]

ERROR: Failed to load '/things/792/items.srv' (OTB file): invalid otb file

items.srv in my old server cant be load

 

[Gesior.pl]

ERROR: Failed to load '/things/792/items.srv' (OTB file): invalid otb file

items.srv in my old server cant be load

tibia.com Tibia Server 7.72 stolen files (items.srv in place of items.otb) AKA Nostalrius are not OTS files and are not compatible with OTC, so you can't use them to generate map/item images
Is there item editor for Nostalrius with open source code? Maybe I can add .srv format support by copying code from it.

 

[Rookig]

omg, nice release thanks

 

[bengalien]

ERROR: Failed to load '/map.otbm': Invalid attribute '23'
ERROR: lua function callback failed: LUA ERROR:
/otclientrc.lua:55: attempt to index a nil value
stack traceback:
[C]: in function '__index'
/otclientrc.lua:55: in function </otclientrc.lua:45>

latest 1321 canary map

What is the problem?

 

[alejandro762]

EDIT:
There is version 4.0 thread:

OpenTibia - OTClient that unpack map.otbm to .png files - v4.0

What is new in version 4.0? website view with NPCs and monsters search configurable town names and positions - big names visible on map possibility to link NPCs and monsters ex. mymap.com/#npc,Xodet , mymap.com/#monster,Dragon+Lord scripts to run 'zoom levels' and 'compression' on 16 cores on...

otland.net

on GitHub is available version 5.1:

Release Map generator v5.1 - Windows x64 (64 bit) · gesior/otclient_mapgen

add LUA function to generate big images

github.com

What is new in version 2.0?
- much faster generation

• - - you can run PHP scripts on all CPU cores
• - - much calculations moved to C++, it increased speed for around 400%
• easier to use
• split map to parts and load it one after another - you can run map generation with ~1GB ram, even if map uses few GB when you start server (works on 32bit systems!)

What is this?
It's automatic map image generator [for website view 'like GoogleMaps'].
It generates OTS map .png images (each 8x8 tiles).

-- BINARY (.EXE) ATTACHHED! YOU DO NOT HAVE TO COMPILE! --
To run binary you may need to install VS2015 Redist first (choose x86 version):
Download Microsoft Visual C++ 2015 Redistributable Update 3 from Official Microsoft Download Center

It contains configured JavaScript and HTML to view map on website like this:

How to use?
1. Download otclient_mapgen from GitHub:
GitHub - gesior/otclient_mapgen: Open Tibia map images generator [good for Leaflets]. Loads .otbm file and generate .png images 256x256 px

and compile it like normal OTClient:
Compiling on Windows · edubart/otclient Wiki · GitHub
Compiling on Linux · edubart/otclient Wiki · GitHub
Compiling on Mac OS X · edubart/otclient Wiki · GitHub
Compiling for Android · edubart/otclient Wiki · GitHub

OR DOWNLOAD BINARY (.EXE) ATTACHED

2. Copy your server client .spr and .dat files to OTClient folder: data/things/HERE_PROTOCOL_VERSION/

3. Copy your server data/items/items.otb file to OTClient folder: data/things/HERE_PROTOCOL_VERSION/

4. Copy your server data/world/MAP_NAME.otbm file to OTClient folder: data/map.otbm

5. Run otclient.exe

6. Type in client terminal command like:

prepareClient(1076, '/things/1076/items.otb', '/map.otbm', 8, 5)

• with you client protocol version,
• valid paths to items.otb and map.otbm,
• number of threads to run (in example it's 8),
• number of map parts (OTC will split map to parts to reduce maximum RAM usage)

[Paths are relational, so start path with '/' to start in folder 'data', access to other folders in computer is blocked]

7. OTClient will show in 10-50 seconds (it will freez client, do not close it, just wait) something like:


8. Type in client terminal command:

generateMap('all', 30)

OTClient will report progress in terminal.

9. Your map images will appear in your system 'user' directory

%HOMEPATH%/otclient - Windows, open it in folder explorer
$({HOME}/.otclient - Linux, 'cd' to it, this folder is invisible, but you can navigate to it

10. Copy folder map from folder metioned in previous step to folder website_and_php_files of otclient_mapgen.

--- NEXT STEPS REQUIRE PHP INSTALLED IN SYSTEM ---

--- LINUX: FOR GENERATION TIME, SET FOLDER website_and_php_files RIGHTS TO 777 ---

11. Execute (in system terminal):

php 1_pre_tile_generator.php

12. Execute (command parameter is map 'floor'):

• You can execute these commands in any order.
• You can open few terminals and run few commands at once to generate it faster (use all CPU cores).

php 2_tile_generator.php 0
php 2_tile_generator.php 1
php 2_tile_generator.php 2
php 2_tile_generator.php 3
php 2_tile_generator.php 4
php 2_tile_generator.php 5
php 2_tile_generator.php 6
php 2_tile_generator.php 7
php 2_tile_generator.php 8
php 2_tile_generator.php 9
php 2_tile_generator.php 10
php 2_tile_generator.php 11
php 2_tile_generator.php 12
php 2_tile_generator.php 13
php 2_tile_generator.php 14
php 2_tile_generator.php 15
php 2_tile_generator.php 16

13. Execute:

php 3_pre_compress.php

14. Execute (command parameter is map 'floor'):

• You can set compression quality in file 4_compress.php (line: $quality = 80
• You can execute these commands in any order.
• You can open few terminals and run few commands at once to generate it faster (use all CPU cores).

php 4_compress.php 0
php 4_compress.php 1
php 4_compress.php 2
php 4_compress.php 3
php 4_compress.php 4
php 4_compress.php 5
php 4_compress.php 6
php 4_compress.php 7
php 4_compress.php 8
php 4_compress.php 9
php 4_compress.php 10
php 4_compress.php 11
php 4_compress.php 12
php 4_compress.php 13
php 4_compress.php 14
php 4_compress.php 15
php 4_compress.php 16

15. Move folder website_and_php_files/map_viewer to your webserver - it contains all images and website scripts to view them (Leaflet Map).

16. Configure map_viewer. Config is at start of map.js file:
- You can keep images on other webserver. Set imagesUrl to URL of this server like: 'http://myserver.com/map_images/'

imagesUrl: 'map/', // URL to folder with 'zoom levels' (folders with names 0-16)
imagesExtension: '.jpg',
mapName: 'RL MAP?',
startPosition: {x: 1000, y: 1000, z: 7},
startZoom: 14,
minZoom: 4,
maxZoom: 18, // maximum zoom with full quality is 16

Added item/outfit generator to sources (you can use binary file v3 to unpack outfits/items):
Feature - Unpack items/outfits from any client to PNG with OTClient!

and merged newest edubart/otclient (just to keep it up to date, there is no new features):
GitHub - gesior/otclient_mapgen: Open Tibia map images generator [good for Leaflets]. Loads .otbm file and generate .png images 256x256 px

Nice tutorial, everything works fine, until open the map view, black screen.

leaved as 'map/' , since is located where map.js, all folders 0-15 are empty with index.html, and folder 16 the full map part splitted.

Whats wrong ?

var mapConfig = {
    imagesUrl: 'map/', // URL to folder with 'zoom levels' (folders with names 0-16)
    imagesExtension: '.jpg',
    mapName: 'Real Map',
    startPosition: {x: 32222, y: 31555, z: 7},
    startZoom: 12,
    minZoom: 4,
    maxZoom: 16, // maximum zoom with full quality is 16

 

[Gesior.pl]

Nice tutorial, everything works fine, until open the map view, black screen.

Is your site online? Post URL to it.
or press F12 in webbrowser, go to Network tab and check from where it tries to load images and what can be wrong with these URLs.
Map start position is startPosition: {x: 32222, y: 31555, z: 7},, is your map on that positions? Maybe you have some evo map with start position around 1000,1000,7, so map works, you just try to view empty space on map.

 

[alejandro762]

Is your site online? Post URL to it.
or press F12 in webbrowser, go to Network tab and check from where it tries to load images and what can be wrong with these URLs.
Map start position is startPosition: {x: 32222, y: 31555, z: 7},, is your map on that positions? Maybe you have some evo map with start position around 1000,1000,7, so map works, you just try to view empty space on map.

Seems strange, but i just changed some css code and it works now.
Thanks for the help.