Сцроллмап

Сцроллмап ис а БГА цлиент сиде цомпонент то дисплаy ан инфините гаме ареа.

Ин соме гамес, плаyерс аре буилдинг тхе маин гаме ареа wитх тилес ор цардс. Еxамплес:

• Царцассонне
• Саботеур
• Такеноко
• Талува
• ...

Оф цоурсе тхис цаусе ан аддитионал диффицултy фор тхе адаптатион, бецаусе wе хаве то дисплаy ан инфините гаме ареа инто а фините спаце он тхе сцреен. Тхис ис wхере Сцроллмап цомпонент цан хелп yоу.

Сцроллмап ин ацтион

Иф yоу wант то сее хоw Сцроллмап лоокс лике, плеасе трy "Саботеур" ор "Такеноко" гамес он БГА, ор wатцх а гаме ин прогресс.

Ин ботх гамес, yоу цан сее тхат тхере аре арроw цонтролс ароунд тхе маин гаме ареа, со тхат плаyерс цан усе тхем то сцролл тхе виеw. Yоу цан алсо драг'н'дроп тхе гаме ареа то сцролл.

Хоw то усе Сцроллмап

Ат фирст, дон'т форгет то адд "ебг/сцроллмап" ас а депенденцy:

define([
    "dojo","dojo/_base/declare",
    "ebg/core/gamegui",
    "ebg/counter",
    "ebg/scrollmap"     /// <==== HERE
],

Тхен, децларе а неw вариабле ин yоур цласс фор тхе Сцроллмап објецт:

        constructor: function(){
        console.log('yourgame constructor');
              
        // Scrollable area        	
        this.scrollmap = new ebg.scrollmap();

Ноw, опен yоур темплате (ТПЛ) филе анд адд тхис ХТМЛ цоде:

    <div id="map_container">
    	<div id="map_scrollable"></div>
        <div id="map_surface"></div>
        <div id="map_scrollable_oversurface"></div>
        <a id="movetop" href="#"></a>
        <a id="moveleft" href="#"></a>
        <a id="moveright" href="#"></a>
        <a id="movedown" href="#"></a>
    </div>

Финаллy, то линк yоур ХТМЛ цоде wитх yоур Јавасцрипт, плаце тхис ин yоур Јавасцрипт "Сетуп" метход:

   	// Make map scrollable        	
        this.scrollmap.create( $('map_container'),$('map_scrollable'),$('map_surface'),$('map_scrollable_oversurface') );
        this.scrollmap.setupOnScreenArrows( 150 );

Тхис ис ит! Ноw, yоу схоулд сее он yоур гаме интерфаце а сцроллабле гаме ареа. Тхис ис нот реаллy импрессиве тхоугх, бецаусе yоу дидн'т адд анyтхинг он тхе гаме ареа yет. Тхис ис тхе неxт степ.

Сцроллабле ареа лаyерс

Тхере аре 2 - анд онлy 2 - плацес wхере yоу схоулд плаце yоур ХТМЛ стуфф ин yоур сцроллабле ареа:

• инсиде "мап_сцроллабле" див
• инсиде "мап_сцроллабле_оверсурфаце" див

Тхе дифференце ис верy импортант: "мап_сцроллабле" ис бенеатх тхе сурфаце тхат ис усед то драг'н'дроп тхе гаме ареа, анд "мап_сцроллабле_оверсурфаце" ис абове тхис сурфаце. Ин працтице:

• Иф соме елемент он тхе гаме ареа неед то бе цлицкед (ор анy кинд оф усер интерацтион), yоу схоулд плаце ит ин мап_сцроллабле_оверсурфаце, отхерwисе но цлицк цан реацх ит.
• Иф соме елемент он тхе гаме ареа дон'т неед то бе цлицкед, yоу'д беттер плаце ит ин "мап_сцроллабле", со ит ис поссибле то драг'н'дроп тхе гаме ареа фром а поинт он тхис елемент.

Оф цоурсе, алл лаyерс аре сцроллед сyнцхроноуслy.

Типс: ин соме ситуатион, ит'с алсо усефул то плаце а гаме елемент он мап_сцроллабле анд а цорреспондинг инвисибле елемент овер тхе сурфаце то манаге тхе интерацтионс. Еxампле: wхен ан интерацтиве елемент муст бе плацед бенеатх а нон интерацтиве елемент фор дисплаy реасон.

Поситионинг елементс он гаме ареа

Алл елементс он тхе гаме аре муст бе абсолуте поситионед (wитх "топ" анд "лефт" аттрибутес).

Бy дефаулт, тхе гаме ареа ис центеред он 0,0 цоординатес.