android 遊戲之情境的實現以及拓展應用照片瀏覽器

        有些天沒有寫部落格了，最近一直在為遊戲打基礎，主要因為之前是做應用，對遊戲還不夠瞭解.（這裡瞎扯一點，我之所以轉遊戲，一方面：因為應用比較簡單，開發人員跳級性的增長，加上HTML5的流行，如果HTML5移動上面完全鋪開的話，後面可想而知...第二嘛:掙錢多，這也是我要轉行的最主要的因素,敢問當今，這年代沒錢能做什麼！！！扯淡話不多說了，總之程式這條路是為我集資.吃苦受累都是浮雲.錢才是王道.）
  

         下面我們說下有遊戲，當我們過關卡的時候遊戲中或許出現情境切換，這對做遊戲開發的同學們在熟悉不過了，這裡我簡單介紹下，一來自己鞏固下學習的知識，二來把我學習的心得分享出來，以便大家共同進步.

  實現原理：首先我們對螢幕進行clipRect擷取相應的矩形模組.然後在用圖片進行填充.

 矩形（橫向）交差情境實現：

/*** * 矩形情境(橫向) */public void doRect_H() {/** 交錯的實現矩形相交 **/int ractHeight = (mScreenHeight / ractCount);// 擷取每個矩形寬度.// 左邊開始(偶數0,2,4...)for (int i = 0; i < ractCount; i += 2) {drawFillRect(mCanvas, Color.BLACK, 0, i * ractHeight, rectStep,ractHeight);}// 右邊開始（奇數1,3,5...）for (int i = 1; i < ractCount; i += 2) {drawFillRect(mCanvas, Color.BLACK, mScreenWidth - rectStep, i* ractHeight, rectStep, ractHeight);}}

我簡單講解下流程:針對螢幕我們分割成10條矩形，然後我們在對這10條矩形進行一一填充.而填充的就是下一個的情境.矩形（縱向）交差情境同理.

這裡要說明一點，你要理解canvas的save和restore方法.

          save：用來儲存Canvas的狀態。save之後，可以調用Canvas的平移、放縮、旋轉、錯切、裁剪等操作。 

          restore：用來恢複Canvas之前儲存的狀態。防止save後對Canvas執行的操作對後續的繪製有影響。

          save和restore要配對使用(restore可以比save少，但不能多)，如果restore調用次數比save多，會引發Error。save和restore之間，往往夾雜的是對Canvas的特殊操作。

百葉窗情境實現：

/*** * 百葉窗情境 */public void doSQUARE() {/** 百葉窗效果利用雙for迴圈 修改每個矩形繪製的寬度 **/for (int i = 0; i <= (mScreenWidth / squareRange); i++) {// 算取寬包含多少個正方形，for (int j = 0; j <= (mScreenHeight / squareRange); j++) {// 算去高包含多少正方形.drawFillRect(mCanvas, Color.BLACK, i * squareRange, j* squareRange, rectStep, rectStep);}}}

簡單說明：根據View的寬高分割成若干個正方形然後一一進行填充.

滾動(向右)水紋情境:

/*** * 滾動水紋情境(右移動) */public void doSHADOW_RINGHT() {/*** * 在這裡我們要算去各個矩形的寬度以及起始的X座標 *  * 注意要理解其含義. */int X1 = rectStep + rectX1;// 矩形1的x座標int rectWidth1 = rectW + 12;// 矩形1的寬度int X2 = X1 + rectWidth1 + rectX2;int rectWidth2 = rectW + 5;int X3 = X2 + rectWidth2 + rectX3;int rectWidth3 = rectW;/** 水紋效果其實繪製了4個矩形 中間留一些縫隙 **/drawFillRect(mCanvas, Color.BLACK, 0, 0, rectStep, mScreenHeight);drawFillRect(mCanvas, Color.BLACK, X1, 0, rectWidth1, mScreenHeight);drawFillRect(mCanvas, Color.BLACK, X2, 0, rectWidth2, mScreenHeight);// 繪製第二條矩形drawFillRect(mCanvas, Color.BLACK, X3, 0, rectWidth3, mScreenHeight);// 繪製第三條矩形}

簡單說明：首先我們將螢幕分割四個長方形.第一個會時時增大及向右移動，而其餘三個長方形也跟隨右移動，所以感覺類似於滾動波紋.滾動(向左)水紋情境同理.

橫向分割場:

/*** * 橫向分割圖片 */public void doHalf_V() {int Y = mScreenHeight / 2;// 擷取中間分割線int Y1 = Y - rectStep;// 上半部分X座標drawFillRect(mCanvas, Color.BLACK, 0, Y1, mScreenWidth, rectStep);// 繪製上部分drawFillRect(mCanvas, Color.BLACK, 0, Y, mScreenWidth, rectStep);// 繪製下部分}

這個我就不說明了，因為這個是最簡單的一個.

最後我們來看下drawFillRect方法.

/** * 繪製一個矩形 *  * @param canvas * @param color * @param x * @param y * @param w * @param h */public void drawFillRect(Canvas canvas, int color, int x, int y, int w,int h) {int backColor = mPaint.getColor();mPaint.setColor(color);canvas.save();canvas.clipRect(x, y, x + w, y + h);int id = currentId + 1;if (id == bitmap.length)id = 0;// 繪圖canvas.drawBitmap(bitmap[id], null, rectF, null);canvas.restore();mPaint.setColor(backColor);}

這個方法是對你剪裁的矩形進行填充圖片.代碼都比較簡單，相信大家都能看明白.

或許大家發現了，我們的情境其實都是由矩形得來的，這也得益於API提供了這個clipRect方法，但是API只提供了對矩形的剪裁，比如說圓形、弧形可是沒有，所以我沒有辦法做到這些，不過提供矩形的剪裁已經不錯了，只要你有好的實現想法，都可以自己一一構造。情境就介紹到這裡.

下面我們進行拓展：其實也不叫拓展，因為我是做應用的，所以第一個想到的就是這東東在應用中可以實現什麼效果. 比如個性相簿播放器.或者圖片瀏覽器等等.其實把遊戲中的效果運用到應用的話，效果會很不錯的.

下面我介紹下實現的流程：首先我們要自訂SurfaceView控制項,將擷取圖片數組集合射入到該自訂控制項中.然後就是邏輯處理，我們要每5分鐘執行一片切換，也就是情境轉場效果.而執行情境切換的效果最好是隨機的.就這麼多簡單吧.

只要你明白原理，其實實現起來一點也不難，難的是我們的邏輯要進行如何處理，這也是遊戲開發的痛點，不同於應用，應用控制項都是現成的，頂多重寫其控制項額外增加些協助工具功能.所以最重要的一點：你要有耐心.

好了，下面我們看下效果吧.（看著還不錯吧. 截屏工具不好，所以看起來有點卡，手機模擬器運行沒有什麼問題的.）

就說到這裡，如有疑問請留言。

另外，如果對您有協助的話，記得贊一個.

在此：Thanks for you ！