[AS3] 處理 重繪區域比顯示區域大的一些方法 II

基本上是上一篇的延續 !

應該有很多人都做過 閃電 的那種動畫!

假設 閃電的動畫的內容是不一樣的 但是閃電的動作是一樣的 ?

如何動態的操作 可以避免掉一些顯示的問題!

如下圖  :

如果像圖這樣 會出現 使一開始要出現的圖樣 是第一格的圖樣 !

我想解法很多種~

我以前會把 第一格空下來

然後聽 add 事件 有就直接換 影格

這樣可以避免一開始瞬間的錯誤

假設 這個使用上一篇  處理 重繪區域比顯示區域大 的方法

以這個案例來說 使用上一篇的方法 會使效能變差 和 消耗的記憶體增加

基本上是一點用都沒有 !

我純粹只是想測這種方法的能不能解這個問題 !

下面是 這個的範例 CODE 和 各種 計時器 間 會出現的差異 !

範例如下!
警告 這個範例會不斷閃爍
如果有某些疾病的人請不要打開...
DEMO

===============================================================
題外話

其實 我的計時器  和 上一篇的 繪圖的這種

嚴格講 應該分成兩種體系

一種是 static 的

一種是 CODE 這種的

一個程式中 會需要到兩種嗎 ?

本來我用靜態版的弄了範例~~

結果我沒辦法同時做出 四種 都同時的擺在一起

所以最後又改成現在的這種版本....

也許某些情況會需要 使用到兩種不同的計時器

不過是否真的需要全局統一 ?

還有本來看到最近新出的 worker

最一開始想把它當成 另外一種計時器 去跑的~

或者 能把它整合進 計時器 中!

只要 開某種計時器 那把這個記時器相關的運算都由某個 worker 去執行

或者說 把整個系列的運算獨立出來 總之這邊還在嘗試~

感覺上不是沒希望! 不過 我可能要把整個 計時器 都大改寫

利用事件的方式 似乎是不可能的~~

[AS3] 處理 重繪區域比顯示區域大的一些方法

我想有處理過一些閃光字的人一定會發現這個問題

就是閃光字明明很小
但是他的重繪範圍比較大
想看這個比較好的效果的可以到 閃光字 這看
如果有 DEBUG版的 player 的話可以開啟 重繪範圍看看

我來介紹一下我知道解決這個問題的幾個方法!

1.
從結構面去解決
只要有作移動補間動畫是在 遮罩的圖層上的
不是被遮圖層上 如下圖

那最簡單的解法
就是 把整個遮罩物件(遮罩 和 被遮的物件 一整組設成 快取點陣圖)
如下圖

那這樣他的補間動畫就會是

不過有得時候
因為某些複雜的表現
沒辦法把 補間動畫作在 遮罩區
那下一種程式面的方法就可以解決

2.
使用 mc.scrollRect 屬性
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#scrollRect

不過在我的測試下 好像是沒用的....

也許這個也有一些 我不知道的限制....
但是在另外的測試 下是有用的
效果會和你 限制的區域一樣大!
不過這邊我沒去深究! 就把它當成是一種解法

我有測到一個限制~
就是這個物件 要設 快取成點陣圖 後才有用
以我這個範例來說 也是設了就有用了
沒設 就會和這個圖一樣

不過可能 還有一些其他的因素 例如 player 的版本 等等的
總之...我覺得第三個方法 我比較喜歡 所以我也沒深究了

3.
最後這個是一個簡單的想法
利用 顯示物件沒有貼在場景上
但是依然存在 而且可以被繪圖這一點!
然後 重繪的區域就會是你繪圖的區域

下面是這個簡單的想法的 CODE
有興趣的可以看一下

package
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.geom.Rectangle;
 
    import ui.logo;
 
    public class MovieClipToBitmapDemo extends Sprite
    {
     
        private var _mc:MovieClip;
        private var _bmd:BitmapData;
        private var _bm:Bitmap;
        private var _rect:Rectangle;
     
        public function MovieClipToBitmapDemo()
        {
            _mc = new logo();
            this.addEventListener(Event.ENTER_FRAME, onEnterFrameFun);
            _rect = new Rectangle(0,0,109,78);
            _bmd = new BitmapData(109, 78, true, 0);
            _bm = new Bitmap();
            _bm.smoothing = true;
         
            this.addChild(_bm);
            draw();
        }
     
        private function onEnterFrameFun(e:Event):void
        {
            draw();
        }
     
        private function draw():void
        {
            _bmd.fillRect(_rect, 0);
            _bmd.draw(_mc,null,null,null,_rect,true);
            _bm.bitmapData = _bmd;
        }
    }
}


希望可以幫到一些人
然後再補充一點
就是如果這個被重繪的圖
裡面有很複雜
而且 有多重的濾鏡 遮罩 互相影響!
那重繪這個動作
可以幫你節省一些效能
但是 記憶體就會略多了 !

[AS3][迷宮]簡單的迷宮建立 2

這篇是上一篇的延續~~
上一篇是產生 迷宮的路徑!
這一篇是 迷宮的貼圖

基本的想法是~
把 迷宮的生成 和 貼圖 的部分切開!
這樣以後要換
貼圖得方式 (像下面的講的 兩種圖源)
作法 (連在一起的路是否貼成房間? 房間是 否有出入口?　是否是 1:1 的貼圖方式？ )
產生的大小~(一次貼出整個 迷宮大小？　還是按照指定的座標只貼周圍大小)
等等
都比較方便!

先來講解一下!
貼圖的基本
一個基本的  平面迷宮!
以路來看一格內 牆的形狀 只有 16種!
如下圖

最下面的是 一般 RPG 製作大師的素材圖!

基本上包含了 5~12 還有 0 15

但是缺了 1 2 3 4 和 13 14這幾種類型!

因為我和 RPG 製作大師的 貼圖方式不同~

所以我不會用到 四點的那種圖(一組圖的最右上　不過有時要貼柱子時 好像還是會用到...)

但是要變成我可以使用的圖要經過處理
處理的方式有好幾種!
最簡單的方法利用處理圖的方式 去做一張專用的!
不過這個方式太麻煩(對我來說)

因為我的用法是使用 bitmapdata 的資料去貼!
基本上 5~12 還有 0 15 可以簡單的按照圖的大小就抓到資料
可以利用這些資料去產生缺少的那部分
以1 的做法就 5 的一半　貼　 8的一半
13 是 9 一半 貼 11的一半
其他的也都是類似的作法 一半貼一半!
(不過以上都是 來源圖的處理方式)

然後基本的 0~15 十六種的圖就齊了
才進我的貼圖程式!

基本上我上一篇生出的 迷宮結果
會有下面這一些的資訊

(x=0, y=0),(x=1, y=0),(x=1, y=1),(x=0, y=1),(x=0, y=2),(x=1, y=2),(x=2, y=2),(x=2, y=3),(x=2, y=4),(x=1, y=4),(x=1, y=3),(x=0, y=3),(x=0, y=4),(x=0, y=5),(x=1, y=5),(x=2, y=5),(x=3, y=5),(x=3, y=4),(x=4, y=4),(x=5, y=4),(x=5, y=3),(x=6, y=3),(x=7, y=3),(x=7, y=2),(x=6, y=2),(x=5, y=2),(x=5, y=1),(x=5, y=0),(x=4, y=0),(x=3, y=0),(x=3, y=1),(x=2, y=1)

(x=3, y=2),(x=4, y=2),(x=4, y=1)

(x=1, y=6),(x=1, y=7),(x=2, y=7),(x=2, y=6),(x=3, y=6),(x=4, y=6),(x=5, y=6),(x=5, y=5),(x=6, y=5),(x=6, y=6),(x=7, y=6),(x=7, y=7),(x=6, y=7),(x=5, y=7),(x=4, y=7),(x=3, y=7)

(x=2, y=0)

(x=6, y=1),(x=6, y=0),(x=7, y=0),(x=7, y=1)

(x=4, y=5)

(x=3, y=3),(x=4, y=3)

(x=0, y=6),(x=0, y=7)

(x=6, y=4),(x=7, y=4),(x=7, y=5)

一共 9條路
我的 way 的矩陣 第 1 組是 通路! 也就是從起點到 終點的路!
簡單的講就是 way[0][0] 是起點!
way[0][way[0].length-1] 這一點就是終點!


這張圖是處理這個的結果圖

因為只有這樣的資訊! 
事實上是無法一次就貼出地圖的!
必須再貼圖的時候再掃一次全部的路
因為在迷宮生成的時候做 
也沒辦法免除這一次的掃描!
所以我就合併在這邊做 
讓生成迷宮時要處理的事簡化 (結果這一篇就超複雜 orz)


講一下這邊的邏輯
首先把路的矩陣拿出來!
如果有上一點 
        把現在這一點和上一點連接的牆打掉.
如果沒有上一點! 
        找上一條路 和這個 點連接的 牆 打掉
            如果沒有上一條路
            找附近接鄰的點 把牆打掉
按照這個邏輯 就可以把全部的路 都用 0 ~ 15 的地圖資訊 都生出來~~

下面是按照上面例子的第一條路的一小段作的圖

1.
一開始的 0,0 因為沒有上一條路 也沒附近接鄰的點
所以 就會記成 0

2.
第二個點 (1,0) ,按規則 上一個點 (0,0) 所以打開兩個點中的牆
第一個點(0,0)記作 2
第二個點(1,0)記作 4

3.
第三個點 (1,1), 上一個點 (1,0) 所以打開中間的圖

第二個點(1,0)記作 7 
第三個點(1,1)記作 1

4.
第四個點 (0,1) 上一個點 (1,1) 所以在打開中間的牆

第三個點(1,1)記作 8 
第四個點(0,1)記作 2

5.
因為這邊太繁瑣~所以我就一次把這條路作完!

6.
下一條路!
(x=3, y=2) 因為沒有上一點!
所以上一條路! 找到點 (2,2), (3,1)
恩 就看各人寫法 是先找到先用! 還是隨機選一點!
我是隨機選一點 看他生成的圖 來解釋 是使用 (2,2) 這一個!
所以
把 (2,2) 記作 10
把 (3,2) 記作   4

好了比較有代表性的部分 作完 剩下的就是依照一樣的方法~
就會生出貼圖所需的資訊了

圖如下

把全部的路 作完!
那就可以按照順序去貼圖了!!
然後我來講一下! 其實上面都是 我以前的做法!
這次重寫的時候 覺得這樣不確定性 太高!!
還要多花一次工 去掃上一條路!
所以打算修改
最先就是直接 拉到生成迷宮的裡面
因為有一些路 會改變 所以不能直接放在生成!!
不然交互影響後 在改變會有問題
簡單的講就是 生的時候 就把牆打掉
但是我卻沒辦法補回來
不然就是在放棄時 要多一堆迴圈去補回來
這段我沒實作 因為光想就覺得麻煩

必須要路生出來之後 確定後 再做上這一段!
所以拉進去 的效率 和 在這邊的效率
或是說迴圈的次數 其實是一樣的!
並不如我所想可以少好幾圈 ( 這應該就是當初會把這段放這邊的原因)

後來就又改回原來的方式! 也就是上面講的
不過 我後來有一個以記憶體換的方式~
就是 路第一個點 是上一條路的進入點!

以上面的例子來說! 第二條路的矩陣會變成下面這樣
(x=2,y=2),(x=3, y=2),(x=4, y=2),(x=4, y=1)
這樣
就不會有 沒有上一點的情況!
但是 記的從 第二個點 開始!
因為第一個點是上一條路的點
光這一點 就可以省下 一次迴圈 好幾次判斷!

上一篇有講到可以把路貼成房間!
因為房間的部份我也是在上面那一段作掉
但是這段的CODE 可能被我不小心當成註解拿掉了

先定義一下房間
就是 除了出口 或 入口外
都是 中間是可以通行 沒有牆的路
從現在的點往前找 連續點


所以U 字型 中間的 點是不可能被當成房間的!
如圖

2, 3 , 6, 7
1, 2,  7, 8
1,2,3,6,7,8
這三個組合是不可能是 房間!
因為點沒有連在一起!

如果可以組成 設定大小的房間的話
就檢查 附近是否有 路的開頭(檢查所有路的第一格)
如果沒有就設定成房間!
因為這個做法~不確定性太高
所以有了下面這一段

在最一開始生成路之前!
先產生對應得房間
這樣在生成主要道路的時候
還會自己避過房間
然後利用上一篇 連接兩點的函式
把有開口的房間 (房間 出口或入口)
和路的隨機一格連接起來
最後要把房間的格子補進去

講一下這邊的重點!
最後才補房間這點 
因為房間不在路上!!
所以他不會被當成 生出路的點!
因為我的方式都是從路生路
所以房間的附近都不會是路的開頭
但是 在 地圖上 這些點 都不是 牆 所以會被避開!
又因為是一起補 所以都是連在一起!
剛好符合之前的定義 ! (其實是精心策畫的剛好 orz)

貼房間地形的圖這部分~
其實方法很笨
但也是為了讓人自己設計的房間可以完整的貼上去~
所以這部分 讓人可以自己設定 貼圖的編號 事件等等
不過這邊的貼圖也是 符合 0 ~ 15 的那個規則
是形狀要符合 0~15的規則 但是裡面的花樣可以不同

總結一下
這一篇產生的是貼圖的二維矩陣!
基本上 路的部分都是 0~15 這 16種
混進房間後 因為房間的特殊貼圖 才有 16以上的數字
還會有一個矩陣是放 單格事件
等這個矩陣進來之後
整合 控制
整合 事件的處理
才會是 真正可以玩的地圖

所以總共會有
1. 上一篇的 路的矩陣
2. 這一篇產生的 貼圖的矩陣 (沒有房間的話是從 0~15 有的話會有 16以上的號碼)
3. 還有一個是 對應位置 的 事件矩陣 (理論上是三維 因為一格 可以發生的事件也是 一個矩陣)

好像還有一段我忘了講 就 不是 1:1 貼圖的這段
主要是作再傳入的貼圖矩陣這邊
以  1 號 U 字型的這種
當然可以以一格 用 一半貼一半的方式去處理掉
但是也可以是
0, 15, 0
0, 15, 0
0,   0, 0
這樣 九格 貼成一格的方式!


然後這一篇理論上會有三種
輸出的畫面


第一種
就是一次生成全部的地圖
像上一篇的 DEMO 一樣
大部分的用途都是用來生成小地圖

第二種
就是經過一點優化
只生成所在點周圍固定格數的地圖!

第三種
我自己是在
http://wonderfl.net/c/dxgc
http://wonderfl.net/c/lpY3
這裡看到這種!  超炫
所以第三種的部分 我應該是在學習這種版本
不過還沒有完成
但是CODE混進上面的那段中了

然後在這次看CODE中我又改了幾個地方
本來我以為我把 房間的部分完全從 上面那段拆掉了
所以把本來註解掉的房間那段全刪了
後來這篇寫到一半才發現原來沒有

原來註解掉的部分只是為了簡單化問題
好處理第三種狀況 不過發現的時候已經太晚了

然後這次寫BLOG一邊寫
又一邊優化一些地方
簡單的講 不管是 哪一種輸出的方式
都會有 兩個二維矩陣 和 整個地圖是一樣大
還會有一個和地圖一樣大的二維矩陣 是放該位置 會發生的 事件矩陣
因為一個位置 可能會有多種事件

這次我把整個貼事件的部分 大改(順便在一次回憶一下 順便為下一篇作準備)
不再是 查詢和地圖一樣大的二維矩陣
而是拿出 從貼圖矩陣中 對應圖形的 事件矩陣
記錄發生和改變 ! 這樣維護的矩陣會小很多

其實只要像上一篇一樣 拆出來重做一次~
就可以 DEMO了 不過這部分 好像越改離我越遠
又有一些我覺得很有趣 的東東
這篇想結束 結束不了 我也覺得很糟糕....
總之先這樣結束 orz

CODE的部分 我改好再貼上來

[AS3][Box2D] 一個簡單的範例

這是一個很有趣的遊戲!


有趣的BOX2D的遊戲!


以後再來專篇介紹他~
下面是一個類似功能的一些簡單範例

簡單的範例

基本的操作 就是上下左右 四個方向鍵
上是加速
下是減速
前後 是轉角度


每台車有自己的速度上限 轉角度的速度 加速的速度 等等 的個別屬性
都有自己的 AI 轉向 讓自己不倒地的部分 加速的邏輯


下方的曲面地圖會隨機的 產生

右上方會有一個簡單的 小地圖
還可以看到其他車 目前所在的位置~~


不過真正的遊戲要判斷 四腳朝天 就會結束
到終點也會結束
但這個範例沒弄...

話說 BLOG 是不是這樣寫比較簡單.