as3 BitmapData Pixelverschiebung und wieder auffüllen

[mediarocker]

hallo zusammen...

ich hab ein kleines problem und wollte fragen, ob mir da jemand helfen kann.

zur besseren erklärung ist ein bild dabei.

ich habe eine bühne 1280*720 und darüber soll ein endlos bitmap laufen. normal könnte man das ja mit drei bitmapdatas machen, die, wenn sie links nicht mehr zu sehen sind, sich einfach rechts wieder anhängen und so weiter,..aber es sollte nur ein bitmapData sein, somit würde ich es gern so machen,...

das bitmap ist link und rechts etwas grösser als die bühne.

bei jedem frame solln sich die pixel um 1 pixel nach links schieben (würde dann so aussehen als hätte man das bitmap mit der x position um eins nach links geschoben)

die ganz linke reihe an pixel soll dann aber verschwinden (die, die von x=0 auf x=-1) geschoben wurden und rechts soll sich eine neue reihe mit transparenten pixeln bilden.

sowas ist bestimmt möglich und ich wär euch total dankbar, wenn mir da einer helfen könnte,...

hier zur erklärung ein bild

[Martin Kraft]

Schau Dir mal die Funktion BitmapData.scroll(x, y) an.

[mediarocker]

hallo martin,..

vielen dank,..werd ich mir gleich mal durchlesen, ob das in meinen fall helfen kann.

[mediarocker]

es geht schonmal in die richtige richtung und wär mit

bitmapData.scroll(-1,0) auch absolut zu gebrauchen,..jedoch ist das zu langsam,..und wenn ich (-10,0) verwende, dann wär es die richtige geschwindigkeit, jedoch zerhackt es mir dann das bild,..

auf das bitmap data wird mit der maus dynamisch draufgemalt.


wenn ich das bitmapData einfach bei jeden frame mit x-=10; verschiebe, dann würde das wunderbar passen,..eigentlich genau das nur, dass das bitmapData nicht ausgehen darf,..puh...

[milchreis]

framerate erhöhen
oder
zehn mal um 1 scrollen, zwischendurch Mausinteraktion durchführen

[mediarocker]

10 mal scroll durchführen wäre die lösung, also immerwieder um nur einen pixel..aber wie scripte ich die mausinteraktion dazwischen? er müsste quasi in einer funktion 10 mal um -1 schieben und dazwischen aber jedesmal die änderung des bitmaps durch die maus checken

danke

[milchreis]

Zitat von mediarocker

10 mal scroll durchführen wäre die lösung, also immerwieder um nur einen pixel..aber wie scripte ich die mausinteraktion dazwischen?
danke

Wie fragst du denn die Maus bisher ab?

[mediarocker]

also es gibt ne klasse, diese extended die Bitmap, in in der wird mit draw je nach x und y der maus auf ein bitmap gezeichnet. das Bitmap ist 1280 breit.

dann verwende ich zwei instanzen der klasse in einer anderen, um sie immer nacheinander durch die bühne fahren zu lassen...wenn das eine ganz draussen ist, löscht es ihren inhalt und hängt sich wieder am ende des zweiten an unsw,...das würde auch super funktionieren, jedoch an den kanten an dem die zwei Bitmaps zusammengefügt sind, entsteht mir beim zeichnen immer ein bruch, da der strich den ich programmiert habe von so vielen parametern mausgeschwindigkeit, xpos, ypos, etc abhängig ist,..also am besten wäre es, wenn der strich nicht von einem bitmap ins andere wandern müsste...

ich hab gerade versucht -1 zu scrollen, dann die draw methode auf zu rufen und wieder zu scrollen usw,..das zerhackt den strich aber auch,.

[Martin Kraft]

Das 10mal wiederholen würde ich allein aus Performancegründen sein lassen.

Das Zerkackte kommt doch eigentlich nur daher, dass der Randbereich immer wieder dupliziert wird?! Und das kann man verhindern indem man das verschobene Stück einfach wieder mit der Hintergrundfarbe füllt:

PHP-Code:

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.Event;
    
const BMP_COLOR:uint = 0xFFFFFFFF;
const LINE_COLOR:uint = 0xFF000000;
var bmpSpeed:int = -10;

var bmpData:BitmapData = new BitmapData(1280, 720, true, BMP_COLOR);
var bmp:Bitmap = new Bitmap(bmpData);

addChild( bmp );
addEventListener(Event.ENTER_FRAME, moveBmp);

function moveBmp(event:Event):void {
    bmpData.setPixel32(mouseX, mouseY, LINE_COLOR);
    
    bmpData.scroll(bmpSpeed, 0);
    bmpData.fillRect(
        new Rectangle(
            (bmpSpeed < 0)?
                bmpData.width + bmpSpeed :
                0,
            0,
            Math.abs(bmpSpeed),
            bmpData.height
        ), 
        BMP_COLOR
    );
} 


[milchreis]

Zitat von Martin Kraft

Das Zerkackte kommt doch eigentlich nur daher, dass der Randbereich immer wieder dupliziert wird?!

Ach darum geht es?
Ich hatte "zerhackt" so interpretiert, das damit die Zeichendichte gemeint ist.
(Vergleich im Anhang)

Jetzt gibt es auch plötzlich wieder 2 bitmaps
Ich bin etwas verwirrt, was nun eigentlich wie passieren soll.

[mediarocker]

vielen vielen dank für das script,..das ist es leider nur fast,...

setPixel benützt du ja hier um eine line zu zeichnen,..aber die line wird ja schon gezeichnet,..besser gesagt,..das passiert schon alles,..mit jeden frame aktualisiert sich das BitmapData also, wenn der user die line weiterzeichnet...

kurz gesagt,..ich hab ein bitmap, dass nie gleich ist, weil auf diesen transparenten ding draufgezeichnet wird...

[mediarocker]

hier mal das was ich mit zerhackt meine,. speed ist nach deinem script jetzt 10,...die pixel32 sind auskommentiert.

http://www.mediarocker.de/demo/

[mediarocker]

mit deinem zehnMalEins.swf wären wir glaub ich verdammt nah dran,. könntest du von dem swf mal den code posten,..das würde mir super helfen

[Martin Kraft]

Zitat von mediarocker

hier mal das was ich mit zerhackt meine,.

Das sieht doch schon ganz schick aus

Das Zerhackte entsteht IMHO nicht direkt durch die Verschiebung des BitmapDatas, sondern dadurch, dass Du diese nicht beim Zeichen Deiner Linie(n) einberechnest.

Du wirst ja irgendwie den/die letzten Vektorpunkt(e) zwischenspeichern, um daraus die Linie zu rekonstruieren. Wenn Du nun das BitmapData mit den vorherigen Liniensegmenten drauf verschiebst, musst Du natürlich auch diese Punkte um denselben Betrag verschieben, da ja sonst die Anschlüsse nicht mehr stimmen.

[milchreis]

Zitat von mediarocker

mit deinem zehnMalEins.swf wären wir glaub ich verdammt nah dran,. könntest du von dem swf mal den code posten,..das würde mir super helfen

nu klar:

PHP-Code:

package 
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Rectangle;
    
    /**
     * ...windig heute
     * 
     * @author milchreis
     */
    public class Main extends Sprite 
    {
        private var b:BitmapData;
        private var brush:Sprite;
        private var isDrawing:Boolean;
        
        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point
            
            b = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0);
            addChild(new Bitmap(b));
            
            brush = new Sprite();
            brush.graphics.beginFill(Math.random() * 0xffffff);
            brush.graphics.drawCircle(0, 0, 10);
            brush.graphics.endFill();
            
            brush.startDrag(true);
            addChild(brush);
            
            isDrawing = false;
            
            stage.addEventListener(MouseEvent.MOUSE_DOWN, toggleDraw);
            stage.addEventListener(MouseEvent.MOUSE_UP, toggleDraw);
            
            addEventListener(Event.ENTER_FRAME, loop);
        }
        
        private function loop(e:Event):void 
        {
            for (var i:int = 0; i < 10; i++)
            {
                if (isDrawing) paint();
                scroll();
            }
        }
        
        private function toggleDraw(e:MouseEvent):void 
        {
            isDrawing = !isDrawing;
        }
        
        private function scroll():void
        {
            
            b.scroll(-1, 0);
            b.fillRect(new Rectangle(b.width - 1, 0, 1, b.height),0);
        }
        
        private function paint():void
        {
            b.draw(brush, brush.transform.matrix);
        }
        
    }
    
} 


Es ist aber eben auch nicht zusammenhängend, da es nur die Punkte zeichnet.

Zitat von mediarocker

hier mal das was ich mit zerhackt meine,. speed ist nach deinem script jetzt 10,...die pixel32 sind auskommentiert.

http://www.mediarocker.de/demo/

Zitat von Martin Kraft

Das sieht doch schon ganz schick aus

Das Zerhackte entsteht IMHO nicht direkt durch die Verschiebung des BitmapDatas, sondern dadurch, dass Du diese nicht beim Zeichen Deiner Linie(n) einberechnest.

Finde den Effekt ehrlich gesagt recht schnucklig.
Wenn mich jemand vor diesem thread gefragt hätte wie man einen solchen Effekt erzeugt (also mit diesen Unterbrechungen) hätte ich vermutlich sonst was kompliziertes programmiert.

Ich denke der Martin hat recht mit der fehlenden Verschiebung des ersten Punktes.