H5游戏开发:消灭星星

「消灭星星」存在多个版本,「消灭星星」是一款很经典的「消除类游戏」,但是matlab有一些不方便支出,对图片的色彩处理实际上就是对这些像素点的通道分量做调整,每个像素点的颜色分量矩阵C,任意一种色光F都可以用不同分量的RGB三色相加混合而成,都是采用R(Red)G(Green)B(Blue)相加混色的原理

图片 1

H5游戏开发:消灭星星

2018/01/25 · HTML5 ·
游戏

原来的书文出处: 坑坑洼洼实验室   

「消灭星星」是一款很经典的「消除类游戏」,它的玩法很简短:化解相连通的同色砖块。

图片 1

先前做图像处理时用的是matlab,不过matlab有一部分不方便人民群众支出:

图像色彩处理


Android对图纸的处理,平时使用的数据结构就是位图—Bitmap,它蕴涵了一张图纸的保有数据。整个图片都以由点阵和颜色值组成的,点阵便是贰个涵盖像素的矩阵,每多个因素对应着图片的三个像素,颜色值—A凯雷德GB,分别对应发光度、红、绿、蓝那八个通道分量,它们一起决定了各样像素点突显的颜料,对图片的色彩处理实际上正是对那几个像素点的大路分量做调整。

在情调解和处理理中,平时从多少个角度来讲述3个图像。

  • 色彩:色彩的完好帮助
  • 饱和度:颜色的纯度,从0(灰)到百分之百(饱和)来进展描述
  • 亮度:颜色的争持明暗程度

在android中,系统应用一个颜料矩阵—ColorMatrix,来拍卖图像的那一个色彩效果。Android中颜色矩阵是3个4×5的矩阵,它用来对图片的情调举办拍卖。而对此每种像素点,都有贰个颜色分量矩阵用来保存颜色的安德拉GBA值,如下图所示:

图片 2

水彩矩阵A

图片 3

各种像素点的水彩分量矩阵C

在处理图像时,使用矩阵乘法运算AC来拍卖颜色分量矩阵,如下图所示:

图片 4

矩阵乘法运算

测算进程:
     R1 = a * R + b * G + c * B + d * A + e;
     G1 = f * R + g * G + h * B + i * A + j;
     B1 = k * R + l * G + m * B + n * A + o;
     A1 = p * R + q * G + r * B + s * A + t;

能够发现,对于颜色矩阵A是按以下办法分割的:
    * 第壹行的a b c d e值决定新的颜色值中的Haval分量—深蓝
    * 第①行的f g h i j值决定新的颜色值中的G分量—海水绿
    * 第②行的k l m n o值决定新的颜色值中的B分量—黄褐
    * 第陆行的p q r s t值决定新的颜色值中的A分量—反射率
    * 矩阵A中的第六列—e j o t值分别控制每种分量中的offset,即偏移量

想要对原图片进行颜色的调动,就必要设置好用于调整颜色的矩阵A

图片 5

原始矩阵

日常有二种艺术:
① 、改变偏移量
将矩阵A的第六列的值举办改动,即改变颜色的偏移量,其余值保持伊始矩阵的值

图片 6

变更颜色偏移量

  原图片各类像素点的矩阵铁锈棕和杏黄的水彩分量都增多了100,红绿混合为香艳,最后会使得整张图片偏黄。
二 、改变颜色周全
修改颜色分量中的某些周到值,其余值依旧保持起头矩阵的值

图片 7

转移颜色全面

  矩阵运算后,原图片每一个像素点的矩阵青绿的颜料分量会成为原来的两倍,最终使得原图片的色调偏绿。

摄像与图像福特ExplorerGB/YUV格式详解(转)
计算机彩色显示屏显示色彩的原理与多彩电视一样,都以行使翼虎(Red)G(格林)B(Blue)相加混色的原理:通过发射出两种分歧强度的电子束,使显示器内侧覆盖的红玉绿磷光材质发光而发优秀彩那种色彩的意味方法称为凯雷德GB色彩空间表示(它也是多媒体电脑技术中用得最多的一种色彩空间表示方法)
据书上说三本色原理,任意一种色光F都得以用差异分量的昂科拉GB三色相加混合而成
F = r [ R ] + g [ G ] + b [ B ]
里面,rgb分别为三本色参加混合的全面当三本色分量都为0(最弱)时混合为浅灰褐光;而当三本色分量都为k(最强)时混合为雾灰光调整rgb七个周详的值,能够勾兑出介于石黄光和油红光之间的各样种种的色光
那正是说YUV又从何而来呢?在现代彩色TV系统中,平日选择三管彩录机或彩色CCD录像机实行拍照,然后把摄得的彩色图像信号经分色分别放中纠正后获取福睿斯GB,再经过矩阵变换电路获得亮度信号Y和多少个色差信号Tiggo-Y(即U)B-Y(即V),最终发送端将亮度和色差三个信号分别举办编码,用同一信道发送出去那种色彩的代表方法正是所谓的YUV色彩空间表示
动用YUV色彩空间的重庆大学是它的亮度信号Y和色度信号UV是分手的只要唯有Y信号分量而从未UV分量,那么这么表示的图像正是黑浅米灰度图像彩色TV接纳YUV空间便是为了用亮度信号Y消除彩电与黑白电视机的包容难题,使黑白电视接收机机也能收到彩色TV信号
YUV与奥迪Q3GB互相转换的公式如下(EscortGB取值范围均为0-255):
Y = 0.299R + 0.587G + 0.114B
U = -0.147R – 0.289G + 0.436B
V = 0.615R – 0.515G – 0.100B
R = Y + 1.14V
G = Y – 0.39U – 0.58V
B = Y + 2.03U
在DirectShow中,常见的CRUISERGB格式有RubiconGB1奥德赛GB4KoleosGB8牧马人GB565哈弗GB555OdysseyGB24TiguanGB32AKoleosGB32等;常见的YUV格式有YUY2YUYVYVYUUYVYAYUVY41PY411Y211IF09IYUVYV12YVU9YUV411YUV420等作为摄像媒体类型的帮衬表明项目(Subtype),它们对应的GUID见表2.3
表2.3 常见的RGB和YUV格式
GUID 格式描述
MEDIASUBTYPE_RAV4GB1 2色,种种像素用一人表示,要求调色板
MEDIASUBTYPE_昂CoraGB4 16色,每种像素用四个人代表,需求调色板
MEDIASUBTYPE_大切诺基GB8 256色,每种像素用六个人表示,需求调色板
MEDIASUBTYPE_昂科拉GB565 每一个像素用十四个人代表,PRADOGB分量分别使用5人7人八个人
MEDIASUBTYPE_福特ExplorerGB555 每一种像素用拾2位表示,安德拉GB分量都使用5人(剩下的1个人不用)
MEDIASUBTYPE_福睿斯GB24 种种像素用2几位代表,路虎极光GB分量各使用5人
MEDIASUBTYPE_OdysseyGB32 每一个像素用三十一个人代表,揽胜极光GB分量各使用6个人(剩下的六人不要)
MEDIASUBTYPE_APRADOGB32 各样像素用三1几个人代表,奥迪Q5GB分量各使用六个人(剩下的8人用于表示Alpha通道值)
MEDIASUBTYPE_YUY2 YUY2格式,以4:2:2格局封装
MEDIASUBTYPE_YUYV YUYV格式(实际格式与YUY2相同)
MEDIASUBTYPE_YVYU YVYU格式,以4:2:2情势包装
MEDIASUBTYPE_UYVY UYVY格式,以4:2:2方式打包
MEDIASUBTYPE_AYUV 带Alpha通道的4:4:4 YUV格式
MEDIASUBTYPE_Y41P Y41P格式,以4:1:1方式打包
MEDIASUBTYPE_Y411 Y411格式(实际格式与Y41P等同)
MEDIASUBTYPE_Y211 Y211格式
MEDIASUBTYPE_IF09 IF09格式
MEDIASUBTYPE_IYUV IYUV格式
MEDIASUBTYPE_YV12 YV12格式
MEDIASUBTYPE_YVU9 YVU9格式
下边分别介绍各样途观GB格式
¨ 瑞鹰GB1福睿斯GB4KoleosGB8都以调色板类型的福特ExplorerGB格式,在讲述这么些媒体类型的格式细节时,日常会在BITMAPINFOHEADEPAJERO数据结构前边跟着三个调色板(定义一星罗棋布颜色)它们的图像数据并不是确实的水彩值,而是当前像素颜色值在调色板中的索引以HavalGB1(2色位图)为例,比如它的调色板中定义的三种颜色值依次为0x000000(浅紫)和0xFFFFFF(深红),那么图像数据001101010111(种种像素用一个人表示)表示对应各像素的颜料为:黑黑白白黑白黑白黑白白白
¨ CRUISERGB565使用12位代表四个像素,这16人中的7个人用于Sportage,5位用于G,陆位用于B程序中数见不鲜采纳3个字(WO普拉多D,3个字十分三个字节)来操作3个像素当读出1个像素后,这么些字的逐一位意义如下:
高字节 低字节
R R R R R G G G G G G B B B B B
能够结合使用屏蔽字和活动操作来博取陆风X8GB各分量的值:
#define RGB565_MASK_RED 0xF800
#define RGB565_MASK_GREEN 0x07E0
#define RGB565_MASK_BLUE 0x001F
R = (wPixel & RGB565_MASK_RED) >> 11; // 取值范围0-31
G = (wPixel & RGB565_MASK_GREEN) >> 5; // 取值范围0-63
B = wPixel & RGB565_MASK_BLUE; // 取值范围0-31
¨ HighlanderGB555是另一种十4个人的SportageGB格式,RubiconGB分量都用7个人表示(剩下的一位不用)使用三个字读出一个像素后,那个字的各样位意义如下:
高字节 低字节
X Haval 本田CR-V Tiggo XC60 G G G G G B B B B B (X表示不用,能够忽略)
能够结合使用屏蔽字和平运动动操作来获取奇骏GB各分量的值:
#define RGB555_MASK_RED 0x7C00
#define RGB555_MASK_GREEN 0x03E0
#define RGB555_MASK_BLUE 0x001F
R = (wPixel & RGB555_MASK_RED) >> 10; // 取值范围0-31
G = (wPixel & RGB555_MASK_GREEN) >> 5; // 取值范围0-31
B = wPixel & RGB555_MASK_BLUE; // 取值范围0-31
¨ RubiconGB24使用24个人来表示2个像素,景逸SUVGB分量都用5人代表,取值范围为0-255在意在内部存款和储蓄器中揽胜极光GB各分量的排列顺序为:BGXC90 BGQashqai BG奥迪Q7平时能够利用途达GBT奥迪Q7IPLE数据结构来操作叁个像素,它的概念为:
typedef struct tagRGBTRIPLE {
BYTE rgbtBlue; // 深湖蓝分量
BYTE rgbt格林; // 木色分量
BYTE rgbtRed; // 桃红分量
} RGBTRIPLE;
¨ RAV4GB32使用三十四位来表示一个像素,LX570GB分量各用去伍个人,剩下的八个人用作Alpha通道可能不用(A福睿斯GB32便是带Alpha通道的LacrosseGB32)注意在内部存储器中TiggoGB各分量的排列顺序为:BGRA BGRA BGRA常常能够应用EscortGBQUAD数据结构来操作一个像素,它的定义为:
typedef struct tagRGBQUAD {
BYTE rgbBlue; // 均红分量
BYTE rgbGreen; // 郎窑红分量
BYTE rgbRed; // 浅灰分量
BYTE rgbReserved; // 保留字节(用作Alpha通道或不经意)
} RGBQUAD;
下边介绍各个YUV格式YUV格式经常有两大类:打包(packed)格式和平面(planar)格式前者将YUV分量存放在同二个数组中,常常是几个相邻的像素组成一个宏像素(macro-pixel);而后人使用五个数组分开存放YUV三个轻重,就如2个三维平面一样表2.3中的YUY2到Y211都是打包格式,而IF09到YVU9都是平面格式(注意:在介绍各个实际格式时,YUV各分量都会含有下标,如Y0U0V0意味第①个像素的YUV分量,Y1U1V1表示第3个像素的YUV分量,以此类推)
¨ YUY2(和YUYV)格式为种种像素保留Y分量,而UV分量在档次方向上每四个像素采样三回2个宏像素为四个字节,实际表示3个像素(4:2:2的意味为八个宏像素中有四个Y分量一个U分量和二个V分量)图像数据中YUV分量排列顺序如下:
Y0 U0 Y1 V0 Y2 U2 Y3 V2
¨ YVYU格式跟YUY2类似,只是图像数据中YUV分量的排列顺序有所不一样:
Y0 V0 Y1 U0 Y2 V2 Y3 U2
¨ UYVY格式跟YUY2类似,只是图像数据中YUV分量的排列顺序有所区别:
U0 Y0 V0 Y1 U2 Y2 V2 Y3
¨ AYUV格式带有多个Alpha通道,并且为每一个像素都提取YUV分量,图像数据格式如下:
A0 Y0 U0 V0 A1 Y1 U1 V1
¨ Y41P(和Y411)格式为种种像素保留Y分量,而UV分量在档次方向上每四个像素采集样品2遍1个宏像素为12个字节,实际表示几个像素图像数据中YUV分量排列顺序如下:
U0 Y0 V0 Y1 U4 Y2 V4 Y3 Y4 Y5 Y6 Y8
¨ Y211格式在档次方向上Y分量每贰个像素采集样品一次,而UV分量每八个像素采集样品3回一个宏像素为5个字节,实际表示五个像素图像数据中YUV分量排列顺序如下:
Y0 U0 Y2 V0 Y4 U4 Y6 V4
¨ YVU9格式为各个像素都提取Y分量,而在UV分量的领取时,首先将图像分成若干个4 x 4的宏块,然后每种宏块提取1个U分量和三个V分量图像数据存款和储蓄时,首先是整幅图像的Y分量数组,然后就跟着U分量数组,以及V分量数组IF09格式与YVU9好像
¨ IYUV格式为各类像素都提取Y分量,而在UV分量的领取时,首先将图像分成若干个2 x 2的宏块,然后每一个宏块提取三个U分量和二个V分量YV12格式与IYUV类似
¨ YUV411YUV420格式多见于DV数据中,前者用于NTSC制,后者用于PAL制YUV411为每一种像素都提取Y分量,而UV分量在档次方向上每5个像素采集样品一回YUV420并非V分量采集样品为0,而是跟YUV411比较,在档次方向上抓实一倍色差采集样品频率,在笔直方向上以U/V间隔的方式缩小八分之四色差采集样品,如下图所示

1. 游戏规则

「消灭星星」存在八个本子,不过它们的规则除了「关卡分值」有个别出入外,其余的平整都是一致的。作者介绍的本子的游戏规则整理如下:

1. 色砖分布

  • 10 x 10 的表格
  • 5种颜色 —— 红、绿、蓝,黄,紫
  • 每类色砖个数在钦定区间内专擅
  • 5类色砖在 10 x 10 表格中私自分布

2. 解除规则

八个或八个以上同色砖块相连通便是可被解除的砖头。

3. 分值规则

  • 免去总分值 = n * n * 5
  • 奖励总分值 = 2000 – n * n * 20

「n」表示砖块数量。上边是「总」分值的条条框框,还有「单」个砖块的分值规则:

  • 解除砖块得分值 = 10 * i + 5
  • 剩余砖块扣分值 = 40 * i + 20

「i」表示砖块的索引值(从 0
初阶)。不难地说,单个砖块「得分值」和「扣分值」是2个等差数列。

4. 关卡分值

关卡分值 = 1000 + (level – 1) * 两千;「level」即方今关卡数。

5. 合格条件

  • 可祛除色块不存在
  • 一共分值 >= 当前关卡分值

地方多个规格还要建立游戏才足以过得去。

  • 不开源,当时应用的本子是破解版的,至于版权难题,此处就不商量了;
  • 其貌似只好用来落到实处,假诺实现产业化则有诸多辛劳;
  • 程序运转相比较慢;
  • 与别的语言结合有点小标题。
    当进入工作岗位之后,做的是大数目方向,接触了java与python后觉得python对于做图像处理会尤其好,所以那里不难的对python操作图像做一些粗略的牵线。
变动色光属性

系统封装了三个类—ColorMatrix,通过那些类,能够很有益地由此改动矩阵值来拍卖颜色效果(色调、饱和度、亮度)。本质上是三个一维数组[a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t]。

图片 8

ColorMatrix

调节色调(色彩的旋转运算):
  ColorMatrix类提供了setRotate(int axis, float
degrees)来调节颜色的色泽。第二个参数,使用0、一 、2来代表Red、格林、Blue三种颜色的拍卖,第①个参数,正是急需处理的值。

    /**
     * Set the rotation on a color axis by the specified values.
     * <p>
     * <code>axis=0</code> correspond to a rotation around the RED color
     * <code>axis=1</code> correspond to a rotation around the GREEN color
     * <code>axis=2</code> correspond to a rotation around the BLUE color
     * </p>
     */
    public void setRotate(int axis, float degrees) {
        reset();
        double radians = degrees * Math.PI / 180d;
        float cosine = (float) Math.cos(radians);
        float sine = (float) Math.sin(radians);
        switch (axis) {
        // Rotation around the red color
        case 0:
            mArray[6] = mArray[12] = cosine;
            mArray[7] = sine;
            mArray[11] = -sine;
            break;
        // Rotation around the green color
        case 1:
            mArray[0] = mArray[12] = cosine;
            mArray[2] = -sine;
            mArray[10] = sine;
            break;
        // Rotation around the blue color
        case 2:
            mArray[0] = mArray[6] = cosine;
            mArray[1] = sine;
            mArray[5] = -sine;
            break;
        default:
            throw new RuntimeException();
        }
    }

调节饱和度
  通过色彩的移位运算单独增强路虎极光,G,B的饱和度,ColorMatrix类提供了setSaturation(float
sat)方法来完全调节图像的饱和度,参数代表设置颜色饱和度的值,当饱和度为0时,图像成为灰度图像,数值越大图像越饱和。

    /**
     * Set the matrix to affect the saturation of colors.
     *
     * @param sat A value of 0 maps the color to gray-scale. 1 is identity.
     */
    public void setSaturation(float sat) {
        reset();
        float[] m = mArray;

        final float invSat = 1 - sat;
        final float R = 0.213f * invSat;
        final float G = 0.715f * invSat;
        final float B = 0.072f * invSat;

        m[0] = R + sat; m[1] = G;       m[2] = B;
        m[5] = R;       m[6] = G + sat; m[7] = B;
        m[10] = R;      m[11] = G;      m[12] = B + sat;
    }

调节亮度(色彩的缩放运算)
  当三原色以相同的比重举行混合的时候,就会议及展览示出蔚蓝,使用那一个原理来改变多个图像的亮度,亮度为0时,图像成为全黑。ColorMatrix类提供setScale(float
rScale, float gScale, float bScale, float
aScale)方法来调节颜色的亮度值。

    /**
     * Set this colormatrix to scale by the specified values.
     */
    public void setScale(float rScale, float gScale, float bScale,
                         float aScale) {
        final float[] a = mArray;

        for (int i = 19; i > 0; --i) {
            a[i] = 0;
        }
        a[0] = rScale;
        a[6] = gScale;
        a[12] = bScale;
        a[18] = aScale;
    }

2. MVC 设计情势

笔者这一次又是行使了 MVC
格局来写「消灭星星」。星星「砖块」的数据结构与各个情况由 Model
达成,游戏的中坚在 Model 中完毕;View 映射 Model
的变化并做出相应的行事,它的职分重若是展现动画;用户与游戏的相互由
Control 达成。

从逻辑规划上看,Model 很重而View 与 Control
很轻,不过,从代码量上看,View 很重而 Model 与 Control 相对很轻。

  1. 第3安装pytyhon,linux系统中
    已经本人带了python,至于在window系统只设置则尤其简便易行,下载三个Anaconda直白就足以设置了,后续的模块安装则直接使用pip安装会特别有益。在那边就不一一讲述了。
部分常用的图像颜色处理矩阵
  • 灰度效果

图片 9

灰度矩阵

图片 10

灰度效果

  • 图像反转

图片 11

图像反转矩阵

图片 12

图像反转效果

  • 怀旧效果

图片 13

怀旧矩阵

图片 14

忆旧效果

  • 去色效果

图片 15

去色矩阵

图片 16

去色效果

3. Model

10 x 10 的报表用长度为 100 的数组可周详映射游戏的点滴「砖块」。

[ R, R, G, G, B, B, Y, Y, P, P, R, R, G, G, B, B, Y, Y, P, P, R, R, G,
G, B, B, Y, Y, P, P, R, R, G, G, B, B, Y, Y, P, P, R, R, G, G, B, B, Y,
Y, P, P, R, R, G, G, B, B, Y, Y, P, P, R, R, G, G, B, B, Y, Y, P, P, R,
R, G, G, B, B, Y, Y, P, P, R, R, G, G, B, B, Y, Y, P, P, R, R, G, G, B,
B, Y, Y, P, P ]

1
2
3
4
5
6
7
8
9
10
11
12
[
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P
]

汉兰达 – 青白,G – 石榴红,B – 品红,Y – 煤黑,P – 深紫。Model
的主干职务是以下多个:

  • 变迁砖墙
  • 化解砖块 (生成砖块分值)
  • 坚实砖墙
  • 扫除残砖 (生成奖励分值)

图像打开与展现

from PIL import Image
import numpy as np
import scipy
import matplotlib.pyplot as plt
lena = Image.open('lena.jpg')           //打开图像  
print(lena.mode)                       //打印图像类型
print(lena.getpixel((0,0)))           //打印图像(0,0)处像素值
lena.show()                            //图像显示
像素点分析

能够经过变更种种像素点的实际AOdysseyGB值,来达到拍卖一张图像效果的目标。系统提供了Bitmap.getPixel()方法来收获有些像素点,也提供了Bitmap.getPixels()方法来提取整个Bitmap中的像素点,并保存到三个数组中:
getPixels(int[] pixels, int offset, int stride, int x, int y, int width, int height)
当获得到具体的颜色值之后,就能够透过相应的算法来修改它的AGL450GB值,从而重构到一张新的图像。

常用图像像素点处理功用

—底片效果:

B.r = 255 - B.r; 
B.g = 255 - B.g; 
B.b = 255 - B.b;

图片 17

底片效果

—老照片效果:

r1 = (int) (0.393 * r + 0.769 * g + 0.189 * b);
g1 = (int) (0.349 * r + 0.686 * g + 0.168 * b);
b1 = (int) (0.272 * r + 0.534 * g + 0.131 * b);

图片 18

老照片效果

—浮雕效果:

B.r = C.r - B.r + 127;
B.g = C.g - B.g + 127;
B.b = C.b - B.b + 127;

图片 19

浮雕效果