仓酷云

标题: IOS设计怎样开辟优异的HTML5游戏？-迪斯尼《寻觅奥兹之路》游戏手艺详解（一）仓酷云 ... [打印本页]

作者: 不帅 时间: 2015-1-18 11:39
标题: IOS设计怎样开辟优异的HTML5游戏？-迪斯尼《寻觅奥兹之路》游戏手艺详解（一）仓酷云 ...
用代码控制view意思他们玩的都是高科技IB都是垃圾很多人也纠结到底用不用IB的确很多时候IB灵活度不行但是不需要灵活度的时候还不用IB那不是装X吗要是没人用苹果还开发IB干嘛早去掉了IB在很多时候节省很多工作量UINavigationController再说说NavigationController刚接触开发的时候不明白View和View之间怎么切换的媒介
迪斯尼《FindYourWaytoOZ》这个切近地气的游戏我在最新一期《程序员》杂志的《从HTML5挪动使用近况谈开展趋向》这篇文章里有所说起，它借用了近期上映的《魔境仙踪》影戏的设定（设定来自于典范故事《绿野仙踪》，看过这个影戏的同砚们会深有感到），构建了一个同等的宏壮游戏天下。同时迪斯尼又和谷歌互助，把它作为Chrome扫瞄器功能和HTML5手艺的一个showcase。关于如许一个利用了WebGL3D、摄像头、3D音效等多种先辈手艺、撑持桌面和挪动端、品德杰出的HTML5游戏，懂得它面前的完成道理和技能一定关于我们来讲有着十分伟大的参考意义。

<br>
这篇文章我早就想翻译出来，匡助人人更好的懂得HTML5在游戏开辟里的使用和外洋的使用情形，可是这篇文章其实太长，以是只能分次刊载，以飨读者。
此教程在我近期HTML5先容的文章中难度可称初级，合适有必定履历的开辟者浏览和进修。
先容
“寻觅奥兹之路”是迪斯尼为谷歌Chrome带来的全新体验。它让你在互动的路程中穿越堪萨斯马戏团，然后经由过程一个伟大的风暴抵达奥兹王国。

<br>
我们的方针是分离扫瞄器的手艺才能，以创立一种充斥兴趣、设身处地的体验，用户能够与影戏之间构成一个壮大的接洽。
这个游戏的事情其实是太复杂，以是我们只能列出一些章节，把我们以为风趣的手艺故事写出来。教程的难度跟着进度会渐渐增添。
我们有良多人勉力事情来创立更好的体验，可是太多没法逐一枚举。请会见该网站，体验全部页面下的完全故事。
预览
在PC端《寻觅奥兹之路》是一个丰厚的设身处地的天下。我们把3D和传统的影戏制造灵感分离起来，制造一个好几层的靠近实际的场景效果。个中最凸起的手艺是用Three.js引进WebGL，利用CSS3特征来定制着色器和DOM动画元素。除此以外，getUserMediaAPI（WebRTC）加强了互动体验，同意用户间接从摄像头增加本人的抽象，和WebAudio带来了3D音效。
可是这类手艺体验的奇妙的地方在于它们是怎样交融为一体的。这也是面对的次要应战之一：怎样把视觉效果和互动元素交融在一同来创立一个分歧的场景？这类视觉的庞大性十分难以办理：很难说分明我们在任何一个工夫必要开辟甚么场景。
为懂得决视觉效果和优化这一成绩，我们大批利用了一个把持面板，用于捕捉我们正在反省的谁人工夫点的一切相干设置。在扫瞄器中能够及时修改场景中的统统，比方亮度，纵向深度，伽玛线等等。任何人都能够在体验中实验调剂主要参数的值，介入并发明甚么效果最好。
在分享我们的奥密之前，我要提示你，它大概会招致溃散。确保你没有正在扫瞄甚么主要的工具，而且在会见该网站的网址时增加?debug=on。守候网站加载，一旦你进进后按Ctrl+I键，会看到右手边呈现一个下拉菜单。假如作废选中“加入相机路径”选项，你可使用A、W、S、D键和鼠标在空间中自在的挪动。

<br>
我们不会胪陈这里的一切设置，可是我们勉励你实验：按键显现分歧的场景中分歧的设置。在最初的风暴场景中有一组分外的按键：Ctrl+A，能够切换播放的动画。在这个场景中，假如你按Esc（加入鼠标锁定功效），再次按下Ctrl+I键能够进进风暴场景的特别设置。看看周围，而且截取一些像上面如许的大度明信片。

<br>
要做到这一点以确保其对我们的需求具有充足的天真性，我们接纳了一个很棒的名为dat.gui的框架（能够在这里看看已往关于怎样利用它的教程）。它同意我们可以敏捷改动表露给旅客的设置。
有点像绘景
很多典范的迪士尼影戏和动画创立场景意味着兼并分歧的层。有内景层、单位动画层，和物理设置层和经由过程玻璃绘画取得的顶层：这类手艺称为绘景。
在很多方面我们制造的体验的布局是类似的，即便有些“层”远远凌驾了静态的视觉效果。现实上，它们依据更加庞大的盘算影响事物看起来的体例。但是，最少在年夜画面的程度，我们处置视图，将一个分解到别的一个之上合。在顶部，你看到一个UI层，其下是3D场景：它由分歧的场景组件构成。
顶部接口层利用DOM和CSS3创立。事务通讯利用Backbone路由器+onHashChangeHTML5事务来把持哪块地区呼应动画。（项目源代码：/develop/coffee/router/Router.coffee）。
教程：Sprite表和视网膜撑持
我们依附一种风趣的优化手艺，把多个接口层图象兼并为一张独自的PNG来削减服务器哀求。在这个项目中，接口由多于70张的图象构成（不包含3D纹理），而且全体预加载以削减网站延迟。你能够在这里看到最新的Sprite表：
一般显现-http://findyourwaytooz.com/img/home/interface_1x.png
Retina显现屏-http://findyourwaytooz.com/img/home/interface_2x.png
上面是我们怎样发扬Sprite表上风的一些技能，在视网膜设备上怎样利用它们，和怎样将接口尽量设置的简便而划一。
创立Sprite表
我们利用TexturePacker来创立任何你必要的Sprite表格局。在这类情形下，我们接纳EaselJS，它十分整齐，而且能够用于创立动画Sprite。
利用天生的Sprite表
一旦创立了Sprite表，你应当看到如许的一个JSON文件：
[html]

{
"images":["interface_2x.png"],
"frames":[
[2,1837,88,130],
[2,2,1472,112],
[1008,774,70,68],
[562,1960,86,86],
[473,1960,86,86]
],
"animations":{
"allow_web":[0],
"bottomheader":[1],
"button_close":[2],
"button_facebook":[3],
"button_google":[4]
},
}

个中：

images指向sprite表的地点
frames是每一个UI元素的坐标[x,y,width,height]
animations是每项内容的称号

请注重，我们已利用了高清图象来创立Sprite表，然后我们只需经由过程调剂图象尺寸为一半来创立一般版本。
交融统统
如今，我们只必要一段Javascript代码来利用它。

[/code][b][html][/b]
[list=1]
[*]varSSAsset=function(asset,div){
[*]varcss,x,y,w,h;
[*]
[*]//Dividethecoordinatesby2asretinadeviceshave2xdensity
[*]x=Math.round(asset.x/2);
[*]y=Math.round(asset.y/2);
[*]w=Math.round(asset.width/2);
[*]h=Math.round(asset.height/2);
[*]
[*]//CreateanObjecttostoreCSSattributes
[*]css={
[*]width:w,
[*]height:h,
[*]background-image:"url("+asset.image_1x_url+")",
[*]background-size:""+asset.fullSize[0]+"px"+asset.fullSize[1]+"px",
[*]background-position:"-"+x+"px-"+y+"px"
[*]};
[*]
[*]//Ifretinadevices
[*]
[*]if(window.devicePixelRatio===2){
[*]
[*]/*
[*]set-webkit-image-set
[*]for1xand2x
[*]AllthecalculationsofX,Y,WIDTHandHEIGHTistakencarebythebrowser
[*]*/
[*]
[*]css[background-image]="-webkit-image-set(url("+asset.image_1x_url+")1x,";
[*]css[background-image]+="url("+asset.image_2x_url+")2x)";
[*]
[*]}
[*]
[*]//SettheCSStotheDIV
[*]div.css(css);
[*]};
[/list]
这是你怎样利用它的代码：
[code]

复制代码

[html]viewplaincopy

logo=newSSAsset(
{
fullSize:[1024,1024],//image1xdimensionsArray[x,y]
x:1790,//assetxcoordinateonSpriteSheet
y:603,//assetycoordinateonSpriteSheet
width:122,//assetwidth
height:150,//assetheight
image_1x_url:img/spritesheet_1x.png,//backgroundimage1xURL
image_2x_url:img/spritesheet_2x.png//backgroundimage2xURL
},$(#logo));

在这里下载完全的示例
假如要多懂得一些可变像素密度，你能够看看BorisSMUS的这篇文章。
3D内容管道
情况体验创建在WebGL层之上。当你想到一个3D场景，最辣手的成绩之一是要怎样确保你从建模，动画和殊效这些范畴都能够创立最富有体现潜力的内容。从很多方面来讲，这个成绩的中心是内容管道：用一个定好的程序从3D场景来创立内容。
我们想制造一个使人奋发的天下，以是必要一个牢靠的历程匡助3D艺术家来创立它。他们将必要赐与他们的三维建模和动画软件尽量多的表达自在，而我们将必要经由过程代码将它们出现在屏幕上。
我们在这类成绩上已事情了一段工夫，由于已往每次我们创立了一个3D网站，以是发明之前利用工具的一些限定。厥后我们制造了这个被称为3DLibrarian的工具，正筹办要把它使用到真实的事情上。
这个工具有一些汗青：它最后是为了Flash出生的，它会同意你把一个年夜的Maya场景作为一个单一的紧缩文件为拆包运转时举行优化。这是最优的缘故原由是由于它无效的把场景包装为基础不异的数据布局，在衬着和动画时举行操纵。如许在文件加载时只必要做很少的剖析。Flash中的解包速率十分快，由于文件是AMF格局，Flash可以原生解压。在WebGL中利用不异的格局，必要CPU多做一些事情。现实上，我们不能不从头创立一个解压数据JavaScript代码层，这基础上会将这些文件解压，偏重新创立WebGL所需的数据布局。解压全部3D场景是对CPU有一些包袱：解包游戏的场景1在中高端机上必要约2秒钟。以是为此我们在“场景设置”工夫（实践上是场景呈现之前）用WebWorkers手艺来完成，以是不会影响用户的体验。
这个便利的工具能够导进3D场景：模子、纹理和骨骼动画。你能够创立一个单一的库文件，它稍后能被3D引擎所载进。

除了在程序加载的时候把我的view加载到他上目前我还没用到过其他的苹果一直很推崇MVC的程序结构视图模型控制器简单说就是视图负责显示内容模型负责所有数据的保存结构或者一些其他数据操作控制器是用来协调视图和模型举车的发动机系统的例子

作者: 柔情似水 时间: 2015-1-20 12:56
从C语言入门，因为IOS开发用的是OC语言，是在C基础上的，不过也跟C不是很搭界，你可以直接学习OC语言也可以，

作者: 小魔女 时间: 2015-1-24 12:11
自从苹果公司开放iOS SDK以来，大量的国内外的软件开发者将关注的目光聚集在苹果的iOS平台上。由于iPhone和iPad自一出现就给人带来了颠覆性的感觉

作者: 只想知道 时间: 2015-2-1 10:18
在此，某不才愿将安装成功的Mac OS X系统的vmware虚拟机向有志学习iOS开发的各位学友们免费开放出来，经测试，可以在WindowsXP/Win7系统上完美运行，即便你的机器只有2GB内存。

作者: 深爱那片海 时间: 2015-2-7 03:25
以上可以同时进行，学习过程中尽量不要纠结细节和底层，要知道ios是封闭的、OC是高级语言，我们不可能过多地去了解它的原理，至少在新手阶段没有必要。用迭代的方式更新你的知识，而不是死抠一个知识点。

作者: 金色的骷髅 时间: 2015-2-8 19:42
其次学习方法和学习心态很重要，在学习当中应该保持一颗良好的心态。应该借鉴别人好的学习方法，大家互相帮助，取长补短。

作者: 简单生活 时间: 2015-2-22 20:22
从C语言入门，因为IOS开发用的是OC语言，是在C基础上的，不过也跟C不是很搭界，你可以直接学习OC语言也可以，

作者: 老尸 时间: 2015-2-22 20:58
培训时可以选择安卓，iOS，Java，因为实习的时候我选了安卓，当时实习时间只有三周，学的晕头转向，而java我也没学过，iOS的基础是C语言，这个大学里还是学过的，于是选择了iOS。

作者: 蒙在股里 时间: 2015-3-5 00:30
AD： iPhone文件系统NSFileManager讲解是本文要介绍的内容，主要是通过iphone文件系统来学习NSFileManager的使用方法，具体内容来看本文详解。

作者: 冷月葬花魂 时间: 2015-3-6 17:05
学习ios没什么捷径，关键在于多动手敲，曾看到前辈开玩笑说怎么快速学会某技术，答案是：“提高打字速度，快点写代码就能快点学会了”。

作者: 愤怒的大鸟 时间: 2015-3-7 00:09
中国如今已然发展成为一个软件大国，软件人才的数量跃居全球之首。当然，在苹果平台的开发领域，也保持了相当强劲的发展势头。然而，很多初入iOS开发门槛的开发者，

作者: 小妖女 时间: 2015-3-10 18:11
我也从简单的状态栏适配开始，先研究了下关于状态栏的适配，特总结如下，供广大网友一起讨论交流。

作者: 海妖 时间: 2015-3-11 19:57
down下code4app网站的每个分类的代码挨着看

作者: 再见西城 时间: 2015-3-11 22:59
众多研发人员积极参与到iOS平台的开发中来也就不足为奇了。

作者: 若天明 时间: 2015-3-15 01:14
培训时可以选择安卓，iOS，Java，因为实习的时候我选了安卓，当时实习时间只有三周，学的晕头转向，而java我也没学过，iOS的基础是C语言，这个大学里还是学过的，于是选择了iOS。

作者: 透明 时间: 2015-3-17 07:10
iPhone文件系统：创建、重命名以及删除文件，NSFileManager中包含了用来查询单词库目录、创建、重命名、删除目录以及获取/设置文件属性的方法（可读性，可编写性等等）。

作者: 变相怪杰 时间: 2015-3-27 08:09
重要的是，放眼全球也的确找不到第二个如苹果iOS平台这样健壮、完整、先进而且为开发者带来真实收益的开发平台来。

作者: 乐观 时间: 2015-4-7 19:36
有办法利用自己手头的电脑立刻开始这个美妙旅程的。

作者: 兰色精灵 时间: 2015-4-13 19:05
在此，某不才愿将安装成功的Mac OS X系统的vmware虚拟机向有志学习iOS开发的各位学友们免费开放出来，经测试，可以在WindowsXP/Win7系统上完美运行，即便你的机器只有2GB内存。

作者: 再现理想 时间: 2015-4-17 22:09
重要的是，放眼全球也的确找不到第二个如苹果iOS平台这样健壮、完整、先进而且为开发者带来真实收益的开发平台来。

欢迎光临仓酷云 (http://ckuyun.com/)