Link

首页

Tweet

书单

about me

Command

Category

AIR game (七)游戏的初始界面搭建


      又是好几天没有更新博客了,真的很对不住大家了!这些天比较忙,忙东忙西的。先来我们继续AIR游戏的编写。

      在一个游戏的开发过程中我们会遇到很多问题,尤其是界面部分,一个好的游戏,在用户体验上一定要做的有个性,非常优秀才可以。我们可以参照很多大公司的优秀案例来看一下。每个游戏都有不同的风格,我们来看看一些不错的案例!

      卡通风格——跑跑卡丁车

这个游戏的最大特点就是卡通风格,而且画面很清新很亮丽。给人一种非常可爱的感觉。

而且在一些画面的处理上用了很多大面积的纯色色块,这样就使得画面更加协调,2D和3D画面结合的非常协调。

 

 

 

 

 

 

 

 

 

 

 

        科幻风格——红色警戒


作为一款老牌的游戏,红色警戒给我们太多的回忆了。现在这个图片是红色警戒3的画面。从画面中我们可以看到很多科幻风格。玩家在游戏中可以体会到真实战争中的一些体验。比如,通讯,建筑等。这样,让玩家在一个环境体验中进行游戏。提高了游戏的体验度。

 

 

 

 

 

 

 

 

 

 

        写实风格——模拟人生

模拟人生这款游戏的写实程度已经是非常高的了。其实我们可以把它归为模拟经营类游戏,这类游戏的最大特掉就是写实。虚拟人生不仅仅在游戏题材上进行这样的一个概念的描述,而且在画面上也非常的逼真。所以玩家在游戏中会有身临其境的感觉。

 

 

 

 

 

 

 

 

 

 

 

        上面几款游戏大作我们就欣赏到这里吧。实际上在游戏开发初期,我们的界面还没有这样的成熟,需要后期喜欢并且调整。但是在制作前期我们一定找好我们的风格定位,到底属于哪种风格,需要哪些元素等等。可能一开始的界面感觉非常的糟糕,甚至说用户无法接受这样的游戏,但是没有关系,这仅仅是一个雏形。当一切都完善后都会有所改善的。下面我们来看一看我们这个《星际俄罗斯方块》的界面吧!这里只是一个界面的雏形,后期我们还有优化修改甚至是推翻,但是我们的定位就是“星际”。换句话说就是科幻,想《星球大战》那种感觉一样。

点击查看原图

可能大家觉得这样的界面非常的糟糕,首先我们需要进行一下定位。为什么初期的界面需要这样。

1、你的开发团队可能会很小,也许只有一两个人,而且没有专业的美工

2、你的整体游戏还没有搭建完成,所以现在你需要制作出大体的框架

3、你的部分功能可能还有待完善,现在的界面也许后期可能会被推翻

好了,至于如何出现这样的界面,我们需要进行一个顺序的设计,首先是界面如何出现,怎么出现,什么时候出现。我们来编写一个简单的流程图!

点击查看原图

      那么根据这样一个简单的流程图我们就可以开始程序的编写了!首先出现的是loading的界面,考虑到本地加载速度会非常的快,所以我们的loading最好制作成一个movie影片,后面的logo和说面也可以制作成一个简单的影片。不过这些简单的小影片都是通过程序来实现的。为了突出我们这套教程的主体内容,我们还是用淡出淡入的画面来制作动画!同时要注意的是,我们使用的是新版的flashplayer11,AIR3。在程序运行的时候我们会调用GPU加速,所以我们会选择starliing这个引擎。

      我们将这些个过渡动画全部编写为单独的类,下面我就通过片头类来看一下程序如何编写吧!

我们把片头动画自定义为一个类,这个类的名称就叫做TitlesAnimation。表示开始特效!

其中logo和说面等画面我们已经作为资源文件进行了加载,关于资源文件加载引擎部分大家可以去看我的上一篇文章AIR game (六) 资源管理模块

      这里我就将关键代码贴出来,其实也非常的简单。代码中都包含注释,所以不做过多的讲解!

/**
         * 加载图片
         *
         */
        private function init():void
        {
            this.imageVec.push(ResManage.getImage("logoscene") );
            this.imageVec.push(ResManage.getImage("gameinfoscene") );
            this.imageVec.push(ResManage.getImage("state") );
           
            animation();
           
        }
       
        private function animation():void
        {
           
            this.imageVec[this.now_pic_index].alpha = 0;
            this.addChild( this.imageVec[this.now_pic_index]);
            //
            var t:Tween = new Tween(this.imageVec[this.now_pic_index],2);
           
            t.onComplete = showOver;
            t.fadeTo(1);
            Starling.juggler.add(t);
        }
       
        private function showOver():void
        {
            var t:Tween = new Tween(this.imageVec[this.now_pic_index],2);
            t.onComplete = disOver;
            t.delay = 1;
            t.fadeTo(0);
            Starling.juggler.add(t);
        }
        private function disOver():void
        {
            this.removeChild(this.imageVec[this.now_pic_index]);
            this.now_pic_index++;
            if(this.now_pic_index!=3)
            {
                this.animation();
            }
            else
            {
                var movieevents:AnimationEvents = new AnimationEvents(AnimationEvents.ANIMATION_OVER);
                this.dispatchEvent(movieevents);
                movieevents = null;
            }

        }

 

 

      OK!关于画面初期架设的问题我们先暂时探讨到这里,有问题或者想交流的朋友欢迎给我发e-mail或者直接留言哈~!