本站文章均為?李華明Himi?原創(chuàng),轉(zhuǎn)載務(wù)必在明顯處注明：
轉(zhuǎn)載自【黑米GameDev街區(qū)】?原文鏈接:?http://www.himigame.com/android-game/321.html

?

??? 前幾天群成員討論過關(guān)于9patch的工具【我比較喜歡喊它9妹子，西西(*^_^*)】、然后研究了一下，比較簡(jiǎn)單但是很實(shí)用的一個(gè)Android sdk 自帶工具、這里給大家做一個(gè)分享下經(jīng)驗(yàn)！

?1.什么是“9妹”(9patch)？

??? 它是一個(gè)對(duì)png圖片做處理的一個(gè)工具，能夠?yàn)槲覀兩梢粋€(gè)"*.9.png"的圖片;

2.何為"*.9.png"?

??? 所謂"*.9.png"這是Android os里所支持的一種特殊的圖片格式,用它可以實(shí)現(xiàn)部分拉伸；這種圖片是經(jīng)過”9妹“進(jìn)行特殊處理過的，如果不處理的話，直接用PNG圖就會(huì)有失真，拉伸不正常的現(xiàn)象出現(xiàn)。

3.它的用途是？

??? 說到用途，這種特殊格式的png圖，我也看了網(wǎng)上的相關(guān)文章但都是用一個(gè)能自適應(yīng)的button舉例子！(如下圖)清一色抄襲.. - -、

?

?(此實(shí)例咱們直接無視掉，在后面我會(huì)給大家灌輸游戲中實(shí)例)

??? 這個(gè)例子是指當(dāng)button上的字體大小改變，那么文字底下的png圖也會(huì)自動(dòng)適應(yīng)文字。

??? 這似乎表明做Android 軟件應(yīng)用 使用一些組件的的時(shí)候會(huì)時(shí)常用到；

4.那么實(shí)際在游戲中到底如何使用呢？什么情況下去使用呢？

??? 當(dāng)然啦，身為做游戲我一定要”9妹“利用在咱們游戲中才行，不然豈不是白研究了、經(jīng)過思考突然想到了一些情況，并且發(fā)現(xiàn)“9妹”確實(shí)在游戲開發(fā)中占有一定的分量！下面我們來先熟習(xí)“9妹”工具，然后再跟大家舉例，貼圖來說明其用途、畢竟有圖有真相 呵呵~

?啟動(dòng)9妹：

??? 在你Android SDK 路徑下 X:/android sdk/tools ,你會(huì)找到一個(gè) 【draw9patch.bat】,沒錯(cuò)這就是9妹啦、官方名 NinePatch ；?

?提示導(dǎo)入一張png圖片，然后真正進(jìn)入"9妹"的操作界面（如下圖）： （圖1）?

????? 序列 ① ：在拉伸區(qū)域周圍用紅色邊框顯示可能會(huì)對(duì)拉伸后的圖片產(chǎn)生變形的區(qū)域，如果完全消除該內(nèi)容則圖片拉伸后是沒有變形的，也就是說，不管如何縮放圖片顯示都是良 好的。 （實(shí)際試 發(fā)現(xiàn)NinePatch編輯器是根據(jù)圖片的顏色值來區(qū)分是否為bad patch的，一邊來說只要色差不是太大不用考慮這個(gè)設(shè)置。）

??? 序列 ② ：區(qū)域是導(dǎo)入的圖片，以及可操作區(qū)域。

??? 序列 ③ ：這里 zoom：的長(zhǎng)條bar 是對(duì)導(dǎo)入的圖放大縮小操作，這里的放大縮小只是為了讓使用者更方便操作，畢竟是對(duì)像素點(diǎn)操作比較費(fèi)眼，下面的 patch scale 是序列 ④區(qū)域中的三種形態(tài)的拉伸后的一個(gè)預(yù)覽操作，可以看到操作后的圖片拉伸后的效果。

??? 序列 ④： 區(qū)域這里從上到下，依次為：縱向拉伸的效果預(yù)覽、橫向拉伸的效果預(yù)覽，以及整體拉伸的效果預(yù)覽

??? 序列 ⑤： 這里如果你勾選上，那么當(dāng)你鼠標(biāo)放在 ② 區(qū)域內(nèi)的時(shí)候并且當(dāng)前位置為不可操作區(qū)域就會(huì)出現(xiàn)lock的一張圖,就是顯示不可編輯區(qū)域 ;

??? 序列 ⑥： 這里勾選上，那么在④ 區(qū)域中你就會(huì)看到當(dāng)前操作的像素點(diǎn)在拉伸預(yù)覽圖中的相對(duì)位置和效果。

??? 序列 ⑦： 在編輯區(qū)域顯示圖片拉伸的區(qū)域;

?

如何操作：鼠標(biāo)左鍵選取需要拉伸的像素點(diǎn)； shift+鼠標(biāo)左鍵取消當(dāng)前像素點(diǎn)。

操作區(qū)域：?

??? 大家看到導(dǎo)入的png圖片默認(rèn)周圍多了一像素點(diǎn)，也就是這一圈一像素點(diǎn)就是咱們的可操作區(qū)域。因?yàn)?strong>下方和右方可操作區(qū)域是指定內(nèi)容的顯示區(qū)域，屬于可選區(qū)域，可不予理會(huì)；但是要注意內(nèi)容區(qū)域的標(biāo)記不能有間斷，也就是說標(biāo)記要連續(xù)且僅有一處，否則.9.png圖片在放入項(xiàng)目下會(huì)報(bào)錯(cuò)。

主要大家注意Left 和 top 操作區(qū)域；

???? Top操作區(qū)域的一排像素點(diǎn)，表示橫向拉伸的像素點(diǎn)；

??? Left操作區(qū)的一排像素點(diǎn)，表示縱向拉伸的像素點(diǎn)；

??

下圖是我對(duì)圖片的操作：（圖2）

??? 大家看到上方和左邊的黑色像素了么？對(duì)，這些是我手動(dòng)操作的地方，我這里是想讓此png圖像拉伸操作的時(shí)候，只是中間區(qū)域被拉伸。選擇上方中間區(qū)域是為了橫向拉伸的時(shí)候選取的拉伸像素點(diǎn)，左邊則是縱向拉伸的；

???? 那么大家現(xiàn)在回頭看一眼（圖1）然后對(duì)比（圖2），看到區(qū)別了吧！很明顯，(圖1)我們沒有任何操作，默認(rèn)整體拉伸，那么拉伸的效果很明顯的失真了...而（圖2）我們指定了拉伸的像素點(diǎn)所以只是中間的被拉伸，圖片的花邊我們保留不拉伸這樣看起來就好太多啦 娃哈哈、

??? 然后通過“9妹”就可以保存出來一張“*.9.png”圖片，我們放在android 項(xiàng)目的res 下的 drawable 下就可以拉！

?現(xiàn)在我就可以跟大家講下使用“*.9.png”的好處：

???? 在我們手機(jī)游戲開發(fā)的過程中，我們最關(guān)系的是生成的安裝文件、比如j2me 的jar 包，塞班的sis、sisx 以及咱們andrid中的apk都希望打包后的包越小越好、雖然現(xiàn)在的手機(jī)趨向于智能了，但是畢竟手機(jī)的容量和內(nèi)存還是有限、身為移動(dòng)設(shè)備開發(fā)者的我們對(duì)此都很看重，那么通過"9妹"處理后的圖片我們就可以省去不少的內(nèi)存和容量。

1. 省精力和時(shí)間！

??? 如果我們有一張50*50的類似上面那種帶花邊的png圖片，那么我們?cè)赼ndroid或者大分辨率的機(jī)器上使用的畫，肯定需要對(duì)其處理，那么要不就是讓美工的mm們給咱們重新做一張,那么通過"9妹"處理得到的“*.9.png”就會(huì)省去美工的負(fù)擔(dān)了。

2.省內(nèi)存!

??? 如果不想用代碼來對(duì)其小圖進(jìn)行縮放來再次使用(因?yàn)榭紤]會(huì)失真),那么可能會(huì)多加了圖片，這樣一來游戲包的大小就會(huì)增加了，幾K—幾十K不等,而利用"9妹"處理的就省去了這些麻煩。

3.減少代碼量!

??? 有些童鞋該說啦，我用代碼一樣能實(shí)現(xiàn)(圖2)的效果不失真，OK，我也知道。當(dāng)初我在J2ME平臺(tái)做RPG的時(shí)候也是利用設(shè)置可視區(qū)域等代碼來實(shí)現(xiàn)的，但是如果你用“.9.png”的方式就更簡(jiǎn)單！！！

??? ?不多吹 “9妹”的好處，下面我們來看看代碼如何實(shí)現(xiàn)此格式的方式和效果吧！?

package?com.himi; ?

import?android.content.Context; ?

import?android.graphics.Bitmap; ?

import?android.graphics.BitmapFactory; ?

import?android.graphics.Canvas; ?

import?android.graphics.Color; ?

import?android.graphics.NinePatch; ?

import?android.graphics.Paint; ?

import?android.graphics.RectF; ?

import?android.util.Log; ?

import?android.view.SurfaceHolder; ?

import?android.view.SurfaceView; ?

import?android.view.SurfaceHolder.Callback; ?

public?class?MySurfaceView?extends?SurfaceView?implements?Callback,?Runnable?{ ?

????private?Thread?th?=?new?Thread(this); ?

????private?SurfaceHolder?sfh; ?

????private?Canvas?canvas; ?

????private?Paint?paint; ?

????private?Bitmap?bmp_old; ?

????private?Bitmap?bmp_9path; ?

????private?NinePatch?np; ?

????public?MySurfaceView(Context?context)?{ ?

????????super(context); ?

????????this.setKeepScreenOn(true); ?

????????bmp_old?=?BitmapFactory.decodeResource(getResources(),?R.drawable.himi_old); ?

????????bmp_9path?=?BitmapFactory.decodeResource(getResources(),?R.drawable.himi_9path); ?

????????np?=?new?NinePatch(bmp_9path,?bmp_9path.getNinePatchChunk(),?null); ?

????????//創(chuàng)建一個(gè)ninePatch的對(duì)象實(shí)例，第一個(gè)參數(shù)是bitmap、第二個(gè)參數(shù)是byte[]，這里其實(shí)要求我們傳入 ?

????????//如何處理拉伸方式，當(dāng)然我們不需要自己傳入，因?yàn)椤?9.png”圖片自身有這些信息數(shù)據(jù)， ?

????????//也就是我們用“9妹”工具操作的信息！?我們直接用“.9.png”圖片自身的數(shù)據(jù)調(diào)用getNinePatchChunk()即可 ?

????????//第三個(gè)參數(shù)是圖片源的名稱，這個(gè)參數(shù)為可選參數(shù)，直接null~就OK~ ?

????????sfh?=?this.getHolder(); ?

????????sfh.addCallback(this); ?

????????paint?=?new?Paint(); ?

????????paint.setAntiAlias(true); ?

????????setFocusable(true); ?

????} ?

????public?void?surfaceCreated(SurfaceHolder?holder)?{ ?

????????Log.v("Himi",?"surfaceCreated"); ?

????????th.start(); ?

????} ?

????/** ?

?????*?@author?Himi ?

?????*/ ?

????public?void?draw()?{ ?

????????canvas?=?sfh.lockCanvas(); ?

????????canvas.drawColor(Color.BLACK); ?

????????RectF?rectf_old_two?=?new?RectF(0,?50,?bmp_old.getWidth()?*?2,?120?+?bmp_old.getHeight()?*?2);//備注1 ?

????????RectF?rectf_old_third?=?new?RectF(0,?120?+?bmp_old.getHeight()?*?2,?bmp_old.getWidth()?*?3, ?

????????????????140?+?bmp_old.getHeight()?*?2?+?bmp_old.getHeight()?*?3); ?

????????//?--------下面是對(duì)正常png繪畫方法----------- ?

????????canvas.drawBitmap(bmp_old,?0,?0,?paint); ?

????????canvas.drawBitmap(bmp_old,?null,?rectf_old_two,?paint); ?

????????canvas.drawBitmap(bmp_old,?null,?rectf_old_third,?paint); ?

????????RectF?rectf_9path_two?=?new?RectF(250,?50,?250?+?bmp_9path.getWidth()?*?2,?90?+?bmp_9path.getHeight()?*?2); ?

????????RectF?rectf_9path_third?=?new?RectF(250,?120?+?bmp_9path.getHeight()?*?2,?250?+?bmp_9path.getWidth()?*?3, ?

????????????????????140?+?bmp_9path.getHeight()?*?2 ?

????????????????+?bmp_9path.getHeight()?*?3); ?

????????canvas.drawBitmap(bmp_9path,?250,?0,?paint); ?

????????//?--------下面是".9.png"圖像的繪畫方法----------- ?

????????np.draw(canvas,?rectf_9path_two); ?

????????np.draw(canvas,?rectf_9path_third); ?

????????sfh.unlockCanvasAndPost(canvas); ?

????} ?

????public?void?run()?{ ?

????????//?TODO?Auto-generated?method?stub ?

????????while?(true)?{ ?

????????????draw(); ?

????????????try?{ ?

????????????????Thread.sleep(100); ?

????????????}?catch?(Exception?ex)?{ ?

????????????} ?

????????} ?

????} ?

????public?void?surfaceChanged(SurfaceHolder?holder,?int?format,?int?width,?int?height)?{ ?

????????Log.v("Himi",?"surfaceChanged"); ?

????} ?

????public?void?surfaceDestroyed(SurfaceHolder?holder)?{ ?

????????Log.v("Himi",?"surfaceDestroyed"); ?

????} ?

}?

下圖是模擬器中的效果圖、

??

??? 左邊是正常png的縮放不同大小的情況，右邊是咱們的9妹處理過的“*.9.png”、娃哈哈，怎么樣 效果明顯不一樣吧！

??好啦，到這里就結(jié)篇吧，挺累的 寫了三個(gè)多小時(shí)了....... 希望大家以后多多的利用 “9妹”哦、

?(推薦大家訂閱本博客，因?yàn)樵鄣母滤俣瓤墒呛芸斓膥娃哈哈)

??

總結(jié)

以上是生活随笔為你收集整理的【Android游戏开发十一】手把手让你爱上Android sdk自带“9妹”的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。