WatchKit开发的博客

同步新浪微博:@WatchKit开发

WatchKit Storyboard攻略(一)

目前的WatchKit只有用户界面的渲染是靠AppleWatch进行,本文的目的主要在于探索WatchKit界面部分的功能开发与小技巧,内容层次上偏基础。

我们现阶段能用到的WatchKit是不完全体,能定制的界面元素都在唯一的Storyboard文件里,但是仔细一看我们就发现,XCode6.2里Watch的Storyboard和iPhone里的完全是两码事,且可动态交互的内容极少。

但是也不要气馁,至少在界面元素的排版方面,比起iPhone用的传统Storyboard其实更加简便。

首先我们了解一下WatchApp的界面组成的基本概念。我们知道,WatchKit目前提供的三种Storyboard模板有WatchApp用的Main模板、瞥览的Glance模板与静态/动态通知模板。这里重点先看一下Main模板,其实它分为两个部分--标题栏与内容frame,对于42mm和38mm的Watch来说,其尺寸是有区别的,见图1与图2:

图1 42mmAppleWatch界面尺寸与分辨率


图2 38mmAppleWatch界面尺寸与分辨率


红色表示标题栏,我们目前唯一能做的似乎就是设定标题文本。


不过还好也可以通过在ViewController的代码里通过setTitle来动态改变标题内容,颜色也是可以通过Global Tint来改变的(见之前的翻译文章)。

黄色部分是我们可以真正掌控的部分,在ViewController的代码里可以通过contentFrame属性进行访问(小小的表盘被标题占用了那么多空间- -!)。


XCode里针对Storyboard剩余能设置的属性都是针对它的了!我们可以设置Background定义背景图,指定图的多种显示模式(默认都是ScaleToFill,好处后面说),并通过设置Animate为true来实现在背景上自动播放图片帧动画。Insets设置为Custom后可以设置视图上下左右留白的空间,默认值都是0。

下面就是本文重点部分了,还是以一个实际的应用场景讲一下更多控件元素的具体使用和排版技巧:

比如说我们要做一个手表程序的启动画面和菜单,构思如下图(程序名Logo部分应与顶部间距40px,与左右边缘需要保持间距20px,水平位置居中;2个菜单项宽度180px,也是水平居中,垂直方向与底部间距24px)。为了精致我为程序名和菜单会制作一些图片资源。但很快就意识到了麻烦,前面已经发现2种大小的AppleWatch分辨率是不同的,这意味着如果做两种设备的适配并保持此排版,图片通常思路下是需要2种尺寸的。



其实完全没有必要,使用WatchKit专用的Storyboard布局功能仅使用一套资源图片就可以轻松的解决统一排版问题,这也将减少图片传输带来的开销并节省Watch宝贵的存储空间。

我们新建一个项目并加好WathApp的target,打开Inteface.storyboard文件,在Main模板里设置InterfaceController的Insets为Custom并按如下设置边距。


这里要注意的是AppleWatch使用的是2倍像素密度图像资源,Top的值减去了标题栏的38像素。

再拖一个Group控件上去,作为主要界面元素的容器。设定其Size的Width和Height均为Relative to Container,系数保持缺省值1,效果立现。


Relative to Container的作用是设定控件的Width属性或Height属性占父容器的比例(1代表100%)。

把Group的Layout设置为Vertical垂直排列,再加3个Image上去代表logo和2个按钮。


先来看看logo,我们现在边界已经确定好,因此只要它宽度与Group保持一致就行,而不同的设备,用控件自带的Scale功能就好!高度它可以自己计算!


运行程序并分别选用42mm和38mm设备,发现logo图确实是在保证边距的情况下在38mm设备上缩小了。

本文的情景里对于菜单按钮要求有点区别,为保证用户能方便按到按钮,按钮大小是必须保证的。因此这里我们设置2个按钮Image的size为fixed width与fixed height并填好图片对应宽高,并设置Position位置为向底端对齐。

预览里已经可以看到效果了,如果要修改2个按钮之间的间隔,修改Group的spacing值就OK了。

运行2种设备比较一下:



现在这套方案还是很简单的,按42mm的大尺寸设计,依据需求灵活对属性进行设置选择缩放或者固定尺寸,并利用Group进行各种对齐等等,跟Html排版很类似。

先就说这么多吧,也没有太多体系化的东西。主要还是靠自己的应用场景去设计并调整实践才能有更好的心得体会。


[WatchKit开发]用帧动画做AppleWatch小游戏

     WatchKit已经发布了2天,先行者们已经进行了探索并发表了总览性的文章去帮助引导开发者。然而这一般本的WatchKit明确的显示了:1.AppleWatch设备不负责计算功能,而仅负责图像渲染;2.不支持iOS的传统CoreAnimation等动画形式。这两点对于希望在AppleWatch上开发小游戏的开发者几乎是断了其念头。但是对于我这个新入行的人来说,必须有坚持的精神(没钱又任性)才能更快速的前进,因此尝试了用已有手段去实现一个超mini小游戏。

      对WatchKit已经有所了解的话,会明白上述两个麻烦是可以解决的。对第一个问题,可以借助WatchKit Extension在iPhone上运算然后传输结果给Watch,但是这会造成延时。对于第二个问题,Apple提供的第一个CodeSample使用了帧动画,但这可能造成存储空间的浪费。但也许这些副作用对于小如AppleWatch的设备体验来说也是可以接受的,那么我们还是开始实践吧!

     我计划做一个这样的小游戏:屏幕左边是玩家,屏幕右边会出现怪物并往左移动,而我们要做的就是点击屏幕下方按钮控制玩家进行上下移动的切换来实现躲避怪物。

     首先建立一个testGame项目,并添加一个WatchApp的target
下一步的时候我们先选择Swift语言,生成了可以开发WatchKit的工程。

然后展开testGameWatchApp可以找到Inteface.storyboard


    大神们昨天的文章已经提到现在用代码是不能创建界面元素的。那么我们就在Inteface.storyboard里先拖几个图像上去试试,先拖了1个Image到MainInterfaceControllerScene上然后设定尺寸为背景大小作为背景图,然后我们再拖第2个Image叠上去想作为玩家,结果却自动变成了这样:


哎呀呀原来现在的Layout都是自动的,设置不了位置了啊- -!此路不通!

好吧,看了一下能用的UI对象,新的Group元素是可以设置背景图而且可以嵌套的,就像我们用Html做排版那样!

我们将图片帧的资源文件做好放到testGameWatchApp下,player0.png代表玩家在上方,player1.png代表玩家在下方;monster00.png~monster04.png代表怪物在上方的动作序列帧,monster10.png~monster14.png代表怪物在上方的动作序列帧。



我们再拖了1个Group做背景,2个Group嵌入其中分别代表玩家和怪物。背景Group的设置简化如下:


玩家的Group:


接下来是怪物的:


大家现在应该可以明白,我的思路就是每个Group代表不同的对象运动范围,通过小图片元素配透明底图,切换图片序列实现在不同位置的移动效果。

好了再加一个button,目前只有button等几个元素可以实现点击事件的处理。


除了背景图,在InterfaceController里全部建立IBOutlet。

   @IBOutletweakvar player: WKInterfaceGroup!

    @IBOutletweakvar monster: WKInterfaceGroup!

    @IBOutletweakvar btn: WKInterfaceButton!

添加控制变量的声明

    var pos:UInt32!=0//0表示玩家在上 1表示在下

    var i:UInt8=0//怪物的当前帧序列号

    var rand:UInt32!=arc4random() % 2//怪物出来的位置-0表示上 1表示在下

    let max:UInt8=4//撞到玩家的位置(常量)

然后写初始化函数里的代码,我们需要做一个定时器,每0.2秒通过执行自定义的update()函数更新怪物的位置并执行相关检测

    override init(context: AnyObject?) {

        super.init(context: context)

        var timer=NSTimer.scheduledTimerWithTimeInterval(0.2, target: self, selector: "update", userInfo: nil, repeats: true)

    }

update函数的代码

func update(){

 //检测位置

        ifi==max {

            ifpos==rand {

                NSLog("You die!")

            }

        }

        //更新怪物图像

        monster.setBackgroundImageNamed("monster\(rand)\(i).png")

        i++

        

        //未撞上,重置

        ifi>max {

            i=0

            rand=arc4random() % 2

        }

    }

将dodge按钮的SendAction拖到Controller里命名为dodge

@IBActionfunc dodge() {

        ifpos==0 {

         pos=1

        } else {

         pos=0   

        }

        //改变玩家的位置图像

        player.setBackgroundImageNamed("player\(pos).png")

    }

好了,现在运行!效果已出来,按dodge按钮可以上下移动躲避怪物,撞到后会在控制台打印“You died!”


模拟器上实测,按钮按下后动画效果有近1秒的延迟,这是因为图片是从iPhone传过来的。我们可以添加图片缓存来加速

我们先测试缓存玩家的2张图片,将图片的target membership设置一下:


然后在init函数里补充代码,

    let img0:UIImage=UIImage(named: "player0.png")!

    WKInterfaceDevice.currentDevice().addCachedImage(img0, name: "player0")

    let img1:UIImage=UIImage(named: "player1.png")!

    WKInterfaceDevice.currentDevice().addCachedImage(img1, name: "player1")

修改玩家的图像加载代码,再次运行,响应延迟降低为半秒。怪物图片的缓存这里就略过了。

我们再补充玩家死亡事件,添加新的interfacecontroller,并设置identifier



修改NSLog("You die!"为:

 //NSLog("You die!")

   self.presentControllerWithName("over", context:nil)

基本思路就介绍到这里,证明AppleWatch目前也是可以做点超简单小游戏的。若要做出更精美的效果,应该需要用到更多绘制图像的API,以后有机会再细述吧。