游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

分享零成本制作iPad游戏预告片的经验

发布时间:2013-07-18 12:21:01 Tags:,,,

作者:James Montgomerie

我们的游戏《Coolson’s Artisanal Chocolate Alphabet》已经发布近一个月。但愿本文是关于它的幕后制作的第一篇文章。我将在本文中介绍我们如何为游戏制作零成本的预告片。

背景

我们于7月中将游戏上传到苹果应用商店,希望能在一周左右的时间内通过审核。同时,我们知道需要准备好宣传和营销材料。最迫切的事是制作游戏网页。优秀的游戏网站上总是会放上精彩的预告片,目的是让玩家对游戏有一个大概的认识,进而刺激他们购买游戏。好的预告片也有助于树立口碑——人们可以把预告片发送给朋友或发表在Facebook或者Twitter上。

我们本可以只从模拟器中录制视频——这个方法对某些应用很管用(如iPhone应用《Eucalyptus》的视频给玩家带来一种“攻略”的感觉)。尽管对于《Coolson’s》,我们希望在真正的iPad上展示游戏——特别是它的二人通关模式。我们认为让不仅让玩家看到玩法很重要,看到美术设计和场景动画也是很重要的——至少对游戏的手绘、iPad上制作的风格留下印象。视频也需要一个让人过目不忘的卖点——这是以前没有做过的东西。

我们的想法是,预告片由用Cosmonaut触屏笔在iPad上画画的场面以及玩法视频组成。我们知道把头脑中的想法放进视频中需要在专业级的HD分辨率下拍摄真正的iPad。我们还需要高品质的屏幕录像。

以下是我们的做法。

iPad拍摄

Camera Recording(from gamasutra)

Camera Recording(from gamasutra)

首先,我们需要一部HD摄影机。我们应该借一部还是买一部?我们向朋友借了一部GoPro摄影机,性能不错,但鱼眼镜头有点不好。

看来可能用不了那部摄影机了。iPhones!也许我们可以使用手机。从上图中你可以看到我们如何摆放iPhone。我们把手机用松紧带绑在GorillaPod(游戏邦注:这是一种用于固定相机的三角设备),而后者又绑在一张放在桌上的板凳上。为了保证自然光充足,我们把这些“组合设施”放在大窗户旁边。

用iPhone 4S拍的视频很不错,但焦点和曝光不太稳定,特别是当Em在屏幕上画画时,她的手会在镜头前移进移出。我们希望事后再无缝地编辑视频,但不断变化的动作导致不可能无缝。可以借助应用吗?

我们尝试了几种应用,最后选定Camera Awesome。这款强大的应用允许用户在开始拍摄前分别设置焦点和曝光。只要用两根手指轻敲,再拖动曝光和焦点就行了——非常简单。最后一个变量是高度—-即使有了相当稳定的光源,我们也不得不在设置中手支调节亮度,并关闭自动亮度,以保持亮度稳定。

这个办法非常管用。我们拍出了好看的高清视频。正如我所说的,我们使用的是iPhone 4S。我猜如果是iPhone 5,效果应该会更好,而iPhone 4大概也能接受,因为光源很足。

屏幕录制

Screen Recording 2(from gamasutra)

Screen Recording 2(from gamasutra)

我们希望把完全屏幕的视频放进预告片中,用现场视频切换镜头。以前,为了获得应用的视频,我只是用Screenium记录模拟器,但我不能对《Coolson’s》采用相同的做法——我认为屏幕一次显示的内容太多了,不可能保持流畅。甚至从模拟器中录制,仍然很难用现场镜头切换。最好还是在iPad被使用时记录下来。

直接的解决办法是AirPlay——设置iPad在Mac上镜像AirPlay接收器。我们尝试了几种接收器应用,最终选择了Reflector——它甚至能够将AirPlay文件直接保存成QuickTime影片,节省了录制Mac屏幕的视频这一步。

我们的期望很高,但不幸的是,用这种办法录制视频还是遇到问题。一开始能工作得很好,但之后就不稳定了,或者声音和影像不步同。

我们有一点儿沮丧。我们发现把iPad和Mac移到更靠近Wi-Fi的地方大大改善了录制效果。这真是个好消息,但我们又遇到另一个问题:靠近Wi-Fi的地方太暗。我们不可能把设备移到那里,否则就不可能得到高品质的现场录像。

我们想到设置一个专门的Wi-Fi网络,与公寓楼的Wi-Fi区别开来,只用于iPad和Mac。Mac OS X的网络共享派上用场了。然而,它要求有一个共享网络连接,而我们的网络连接是来自公寓的Wi-Fi。真是无法克服的困境啊。

怎么办?在我们华而不实的拍摄组合中再加一部连接到笔记本的iPhone 5,通过网络共享来共享它的手机连接。这样,我们就能在iPad上使用Mac的网络共享了,也就是给Mac和iPad独立的Wi-Fi网络。

这个复杂的解决方案使我们有了超级稳定的AirPlay录像。

完整组合

为了得到这个复杂的拍摄组合,我们需要:

一部用于画画的iPad。

一部iPhone 4S,用松紧带绑到GorillaPod上,后者再绑到小凳子上, 小凳子放在桌上,。iPhone 4S的摄像头对准iPad。

一部MacBook Air放在中间。

一部iPhone 5。

将iPhone 4S连接到MacBook Air,以保证充足的电源。

将iPhone 5连接到MacBook Air,以便共享网络连接。

MacBook Air通过iPhone 5共享它的网络连接,又通过WiFi把网络共享给iPad。

iPhone 4S运行Camera Awesome,录制iPad上的活动。

MacBook Air运行Reflector,并把接收到的AirPlay视频保存到硬盘。

iPad镜像AirPlay到MacBook Air。

EmDrawing Coolsons Video(from gamasutra)

EmDrawing Coolsons Video(from gamasutra)

拍摄后的工作

用iPhone录制,然后把视频传送到笔记本电脑。然后就到了整合阶段了。

iMovie

我们考虑寻找视频编辑应用,但我们已经有了iMovie,所以我们就首先使用它了。除了一些不直观的UI,以及剪辑两个影像文件(我们遇到的是一个影像文件和一个屏幕拍摄文件)和将影像与音乐同步比较麻烦,其他都很好。Em又花了一天时间整合预告片,然后就大功告成了!

我们将视频以最高设置保存成H.264视频,因为考虑到我们的目标网站YouTube会压缩上传的视频。

创建YouTube帐号

如果你想与人分享视频,你最好把它放在YouTube上。所以,你需要一个YouTube频道。

好吧,这个很复杂!我们没有注意到,但我希望读者们已经做好耗费一些时间的准备!我无法想象有多少空Gmail帐号和未使用的Google Plus页面是由只想设置一个YouTube频道的人创建的——更别说有多少人必须使用个人Gmail帐号来运行他们所在公司的YouTube频道。

设置完频道和上传完视频后,我们把它连接到coolsons.com,在视频末尾添加iTunes商店的链接。

虽然我们抱怨设置太复杂,但一切都设置好后,我们仍然觉得使用YouTube是很不错的选择,因为确实很容易在网页中植入YouTube视频。

在coolsons.com网页上植入YouTube视频

与设置频道相反,这一步非常简单。感谢Google!它只是HTML中的一个内嵌框架标签。很容易让玩家使用URL参数来获取它。

完成!

这就是我们制作《Coolson’s》预告片的过程。我们对结果很满意。但愿我们的经历对身处同样情况的人有所启发。(本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转载,如需转载请联系:游戏邦

How We Made a Trailer For Our iPad Game With No Budget

by James Montgomerie

Coolson’s Artisanal Chocolate Alphabet, our iPad game, has been out for almost a month now.

This is the first of hopefully at least a couple ‘behind the scenes’ blog posts about its creation. This one’s about its trailer video, and how we made it on a budget of $01.

You can see the trailer on the Coolson’s web page.

Background

We submitted Coolson’s to the App Store in mid July, hoping it would be reviewed in a week or so, and knowing we’d need to have some publicity and marketing materials ready. The most pressing thing to do was create a web page. All the best game web pages have a great trailer in them, so that people can get an idea of how the game feels to play – and hopefully be enticed to buy it. A good trailer can also be great for word-of-mouth publicity – people can send it to friends or post it on Facebook or Twitter.

We could just have recorded screen video from the simulator – and for some apps this works great (for my iPhone app Eucalyptus2 it gives a great ‘walk-through’ feel to the video). For Coolson’s, though, we wanted to show the game on a real iPad – especially in its two-players-across-a-table mode. We also thought it was important that people see not only the gameplay3, but also see some of the artwork and cut scenes, and be left with at least an impression of the hand-drawn, made-on-iPad style. The video needed a memorable hook too – something that hadn’t been done before.

We came up with the idea you can see in the trailer – Em’s Cosmonaut-wielding Paper drawing interspersed with gameplay video. We knew that getting what we imagined from our heads into the video would necessitate good quality recording of a real iPad at professional looking HD resolution. We’d also need great quality screen recording.

Here’s how we did it.

Live-action iPad recording

We first tried to find an HD camera. Could we borrow one? Should we buy one? We tried a friend’s GoPro. It’s a great camera, but the fish-eye was bit too much.

We realised that we had supposedly-HD cameras just lying around. iPhones! Perhaps we could just use them? You can see the setup we came up with to try this idea out in the picture above. That’s an iPhone 4S elastic-banded to an GorillaPod, elastic-banded to a bench that’s sitting on a table. It’s set up next to a big window, for plenty of natural light.

The video recorded by the iPhone 4S was pretty good, but the focus and exposure kept changing, especially when Em drew on the screen and her hand moved in and out of shot. We wanted to be able to seamlessly edit the recorded video afterwards, and the constant change in appearance made that impossible. Could an app help?

We tried more than a few apps – and settled on Camera Awesome. It’s a great app that, importantly, lets you set focus and exposure separately, before beginning recording. Just tap with two
fingers, then drag the exposure and focus points around – easy. One last variable – even with pretty consistent light, we had to set the brightness manually in the Settings app, and turn off Auto-

Brightness to keep things stable.

This setup worked really well. We ended up with great looking, HD-resolution video. As I said, we used an iPhone 4S. I suspect an iPhone 5 would give even better quality video, and an iPhone 4 might even have been acceptable, since there’s so much light around.

Screen recording

We wanted to include full-screen video from the iPad in the trailer, intercut with the live-action video. Previously, I’ve just recorded the simulator with Screenium to get videos of apps, but I
couldn’t get a non-jerky video of Coolson’s – I think there’s just too much going on on-screen at once and the extra overhead of the recording means that it’s not possible for it to be smooth.

Even if recording from the simulator worked, it’d still be hard to intercut it with the live-action shots. It would be better to get a recording of the iPad as it was being used.

The obvious solution is AirPlay – set the iPad up to mirror to an AirPlay receiver app on the Mac. We tried a few receiver apps, and the one that came out on top was Reflector – it even has the ability to save the AirPlay stream direct to a QuickTime movie, cutting out the step of recording video of the Mac’s screen.

Our hopes were high, but unfortunately videos recorded this way proved very glitchy. It would work smoothly for a little while, then start being jerky, or the audio and video would get out of sync.

Crestfallen, we experimented a bit. We found that moving the iPad and the Mac closer to our Wi-Fi base station improved the situation dramatically – we got rock solid, smooth recording. This was great news, but presented another problem: the Wi-Fi base station, connected to the cable modem, was in another, much darker, part of the apartment. We couldn’t move the recording setup there and still get high quality live-action recording.

We had the idea to set up an ad-hoc Wi-Fi network, distinct from the apartment Wi-Fi, just for the iPad and Mac. Mac OS X’s Internet Sharing can do that. It’ll only do it, however, if there’s an
internet connection to share, and our internet connection was coming from the apartment Wi-Fi. Catch-22.

The solution? Add to our Heath Robinson recording setup an iPhone 5 connected to the laptop, sharing its mobile connection via tethering. This allowed us to share the tethered connection using the Mac’s Internet Sharing to the iPad, giving the Mac and iPad their own private Wi-Fi network.

This convoluted setup gave us super-stable AirPlay recording.

The Whole Setup

To go over the whole Rube Goldberg setup again, what we had in the end was:

An iPad being drawn on.

An iPhone 4S, elastic-banded to a GorillaPod, elastic-banded to a bench, sitting on a table, with its camera pointed at the iPad.

A MacBook Air in the middle.

An iPhone 5.

The iPhone 4S was connected to the MacBook Air, to keep its battery full.

The iPhone 5 was connected to the MacBook Air, sharing its internet connection via tethering.

The MacBook Air was sharing its internet connection (from the iPhone 5) with the iPad via WiFi.

The iPhone 4S was running Camera Awesome to record the activity on the iPad.

The MacBook Air was running Reflector, saving the received AirPlay video to disk.

The iPad was AirPlay mirroring to the MacBook Air.

Phew!

Here it is in action:

After Recording

A day of recording later – and a run of Image Capture to get the videos off of the iPhone – and we had a bunch of movies on the Mac. It was time to put the trailer together.

iMovie

We thought about looking for video editing apps, but we already had a copy of iMovie, so that was what we tried out first. With some caveats about some non-intuitive UI, especially around cutting between two camera streams (in our case, one camera stream and a screenshot stream), and around matching cuts to music, it turned out great. Em spent another day putting together the trailer, then it was ready to go!

We exported the video as H.264 with the highest quality settings, knowing that YouTube, where we planned to host it, would recompress it anyway.

Creating a YouTube Account

If you want people to share video, you really have to host it on YouTube. So you need a YouTube channel.

Wow, was getting one complicated! We didn’t take notes, I’m afraid, but I hope you’re ready for this to take some time! The process is byzantine. I can’t imagine how many empty Gmail accounts and unused Google Plus pages have been created ‘by mistake’ by people just trying to set up a YouTube channel – not to mention people how many people must be using personal Gmail accounts to run the YouTube channel of the company they work for.

After setting up the channel and uploading the video, we associated coolsons.com with it and set it up to allow monetization, so that we could add a link to the iTunes store at the end of the video (again, we didn’t keep any notes here, sorry!).

Having complained about the setup complications, after getting everything set up, YouTube is great in use, and it’s really easy to embed a YouTube video in a web page nowadays.

Embedding the YouTube Video on the coolsons.com Web Page

In contrast to setting up the channel, this was super-simple – thanks, Google! It’s just one iframe tag in the HTML. It’s easy to configure the player using URL parameters to get it to look and behave just the way you want it to. Full details are on Google’s page here.

Done!

That’s how we made the Coolson’s trailer. We’re really pleased with how it came out – I hope you like it too. I hope there’s some useful stuff there for others in a similar situation. To see it in-situ, take a look at coolsons.com.(source:gamasutra)

 


上一篇:

下一篇: