Merge branch 'develop' of github.com:thecodingmachine/workadventure
@ -29,22 +29,28 @@ It is possible to define special regions on the map that can make the camera zoo
|
|||||||
<img class="document-img" src="images/camera/3_define_new_zone.png" alt="" />
|
<img class="document-img" src="images/camera/3_define_new_zone.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
4. Edit this new object and click on **Add Property**, like this:
|
4. Make sure your object is of type "zone"!
|
||||||
|
|
||||||
<div class="px-5 card rounded d-inline-block">
|
<div class="px-5 card rounded d-inline-block">
|
||||||
<img class="document-img" src="images/camera/4_click_add_property.png" alt="" />
|
<img class="document-img" src="images/camera/4_add_zone_type.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
5. Add a **bool** property of name *focusable*:
|
5. Edit this new object and click on **Add Property**, like this:
|
||||||
|
|
||||||
<div class="px-5 card rounded d-inline-block">
|
<div class="px-5 card rounded d-inline-block">
|
||||||
<img class="document-img" src="images/camera/5_add_focusable_prop.png" alt="" />
|
<img class="document-img" src="images/camera/5_click_add_property.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
6. Make sure it's checked! :)
|
6. Add a **bool** property of name *focusable*:
|
||||||
|
|
||||||
<div class="px-5 card rounded d-inline-block">
|
<div class="px-5 card rounded d-inline-block">
|
||||||
<img class="document-img" src="images/camera/6_make_sure_checked.png" alt="" />
|
<img class="document-img" src="images/camera/6_add_focusable_prop.png" alt="" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
7. Make sure it's checked! :)
|
||||||
|
|
||||||
|
<div class="px-5 card rounded d-inline-block">
|
||||||
|
<img class="document-img" src="images/camera/7_make_sure_checked.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
All should be set up now and your new **Focusable Zone** should be working fine!
|
All should be set up now and your new **Focusable Zone** should be working fine!
|
||||||
@ -56,19 +62,19 @@ If you want, you can add an additional property to control how much should the c
|
|||||||
1. Like before, click on **Add Property**
|
1. Like before, click on **Add Property**
|
||||||
|
|
||||||
<div class="px-5 card rounded d-inline-block">
|
<div class="px-5 card rounded d-inline-block">
|
||||||
<img class="document-img" src="images/camera/4_click_add_property.png" alt="" />
|
<img class="document-img" src="images/camera/5_click_add_property.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
2. Add a **float** property of name *zoom_margin*:
|
2. Add a **float** property of name *zoom_margin*:
|
||||||
|
|
||||||
<div class="px-5 card rounded d-inline-block">
|
<div class="px-5 card rounded d-inline-block">
|
||||||
<img class="document-img" src="images/camera/7_add_zoom_margin.png" alt="" />
|
<img class="document-img" src="images/camera/8_add_zoom_margin.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
2. Define how much (in percentage value) should the zoom be decreased:
|
2. Define how much (in percentage value) should the zoom be decreased:
|
||||||
|
|
||||||
<div class="px-5 card rounded d-inline-block">
|
<div class="px-5 card rounded d-inline-block">
|
||||||
<img class="document-img" src="images/camera/8_optional_zoom_margin_defined.png" alt="" />
|
<img class="document-img" src="images/camera/9_optional_zoom_margin_defined.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
For example, if you define your zone as a 300x200 rectangle, setting this property to 0.5 *(50%)* means the camera will try to fit within the viewport the entire zone + margin of 50% of its dimensions, so 450x300.
|
For example, if you define your zone as a 300x200 rectangle, setting this property to 0.5 *(50%)* means the camera will try to fit within the viewport the entire zone + margin of 50% of its dimensions, so 450x300.
|
||||||
|
BIN
docs/maps/images/camera/4_add_zone_type.png
Normal file
After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
@ -60,7 +60,7 @@ WA.chat.sendChatMessage('Hello world', 'Mr Robot');
|
|||||||
|
|
||||||
The `WA` objects contains a number of useful methods enabling you to interact with the WorkAdventure game. For instance, `WA.chat.sendChatMessage` opens the chat and adds a message in it.
|
The `WA` objects contains a number of useful methods enabling you to interact with the WorkAdventure game. For instance, `WA.chat.sendChatMessage` opens the chat and adds a message in it.
|
||||||
|
|
||||||
In your browser console, when you open the map, the chat message should be displayed right away.
|
The message should be displayed in the chat history as soon as you enter the room.
|
||||||
|
|
||||||
## Adding a script in an iFrame
|
## Adding a script in an iFrame
|
||||||
|
|
||||||
|