【ANDROID游戏开发十一】手把手让你爱上ANDROID SDK自带“9妹”(9PATCH 工具),让ANDROID游戏开发更方便!

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 

转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/android-game/321.html

———————————————————————

多童鞋说我的代码运行后,点击home或者back后会程序异常,如果你也这样遇到过,那么你肯定没有仔细读完Himi的博文,第十九篇Himi专门写了关于这些错误的原因和解决方法,这里我在博客都补充说明下,省的童鞋们总疑惑这一块;请点击下面联系进入阅读:

【Android游戏开发十九】(必看篇)SurfaceView运行机制详解—剖析Back与Home按键及切入后台等异常处理! 』

——————————————————————-

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

它是一个对png图片做处理的一个工具,能够为我们生成一个”*.9.png”的图片;

 2.何为”*.9.png”?

所谓”*.9.png”这是Android os里所支持的一种特殊的图片格式,用它可以实现部分拉伸;这种图片是经过”9妹“进行特殊处理过的,如果不处理的话,直接用PNG图就会有失真,拉伸不正常的现象出现。

 3.它的用途是?

       说到用途,这种特殊格式的png图,我也看了网上的相关文章但都是用一个能自适应的button举例子!而这个例子是指当button上的字体大小改变,那么文字底下的png图也会自动适应文字。 这似乎表明做Android 软件应用 使用一些组件的的时候会时常用到;

 4.那么实际在游戏中到底如何使用呢?什么情况下去使用呢?

   ….当然啦,身为做游戏我一定要”9妹“利用在咱们游戏中才行,不然岂不是白研究了、经过思考突然想到了一些情况,并且发现“9妹”确实在游戏开发中占有一定的分量!下面我们来先熟习“9妹”工具,然后再跟大家举例,贴图来说明其用途、毕竟有图有真相 呵呵~

启动9妹:

在你Android SDK 路径下 X:/android sdk/tools ,你会找到一个 【draw9patch.bat】,没错这就是9妹啦、官方名 NinePatch ;

提示导入一张png图片,然后真正进入”9妹”的操作界面(如下图):     (图1)

序列 ① :在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域,如果完全消除该内容则图片拉伸后是没有变形的,也就是说,不管如何缩放图片显示都是良 好的。 (实际试 发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的,一边来说只要色差不是太大不用考虑这个设置。)

序列 ② :区域是导入的图片,以及可操作区域。

序列 ③ :这里 zoom:的长条bar 是对导入的图放大缩小操作,这里的放大缩小只是为了让使用者更方便操作,毕竟是对像素点操作比较费眼,下面的 patch scale 是序列 ④区域中的三种形态的拉伸后的一个预览操作,可以看到操作后的图片拉伸后的效果。

序列 ④: 区域这里从上到下,依次为:纵向拉伸的效果预览、横向拉伸的效果预览,以及整体拉伸的效果预览

序列 ⑤: 这里如果你勾选上,那么当你鼠标放在 ② 区域内的时候并且当前位置为不可操作区域就会出现lock的一张图,就是显示不可编辑区域 ;

序列 ⑥: 这里勾选上,那么在④ 区域中你就会看到当前操作的像素点在拉伸预览图中的相对位置和效果。

序列 ⑦: 在编辑区域显示图片拉伸的区域;

如何操作:

                   鼠标左键选取需要拉伸的像素点;  shift+鼠标左键取消当前像素点。

操作区域:

 

大家看到导入的png图片默认周围多了一像素点,也就是这一圈一像素点就是咱们的可操作区域。因为方和右方可操作区域是指定内容的显示区域,属于可选区域,可不予理会;但是要注意内容区域的标记不能有间断,也就是说标记要连续且仅有一处,否则.9.png图片在放入项目下会报错。

主要大家注意Left 和 top 操作区域;

Top操作区域的一排像素点,表示横向拉伸的像素点;

Left操作区的一排像素点,表示纵向拉伸的像素点;

下图是我对图片的操作:  (图2)

大家看到上方和左边的黑色像素了么?对,这些是我手动操作的地方,我这里是想让此png图像拉伸操作的时候,只是中间区域被拉伸。选择上方中间区域是为了横向拉伸的时候选取的拉伸像素点,左边则是纵向拉伸的;

那么大家现在回头看一眼(图1)然后对比(图2),看到区别了吧!很明显,(图1)我们没有任何操作,默认整体拉伸,那么拉伸的效果很明显的失真了…而(图2)我们指定了拉伸的像素点所以只是中间的被拉伸,图片的花边我们保留不拉伸这样看起来就好太多啦 娃哈哈、

然后通过“9妹”就可以保存出来一张“*.9.png”图片,我们放在android 项目的res 下的 drawable 下就可以拉!

现在我就可以跟大家讲下使用“*.9.png”的好处:

在我们手机游戏开发的过程中,我们最关系的是生成的安装文件、比如j2me 的jar 包,塞班的sis、sisx 以及咱们andrid中的apk都希望打包后的包越小越好、虽然现在的手机趋向于智能了,但是毕竟手机的容量和内存还是有限、身为移动设备开发者的我们对此都很看重,那么通过”9妹”处理后的图片我们就可以省去不少的内存和容量。

 1. 省精力和时间!

    如果我们有一张50*50的类似上面那种带花边的png图片,那么我们在android或者大分辨率的机器上使用的画,肯定需要对其处理,那么要不就是让美工的mm们给咱们重新做一张,那么通过”9妹”处理得到的“*.9.png”就会省去美工的负担了。

2.省内存!

   如果不想用代码来对其小图进行缩放来再次使用(因为考虑会失真),那么可能会多加了图片,这样一来游戏包的大小就会增加了,几K—几十K不等,而利用”9妹”处理的就省去了这些麻烦。

3.减少代码量! 

  有些童鞋该说啦,我用代码一样能实现(图2)的效果不失真,OK,我也知道。当初我在J2ME平台做RPG的时候也是利用设置可视区域等代码来实现的,但是如果你用“.9.png”的方式就更简单!!!

不多吹 “9妹”的好处,下面我们来看看代码如何实现此格式的方式和效果吧!

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

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);

        //创建一个ninePatch的对象实例,第一个参数是bitmap、第二个参数是byte[],这里其实要求我们传入

        //如何处理拉伸方式,当然我们不需要自己传入,因为“.9.png”图片自身有这些信息数据,

        //也就是我们用“9妹”工具操作的信息! 我们直接用“.9.png”图片自身的数据调用getNinePatchChunk()即可

        //第三个参数是图片源的名称,这个参数为可选参数,直接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);

        // --------下面是对正常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”、娃哈哈,怎么样  效果明显不一样吧!

好啦,到这里就结篇吧,挺累的 写了三个多小时了……. 希望大家以后多多的利用 “9妹”哦、

时间: 2024-08-31 19:09:54

【ANDROID游戏开发十一】手把手让你爱上ANDROID SDK自带“9妹”(9PATCH 工具),让ANDROID游戏开发更方便!的相关文章

手把手让你爱上Android sdk自带“9妹”(9patch 工具)

前几天群成员讨论过关于9patch的工具[我比较喜欢喊它9妹子,西西(*^_^*)].然后研究了一下,比较简单但是很实用的一个Android sdk 自带工具.这里给大家做一个分享下经验!     1.什么是"9妹"(9patch)? 它是一个对png图片做处理的一个工具,能够为我们生成一个"*.9.png"的图片;   2.何为"*.9.png"? 所谓"*.9.png"这是Android os里所支持的一种特殊的图片格式,

android sdk自带的sdkcontronllerapp干什么用的

问题描述 android sdk自带的sdkcontronllerapp干什么用的 android sdk自带的sdkcontronllerapp干什么用的 好像无法运行到真机调试呢 解决方案 如下是 Android SDK 的目录: 你所说的东东在哪里?真机调试,应该与它无关的.偶的 Android SDK 使用真机调试是没有问题的.是不是因为其它设置的问题,导致的不能真机调试.你可以在网上查找一下真机调试的设置,然后再试试看. 2015/06/18 04:59 220,209 AVD Man

开发工具-如何从Eclipse开发Android转到Android Studio?

问题描述 如何从Eclipse开发Android转到Android Studio? Eclipse开发工具转到Android Studio开发工具,需要注意些什么?有没有比较完善的Android Studio开发指南什么的?谢谢!!! 解决方案 参考eclipse项目迁移到android studiohttp://www.cnblogs.com/vanezkw/p/4182917.html 解决方案二: 实践出真知 解决方案三: 先学习下android studio的使用,然后慢慢就熟练了,学习

《Android开发进阶:从小工到专家》——第2章,第2.4节让应用更精彩——动画

2.4 让应用更精彩--动画 为了使用户的交互更为流畅.自然,动画已经成为一款应用中不可缺少的部分.在Android中,动画的分类较多,有最早的帧动画.补间动画,从Android 3.0之后添加了属性动画,而在Android 5.0中又增加了VectorDrawable,使得Android的动画多种多样,能够满足用户的各种需求. 动画实际上就是在指定的时间段内持续地修改某个属性的值,使得该值在指定取值范围之内平滑的过渡.如图2-22所示是一个执行时长为40毫秒.将x从0平滑过渡为40的动画. 从

《Android应用开发攻略》——1.11 使用SDK样例避免棘手的情况

1.11 使用SDK样例避免棘手的情况 Daniel Fowler1.11.1 问题 有时候某些功能的编码非常费力,特别是在文档粗糙或者没有提供任何例子的情况下.1.11.2 解决方案 查看现有的可行代码将会有帮助.Android SDK有一些样例程序,可以仔细观察其工作方法.1.11.3 讨论 Android SDK自带多种样例应用程序,在编写某些功能时可能有用处.细看这些样例代码可能会很有启发.安装Android SDK之后,可以找到下列样例: Accelerometer Play Acce

【安卓开发】谁能告诉我像百度贴吧客户端那样的论坛性程序的开发原理是什么

问题描述 [安卓开发]谁能告诉我像百度贴吧客户端那样的论坛性程序的开发原理是什么 谁能告诉我像百度贴吧客户端那样的论坛性程序的开发原理是什么? 目前我们的程序是直接打开一个网页. 1.很多android程序都是界面内包含网页的,但是却有一些标题栏一样的东西,可以控制网页,设置登陆登出等.登出之后,网页的个人信息也随之消失. 2.例如在手机程序里面登陆后,打开程序后,系统就自动存在了个人信息. 或者系统能够获知当前web视图里面加载的是什么网址. 等等等... 我主要想知道的是这类论坛性客户端的开

《HTML5 2D游戏编程核心技术》——第2章,第2.1节使用开发者工具

第2章 在本书中,我们将从头开始编程实现一款游戏.像所有的游戏开发者一样,在开始之前,我们必须收集原始素材,并熟悉我们的工具.对于大多数游戏来说,下面的原始素材是必备的. 图像 音效 音乐 下面的内容则是可选的,使用它们可以给你的HTML5游戏增色. 网站图标 网页背景 GIF动画 网站图标是一些小的图标,可以在浏览器的地址栏或者标签中显示.网页背景可以是图像,也可以像Snail Bait游戏一样,用CSS画出来.Snail Bait游戏在加载资源时,会显示一个GIF动画. 幸运的是,所有必要的

盛大游戏董事长兼CEO谭群钊在演讲中表示商业模式都不重要,游戏本身才重要

第十届中国国际数码互动娱乐展览会(2012 ChinaJoy游戏展)日前在上海开幕,和讯科技进行全程报道.盛大游戏董事长兼CEO谭群钊在演讲中表示商业模式都不重要,游戏本身才重要. 谭群钊表示,回到游戏本质,也就是游戏可玩性和服务上面.所有的开放都是要把游戏开发好,服务好,这才是本质开放的基础,也是不断发展的基础. 以下为谭群钊演讲实录: 谭群钊:非常感谢主持人对盛大游戏详细的介绍,介绍的是去年,今年我们努力做出一些新的成绩出来,在此感谢各位领导和各位同行的光临,我非常容幸在今天下午第一个进行交

Android App支付系列(二):支付宝SDK接入详细指南(附官方支付demo)

一家移动互联网公司,说到底,要盈利总是需要付费用户的,自己开发支付系统对于资源有限的公司来说显然不太明智,国内已经有多家成熟的移动支付提供商,阿里就是其中之一. 笔者在此总结了下阿里旗下支付宝Android SDK支付的接入流程,供后来者参考. 接入流程如下: 1 签约成为支付宝商户 签约地址:https://b.alipay.com/, 只有成为签约商户的开发者才能具备集成支付宝app支付的资格. 签约资料:1)营业执照 2)APP说明文档 3)商户经营信息.商户联系人等信息 必要时还需提供A