enchant.jsにて、2D縦スクロールアクションを作成しています。
マップを生成しながらキャラクターが縦に降りていくのですが、スクロールの引き戻し時にマップの描画がおかしくなります。
【やりたいこと】
^^^^^^^^^^^^^^手順1^^^^^^^^^^^^^^
---------画面内---------
map1
map2
---------画面内---------
map3
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
^^^^^^^^^手順2(画面スクロール^^^^^^^^^
map1
---------画面内---------
map2
map3
---------画面内---------
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
^^手順3(画面を引き戻して新しいマップを追加)^^^
---------画面内---------
map2
map3
---------画面内---------
map4
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
手順3の時に、一瞬以下のように表示されます。
^^手順3’(画面を引き戻して新しいマップを追加)^^^
map2
---------画面内---------
map3
map4
---------画面内---------
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
スクロール部分のコードは下記になります。
lang
1//グループを作成 2var stage = new Group(); 3 4//stageグループにマップとキャラを追加 5stage.addChild(stage01Map); 6stage.addChild(chara); 7 8//stageグループにイベントを追加 9stage.addEventListener(Event.ENTER_FRAME, function(e) { 10 11 //---スクロール処理(キャラを画面に固定して、マップのみ動かす) 12 if(stage.y != CANVAS_HEIGHT/3 - chara.y){ 13 stage.y = CANVAS_HEIGHT/3 - chara.y; 14 15 16 //---引き戻し処理(2画面分移動したとき) 17 if(chara.y >= BACK_AREA_HEIGHT * 2){ 18 19 //--マップ構成をスライド 20 tempStageArray[0] = tempStageArray[1]; 21 tempStageArray[1] = tempStageArray[2]; 22 23 //---新規マップを作成 24 tempStageArray[2] = Math.floor( Math.random() * (4 - 0 + 1) ) + 0; 25 26 27 //マップ用の配列を作成(stageArrayにはマップ用の配列が格納) 28 block = copyArrayFirst( stageArray[tempStageArray[0]], stageArray[tempStageArray[1]], stageArray[tempStageArray[2]]); 29 30 31 //マップ用のあたり判定を作成(stageColArrayにはマップのあたり判定用の配列が格納) 32 blockCol = copyArrayFirst( stageColArray[tempStageArray[0]], stageColArray[tempStageArray[1]], stageColArray[tempStageArray[2]]); 33 34 35 //マップを更新 36 stage01Map.loadData(block); 37 stage01Map.collisionData = blockCol; 38 39 //キャラを引き戻し 40 chara.y -= BACK_AREA_HEIGHT; 41 42 //ステージをキャラに合わせる 43 stage.y = CANVAS_HEIGHT/3 - chara.y; 44 } 45 } 46}
引き戻しやマップ更新の順番を変えてみたりしましたが、うまくいきません。
どなたか回答orアドバイスをお願いします。
あなたの回答
tips
プレビュー