Sifteo_Cube 游戏开发

cf5b72a1ly1fkwol408zej20go09dt90.jpg

Sifteo Cubes 是 Sifteo 公司开发的一款益智类桌面游戏。其原型 Siftables 是由麻省理工实验室的 Merrill 和 Jeevan Kalanithi 等工程师开发的,该产品一经开发出来就被 TED 邀请演讲。在 2013 年被 3DR 公司收购后,
Sifteo Cubes 项目没有继续开发。

cf5b72a1ly1fkwol3jj65j20go0b4gm4.jpg

暑假时有幸参与到 Sifteo Cube 的游戏开发项目中,经过几天时间的摸索和了解,算是正式熟悉了开发环境和一些基本的开发流程(例如从来不被我重视的 Git 版本控制等技能)。期间浪费了不少时间和精力,好在目前越来越熟悉也逐渐步入正轨。接下来的一段时间我最定期更新跟进我的项目开发进度和学习总结。

迷宫游戏

我开发的第一款游戏是迷宫类的探险游戏,通过倾斜 Cube 来移动人物,除了要走出迷宫外,还可以吃金币来增加分数,还要躲避移动的怪兽。其中怪兽的移动部分,如果设计成横竖单方向移动,会显得整个游戏太过于死板,为了增加趣味性,怪兽必须要有多方位移动的路线。

整个迷宫的地图可以抽象成一个 16 * 16 的二维数组,每个位置的值代表不同的状态。

状态
0道路
1墙壁
2金币
3怪兽的移动路线
4怪兽的起点

为了方便开发,使用 Visual Basic 制作了一个迷宫地图生成工具,用来绘制地图并自动生成二维数组。

工具下载和使用方法请查看 Sifteo_Maze_Tool

cf5b72a1ly1fjskymaktoj20nd0g474i.jpg

“怪兽”的思考与分析

为了实现怪兽的多方位移动,二维数组中要有记录怪兽路线的数据,每一关加载地图时,可以通过这些标记来计算移动的位置。

同时也要设置一个怪兽的起点,起点位置的数据要和路线的数据区分开,每一条线路要有唯一的起点坐标,现在要做的,就是从起点位置开始寻着路线的标记方向做移动。

将怪兽的线路标记设置为 3 ,怪兽的起点标记设置为 4

接下来通过绘制工具,绘制一张地图:

cf5b72a1ly1fkwksp1p6ij20nd0g4tah.jpg

生成的代码如下:

int array_maze[16][16] = { 
                         {1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,},
                         {1,0,2,0,2,0,2,0,2,0,2,0,2,0,2,1,},
                         {1,0,1,1,1,1,1,1,1,1,1,1,1,1,0,1,},
                         {1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,},
                         {1,0,1,1,1,1,1,0,1,0,1,0,0,1,1,1,},
                         {1,0,1,0,0,0,0,0,1,0,1,0,0,0,0,1,},
                         {1,0,1,0,1,1,1,1,1,0,1,0,1,1,0,1,},
                         {1,0,1,0,1,3,3,3,0,0,1,0,1,1,0,1,},
                         {1,0,1,0,0,3,1,1,1,1,1,3,3,3,4,1,},
                         {1,0,1,1,1,3,1,0,0,0,0,3,1,1,0,1,},
                         {1,0,0,0,0,3,3,0,1,1,1,3,1,0,0,1,},
                         {1,0,1,1,1,1,3,1,3,3,3,3,1,0,0,1,},
                         {1,0,1,3,3,3,3,1,3,1,1,1,1,0,0,1,},
                         {1,0,1,3,1,1,1,3,3,1,0,0,0,0,0,1,},
                         {1,0,0,3,3,4,1,3,1,2,2,1,1,1,0,1,},
                         {1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,},
                         };

加载迷宫地图

现在以其中一条线路分析原理,其他部分暂时忽略掉:

cf5b72a1ly1fkwl76y5w0j20aw0aw3yw.jpg

粉色部分是怪兽的起点标记,红色部分是怪兽的行走路线。在加载地图时,标记怪兽路线的部分依旧填充道路的图片,线路不会在游戏的过程中显示。并统计当前地图共有多少条线路,以及每条线路的起点坐标。以下是加载地图的代码:

// 加载地图
void Load_maze_map() {
    unsigned int index = 0;
    for (unsigned i = 0; i <= 15; i++) {
        for (unsigned j = 0; j <= 15; j++) {
            if (array_maze[i][j] == 1)
                vid.bg0.image(vec(j, i), Background_b);
            if (array_maze[i][j] == 0)                     // 0 代表人物可移动的道路
                vid.bg0.image(vec(j, i), Background_w); // 填充道路的图片
            if (array_maze[i][j] == 3)                     // 3 代表怪兽的路线
                vid.bg0.image(vec(j, i), Background_w); // 怪兽路线依旧填充道路的图片
            if (array_maze[i][j] == 2 && maze_map_gold % 2 == 0)
                vid.bg0.image(vec(j,i), Background_g_1);
            if (array_maze[i][j] == 2 && maze_map_gold % 2 != 0)
                vid.bg0.image(vec(j,i), Background_g_0);
            if (array_maze[i][j] == 4) { 
                Load_mod(i, j, mon_number++); // 统计怪兽线路。判断每条线路的起点坐标。
            }    
        }
    }
    for (int i = 0; i < mon_number; i++)
        Load_move(i);
    LOG("game_time = %d\n", game_time(2));
    Tiles_move();
    System::paint();
}

判断起点方向

加载地图时,每检测到一个起点坐标,就调用判断方向函数,统计每条线路的起点坐标位置,并将每条线路的起点坐标作为怪兽图片第一次加载时的位置坐标。

改变二维数组的下标,分别检测上下左右四个方向是否有怪兽路线的标记 3 ,统计出每条线路起点位置的可移动方向。

游戏动画可以理解成帧的概念,每一帧都会有物体发生移动,起点坐标就是为了让加载怪兽第一帧时找到位置,所以当第一帧画面渲染完成后需要将起点标记 4 更改为 3 ,第二帧以后都不需要起点的坐标,并将起点也作为路线的一部分。

cf5b72a1ly1fkwl4wxq5pj20ay0az0t5.jpg

判断方向代码:

//判断方向
void Load_mod(int i, int j, int mod_number) {
    SpriteRef sbuf = vid.sprites[3];
    sbuf.setImage(Background_mon);
      // 统计每条线路的起点坐标
    load_array_move_i[mod_number] = i;    
    load_array_move_j[mod_number] = j;    
      // 将每条线路的起点坐标作为怪兽图片加载时的坐标
    load_mod_x[mod_number] = j;
    load_mod_y[mod_number] = i;
      // 计算出每条线路起点位置的可移动方向
    if (array_maze[i][j] == 4 ){    
          if (array_maze[i - 1][j] == 3) // 上 1
            load_mod_sum[mod_number] = 1;    
        if (array_maze[i + 1][j] == 3) // 下 2
            load_mod_sum[mod_number] = 2;        
          if (array_maze[i][j - 1] == 3) // 左 3
            load_mod_sum[mod_number] = 3;            
        if (array_maze[i][j + 1] == 3) // 右 4
            load_mod_sum[mod_number] = 4;            
    }
      // 将起点标记的 4 改为 3。
    array_maze[i][j] = 3;
}

按起点方向移动

Cube 的屏幕是 128 128 像素,为了方便,将其抽象成一个 16 16 的二维数组,数组的每个位置是由 8 * 8像素构成。

当怪兽移动到数组位置的正中央时都要进行一次方向检测。

cf5b72a1ly1fkwmwtur4xj20de05f0t0.jpg

cf5b72a1ly1fkwl4xh1sqj20ay0axdg9.jpg

按起点方向移动的代码:

// 按起点方向移动
void Load_move(int mod_number) {
    SpriteRef sbuf = vid.sprites[3 + mod_number];
    sbuf.setImage(Background_mon);
      // 判断每条线路移动的方向:上=1  下=2  左=3  右=4
    if (load_mod_sum[mod_number] == 1) {
          // 按方向做移动
        load_mod_move_i[mod_number] ++;
          // 每移动到一个格子正中央,做一次方向检测
        if (load_mod_move_i[mod_number] % 8 == 0) {
            Load_move_f(load_mod_move_i[mod_number]  / 8, mod_number);
        }
        load_mon_win(mod_number);
        sbuf.move(vec(load_array_move_j[mod_number]  * 8, 
        load_array_move_i[mod_number]  * 8 - load_mod_move_i[mod_number] ));    
    }
    if (load_mod_sum[mod_number]  == 2) {
        load_mod_move_i[mod_number] ++;
        if (load_mod_move_i[mod_number]  % 8 == 0) {
            Load_move_f(load_mod_move_i[mod_number]  / 8, mod_number);
        }
        load_mon_win(mod_number);
        sbuf.move(vec(load_array_move_j[mod_number]  * 8, 
        load_array_move_i[mod_number]  * 8 + load_mod_move_i[mod_number] ));    
    }
    if (load_mod_sum[mod_number]  == 3) {
        load_mod_move_j[mod_number] ++;
        if (load_mod_move_j[mod_number]  % 8 == 0) {
            Load_move_f(load_mod_move_j[mod_number]  / 8, mod_number);
        }
        load_mon_win(mod_number);
        sbuf.move(vec(load_array_move_j[mod_number]  * 8 - 
        load_mod_move_j[mod_number] , load_array_move_i[mod_number] * 8));    
    }
    if (load_mod_sum[mod_number]  == 4) {
        load_mod_move_j[mod_number] ++;
        if (load_mod_move_j[mod_number]  % 8 == 0) {
            Load_move_f(load_mod_move_j[mod_number]  / 8, mod_number);
        }
        load_mon_win(mod_number);
        sbuf.move(vec(load_array_move_j[mod_number]  * 8 + 
        load_mod_move_j[mod_number] , load_array_move_i[mod_number] * 8));    
    }
}

方向检测

当移动到数组正中央位置时,调用方向检测函数,检测接下来的移动位置。

先判断当前移动方向是否有线路标记,如果有则继续移动。

如果没有,先判断移动方向的两侧是否有标记,有则移动。

如果移动方向和两侧都没有线路标记,则掉头向后移动。

按照此方法,循环做检测。直到下一关重新加载地图。

cf5b72a1ly1fkwnpde0cnj20dp08laah.jpg

cf5b72a1ly1fkwl4yjoqhj20ax0ayaah.jpg

方向检测代码:

// 方向检测
int Load_move_f(int xy, int mod_number) {
      // 判断每条线路移动的方向:上=1  下=2  左=3  右=4
    if (load_mod_sum[mod_number] == 1) {
        unsigned int i = load_array_move_i[mod_number] - xy;
          // 检测当前移动方向上是否有标记,如果有则直接移动。如果没有检测移动方向的两侧是否有标记
        if (array_maze[i - 1][load_array_move_j[mod_number]] != 3) {
              // 检测移动方向的上面
            if (array_maze[i][load_array_move_j[mod_number] + 1] == 3) {
                load_mod_move_i[mod_number] = 0;
                load_array_move_i[mod_number] = i;
                load_mod_sum[mod_number] = 4;    
                return 0;
            }
              // 检测移动方向的下面
            if (array_maze[i][load_array_move_j[mod_number] - 1] == 3) {
                load_mod_move_i[mod_number] = 0;
                load_array_move_i[mod_number] = i;
                load_mod_sum[mod_number] = 3;        
                return 0;    
            }
              // 如果上下都没有,且移动方向上也没有标记,则掉头往回做移动。
            load_mod_move_i[mod_number] = 0;
            load_array_move_i[mod_number] = i;
            load_mod_sum[mod_number] = 2;        
        }
    }
    else if (load_mod_sum[mod_number]  == 2) {
        unsigned int i = load_array_move_i[mod_number] + xy;
        if (array_maze[i + 1][load_array_move_j[mod_number] ] != 3) {
            if (array_maze[i][load_array_move_j[mod_number]  + 1] == 3) {
                load_mod_move_i[mod_number]  = 0;
                load_array_move_i[mod_number]  = i;
                load_mod_sum[mod_number]  = 4;    
                return 0;
            }
            if (array_maze[i][load_array_move_j[mod_number]  - 1] == 3) {
                load_mod_move_i[mod_number]  = 0;
                load_array_move_i[mod_number]  = i;
                load_mod_sum[mod_number]  = 3;        
                return 0;    
            }
            load_mod_move_i[mod_number]  = 0;
            load_array_move_i[mod_number]  = i;
            load_mod_sum[mod_number]  = 1;        
        }
    }
    if (load_mod_sum[mod_number]  == 3) {
        unsigned int j = load_array_move_j[mod_number]  - xy;
        if (array_maze[load_array_move_i[mod_number] ][j - 1] != 3) {
            if (array_maze[load_array_move_i[mod_number]  + 1][j] == 3) {
                load_mod_move_j[mod_number]  = 0;
                load_array_move_j[mod_number]  = j;
                load_mod_sum[mod_number]  = 2;        
                return 0;    
            }
            if (array_maze[load_array_move_i[mod_number]  - 1][j] == 3) {
                load_mod_move_j[mod_number]  = 0;
                load_array_move_j[mod_number]  = j;
                load_mod_sum[mod_number]  = 1;        
                return 0;    
            }
            load_mod_move_j[mod_number]  = 0;
            load_array_move_j[mod_number]  = j;
            load_mod_sum[mod_number]  = 4;        
        }
    }
    else if (load_mod_sum[mod_number]  == 4) {
        unsigned int j = load_array_move_j[mod_number]  + xy;
        if (array_maze[load_array_move_i[mod_number] ][j + 1] != 3) {
            if (array_maze[load_array_move_i[mod_number]  + 1][j] == 3) {
                load_mod_move_j[mod_number]  = 0;
                load_array_move_j[mod_number]  = j;
                load_mod_sum[mod_number]  = 2;        
                return 0;    
            }
            if (array_maze[load_array_move_i[mod_number]  - 1][j] == 3) {
                load_mod_move_j[mod_number]  = 0;
                load_array_move_j[mod_number]  = j;
                load_mod_sum[mod_number]  = 1;        
                return 0;    
            }
            load_mod_move_j[mod_number]  = 0;
            load_array_move_j[mod_number]  = j;
            load_mod_sum[mod_number]  = 3;        
        }
    }
    return 0;
}

效果

来看看最后实现的效果:

cf5b72a1ly1fkwo50s7lsg209o08nk1s.gif

总结

通过地图绘制工具可以很方便的制作地图,最多可以绘制多达五条怪兽的移动路线,大大提高游戏的趣味性和难度的选择。

后续我还会更新其他游戏的实现算法和思考分析的过程,记录我在这个项目中学习到的内容,以及其他相关的知识。

由于我的能力有限,代码可能有些疏漏或不易理解,望各位海涵。

这个游戏虽然实现了基本的功能,仅仅是demo版本,但是代码过长,没有任何性能上的优化,其实也不是很了解代码优化,后续还有很大的改进空间。如果你对这个项目感兴趣,可以随时联系我,一起探讨和研究。也欢迎有兴趣的朋友去我们的官方论坛获取更多详细内容。

由于项目需要保密,完整代码暂时不会公布。

以上。

添加新评论