高さ 5000 ピクセルの画像がフレーム更新ごとに 5 ピクセルずつ上に移動するシーンが必要です。画像がすべてアップしたら、画像の上部と画像の下部を接続して表示したいと思います。これは、レベルが「完了」するまで行う必要があります。そのような画像を「ループ」するにはどうすればよいですか?
2 に答える
Flash は 16,769,025ピクセル (または 4095x4095)を超える画像をロードできないことに注意してください。5000 ピクセルの高さは、幅が 3353 を超えない限り機能します。
つまり、イメージの 2 つのコピーをステージ上に保持してイメージをループし、両方を親オブジェクトで同時に移動し、ループ ポイントに到達したら原点にリセットします。
次のステージ設定を検討してください。
Stage ¬
0: MainTimeline:MovieClip ¬
0: Container:MovieClip ¬
0: img1:Bitmap
1: img2:Bitmap
コンテナを上に移動すると、ループする 2 番目の画像が最初の画像の原点に到達することを確認するだけで済みます。
function onEnterFrame(e:Event):void {
Container.y = Container.y - 5;
if (Container.y < -5000) {
Container.y = -5;
}
}
その画像のコピーを作成して、隠したり上に置いたりすることができます。トリックは、位置を更新し、それに応じてループすることです。これにより、1 つの画像が画面の下に移動すると、上に戻って繰り返されます。
以下は、DisplayObject クラスと scrollRect プロパティを使用したアイデアを説明するための基本的なスニペットです。
//ignore this, you have your content already
var dummyContent:BitmapData = new BitmapData(100,100,false);
dummyContent.perlinNoise(10,10,8,12,true,true);
//important stuff starts here
var container:Sprite = addChild(new Sprite()) as Sprite;//make a container
container.scrollRect = new Rectangle(0,0,dummyContent.width,dummyContent.height);//set a scrollRect/'mask'
var part1:DisplayObject = container.addChild(new Bitmap(dummyContent));//add two copies
var part2:DisplayObject = container.addChild(new Bitmap(dummyContent));//of the same content
part2.y -= part2.height;//set the 2nd at the top of the 1st
addEventListener(Event.ENTER_FRAME,update);
function update(e:Event):void{
//move both
part1.y += 5;
part2.y += 5;
//check if any reach the bottom so they can be moved back up
if(part1.y >= part1.height) part1.y = -part1.height;
if(part2.y >= part2.height) part2.y = -part2.height;
//the above can also be nicely placed in a loop if you plan on using more seamless looping clips/images
}
当然、内容は異なりますが、原則は同じです。
画像を扱う場合は、BitmapData の copyPixels メソッドを使用するだけです。
var s:int = 5;//scroll speed
//make some content
var w:int = 100;
var h:int = 100;
var dummyContent:BitmapData = new BitmapData(w,h,false);
dummyContent.perlinNoise(10,10,8,12,true,true);
//prepare for stiching
var renderPos:Point = new Point();//position to render the current image to
var prenderPos:Point = new Point();//position to render the previous image (the 'hidden' copy above)
var render:BitmapData = new BitmapData(w,h,false);//create a bitmap data instance to render updated pixels int
addChild(new Bitmap(render));//and add it to the stage
addEventListener(Event.ENTER_FRAME,update);
function update(e:Event):void{
renderPos.y = (renderPos.y+s)%h;//update the scroll position for the 1st part, % is used to loop back to 0 when the position gets to the content height
prenderPos.y = renderPos.y - h;//update the scroll position for the 2nd part (above)
render.lock();//freeze pixel updates
render.copyPixels(dummyContent,dummyContent.rect,renderPos);//copy pixels from the scroll position to the bottom
render.copyPixels(dummyContent,dummyContent.rect,prenderPos);//copy pixels from the top to the scroll position
render.unlock();//unfreeze/update ALL THE PIXELS
}
高さ (height-scrollPosition) を変更する Rectangle オブジェクトを使用して、毎回アクセスするピクセル数を減らすか、BitmapData の getVector メソッドを使用して単一の for ループを手動で実行することもできますが、パフォーマンスが実際に問題になる場合は、これを調べる必要があります。このような単純なタスクの場合、何が高速かを確認する価値があります(完全なビットマップ四角形をコピーする vs 部分ビットマップ四角形をコピーする vs ベクターを使用して手動で値をコピーする )