cocos游戏: 不规则响应区域处理

1、问题：
平时使用的按钮之类的都是规则图形，但是有些比如一些世界地图之类的，
地图块是不规则的，边缘都是弯弯曲曲的，而且有些有交叉，处理这样的
点击块就比较麻烦了
2、几点解决思路
2.1 如果地图块之间有点间隙，或者距离不是很近，那么可以采用每个
地图块中添加多个小的响应区域，做好标记，那几个响应区域对应那个地图，
这样点击小地图块就是相当于点击对应的地图了，这种不容易做到精准，只能大致
区域，因为地图边缘如果比较弯曲，需要放很多小的响应区域了
2.2 我们可以把整张地图看做一个整体，然后对这张地图生成一个字母数组，为啥要
生成一个字母数组呢？又用什么方式生成字母数组呢？
2.2.1 我们点击时肯定有位置，这样我们可以把位置转化为刚才生成的字母数组中的字母，
假如是1，我们认为点击了第一块地图，如果是2，我们就认为点击了第二块地图...
2.2.2 怎么生成地图的字母数组呢？
现在脚本语言如php，python都能读取 png 图片的像素 rgba 值，我们先对图片做个特殊处理，
用 psd 之类的工具，把地图快分别涂成不同的颜色值，这样我们就能根据颜色值来区分不用的地图块了，
然后就可以写脚本对这个地图进行处理，生成这个地图特有的字符表了，我们不需要每个像素都生成一个
字母，可以每个几个像素，比如8，或者6个，看需要的精细程度，那些没有地图快的地方，我们可以用" "
空格字符来表示
2.2.3 怎么使用这个字母数组呢
获取 touch 在地图上的位置，然后除去上面的8，然后根据得到的idxX,idxY在数组中索引，获取对应的字母，
然后根据什么字母判断点击的区域

代码1：图片处理

#!/usr/bin/env php
<?php

// require_once("vendor/autoload.php");

// use Dlindberg\Pasteboard\Pasteboard;

$file = "/Users/staff/Desktop/1.png";
$img = @imagecreatefrompng($file);
$size = getimagesize($file);
$width = $size[0];
$height = $size[1];

$strArr = array();

$pixelWidth = 8;
for ($j=0; $j < ceil($height/$pixelWidth); $j++) {
    $strArr[] = str_repeat(" ", ceil($width/$pixelWidth));
}

$lastY = 0;
for ($y=0; $y < $height; $y+=$pixelWidth) {
    for ($x=0; $x < $width; $x+=$pixelWidth) {
        $rgb = imagecolorat($img, $x, $y);
        $r = ($rgb >> 16) & 0xFF;
        $g = ($rgb >> 8) & 0xFF;
        $b = $rgb & 0xFF;

        $strX = $x/$pixelWidth;
        $strY = $y/$pixelWidth;

        // printf("rgb r: %x g: %x b: %x \n", $r, $g, $b);

        if ($r == 0x8a && $g == 0x54 && $b == 0x60) {
            $strArr[$strY][$strX] = "1";
        }

        if ($r == 0x1c && $g == 0xfe && $b == 0xfc) {
            $strArr[$strY][$strX] = "2";
        }

        if ($r == 0x41 && $g == 0x24 && $b == 0xDC) {
            $strArr[$strY][$strX] = "3";
        }

        if ($r == 0xfe && $g == 0x71 && $b == 0x1d) {
            $strArr[$strY][$strX] = "4";
        }

        if ($r == 0x1c && $g == 0xe8 && $b == 0x27) {
            $strArr[$strY][$strX] = "5";
        }

    }
}

// var_dump($strArr);

$tmp = "";
foreach ($strArr as $key => $value) {
    $tmp .= sprintf("\"%s\",\n", $value);
}



function copy2clipboard($string){
    $descriptorspec = array(
        0 => array("pipe", "r"),  // stdin is a pipe that the child will read from
        1 => array("pipe", "w"),  // stdout is a pipe that the child will write to
         2 => array("pipe", "w"), // stderr is a file to write to
    );
    $process = proc_open('pbcopy', $descriptorspec, $pipes);
    if (is_resource($process)) {
        fwrite($pipes[0], $string);
        fclose($pipes[0]);
        fclose($pipes[1]);

        $return_value = proc_close($process);
        return $return_value;
    }
}

copy2clipboard($tmp);


// Pasteboard::set($tmp);

代码2：字母获取

getMask: function(touch) {
        var arr = [字母];

        var p = touchPos;
        var x = Math.floor(p.x / 8);
　　　　　　　//80是因为图片是左上角开始，而在 cocos 中的坐标是左下角开始，80是整个图片高度/8得到的数组长度
        var y = 80 - Math.floor(p.y / 8);
        if(y < 0 || x < 0 || y >= arr.length || x >= arr[y].length) {
            return "";
        }
        return arr[y].charAt(x);
    }