Duel: Episode One - Development Journal

DUEL

ADi g i t a l Fi c t i o nTh r i l l e r b yKa t ePu l l i n g e r &A n d yCa m p b e l l

DE V E L OPME NTJOURNAL

I NT RODUCT I ON AndyCampbel landKat ePul l i ngerhavebot hbeenwor ki ngi nt hef i el dofdi gi t alf i ct i onf ora numberofyear s.Af t ercommuni cat i ngonl i ne–Andygavesever alguestl ect ur esonan onl i neMApr ogr ammeoncr eat i vewr i t i ngandnewmedi at hatKat ehel pedsetup–t heymet f acet of acef ort hef i r stt i mei n2010.

Dur i ngt hi smeet i ng,t heyt al kedaboutt hepossi bi l i t yofwor ki ngt oget heronanewdi gi t al f i ct i onpr oj ect .Theyshar edi deasaboutcr eat i ngawor kt hatwoul dhaveabr oadpopul ar appeal .Theyagr eedt hatneweconomi cmodel sf ordi gi t alf i ct i onwer ebegi nni ngt oemer ge asmul t i medi af r i endl ydevi cespr ol i f er at e.But ,mostofal l ,t heyt al kedaboutt heexci t i ng possi bi l i t yofwor ki ngt oget her .

‘ Duel ’ mar kst hei rf i r stcol l abor at i on,andt hi sDevel opmentJour naldocument st hei r pr ogr ess.

1 STVI SUAL S

1 1 0 2 r e b m e c e D / r e b m e v o N

Pr e v i e ws c r e e n Duel’s initial image is a stock photo of a car which has toppled off-road. In the original, a man is standing beside it with a bollard. For the preview, he was removed, the contrast of the image was massively exaggerated and a demo of what the project might ‘feel like’ was created in Flash prior to attempting to build it in open source.

The original demos can be found at http://labs.dreamingmethods.com/duel/

N o t e s f r o mA n d y / Ka t e Thet i t l e‘ Duel ’emer gedt hef i r stt i meAndy andKat edi scussedt hi spr oj ect .Ther ear ea numberof‘ duel s’i nt hest or y,i ncl udi ngt hose bet weent hemai nchar act er s,mot herand son,Har r i etandJack,aswel lasbet ween t heset wochar act er sandt hei rassai l ant , MrPsycho.I nt hehi st or yofl i t er at ur e,t her e ar eanumberofwel l knownnovel sand st or i est i t l ed‘ Duel ’ ,and,ofcour se,St even Spi el ber g’ sf i r stmovi eshar est hi st i t l e.

Original title screen established at www.digitalfiction.co.uk. This is a domain name that Dreaming Methods has owned for over 12 years.

Jack.Jac k!W Putyours akeup.Si tup. eat bel tbackon. 

Pr e v i e wGr a p h i c s

The intention from the outset was to attempt to create layered ‘parallax’ media, a technique used in many Dreaming Methods projects. Here you can see foreground and background graphics, including text.

e. d, ngatm ei gchase eari n w s b e r e ’ r ’ You ch,we me. t nadi rei ngat We’ weari s e r ’ u o andy

BL OG S e t t i n gu pt h eBl o g We have decided to create a blog for the project and post to it monthly to report on how we’re getting on.

We’ve configured some webspace and installed WordPress - and obtained a rather nice template which will suit the project quite nicely. It allows full-screen images/videos in the background.

2 1 0 y2 r a u n a J N o t e s f r o mKa t e Att hesamet i measwor ki ngon‘ Duel ’ ,I ’ m al so wr i t i nganew novel ,‘ OurSt uf fandOurThi ngs’ .

Whi l e‘ Duel ’i sacompl et edi gi t alf i ct i ont hatcan st andoni t sown,i twi l lhaveadual( ha! )f unct i onf or meandmynovel ,i nt hati tcanal sober eadasa chapt eroft henovel :t wooft hemai nchar act er s f r om ‘ OurSt uf fandOurThi ngs’ ,Har r i et ,andher t eenagesonJack,ar eal somai nchar act er si nt he novel .Thi si ssomet hi ngI ’ m havi ngagr eatt i me expl or i nganddevel opi ng.

Co l l a b o r a t i v eS c r i p t We have evolved a way of working that sees us swapping a script back and forth containing proposed visuals, notes about the differences between device formats, and the actual dialogue/narrative of the work (written entirely by Kate).

This seems to be working well as a method of seing the project outlined as a whole - and we’re using the blog to swap notes and latest versions of the script. We’re up to v1.4 at the moment. Not sure what the script 2.0 will look like!

F X&EDI T I NG

2 1 0 y2 r a u r b e F Distortion-like video warping effects are achieved using a plugin called ‘Twitch’ available at low cost from Video Co-Pilot. Mid way through the coding of Chapter One, we’re wondering if these effects actually work or are really needed. But we’re leaving them in for the time being.

Each scene has worked out at approximately 15 seconds in length and has been broken down into various media elements as seen here.

T e x t o nt h es c r e e n S p e c i a l Ef f e c t s

Whenpr esent i ngt hei rwor kt ogener alaudi ences,

S p e c i a l Ef f e c t s

AndyandKat eof t engetaskedt hef ol l owi ng

Each ‘scene’ in Duel Chapter One has been manipulated using After Effects CS5. Here you can see the photograph of the crashed car (which was first cropped and adjusted in Photoshop) having had a mask applied to the top half and some computer-generated ‘cloud/mist’ super-imposed. Rain sequences (against black but with a ‘light’ mode applied) has then also been super-imposed. The video sequence is finally rendered out as a Quicktime movie at 720p.

quest i on:‘ Whatmakesyourwor kdi f f er entf r om f i l m?’Bot hwr i t er sar ei nt er est edi ncr eat i ngnew hybr i df or ms;f orbot h,t hei rpr i mar yi nt er esti n t her eal m ofdi gi t alf i ct i oni si nusi ngt ext combi nedot hermedi at of i ndnew wayst ot el l st or i es.Thought hei rwor khasaf f i ni t i eswi t hf i l m andl i t er ar yf i ct i on,t heyar eal soi nf l uencedby gamesandot hert r ansmedi apr oj ect s.Kat esays, ‘ Forme,t her e’ sawhol ewor l dofpot ent i alwhen i tcomest oput t i ngt extont hescr een.Asf aras

V i d e oEd i t i n g , A u d i oa n dTi m e l i n e To give Duel a dark and edgy feel, a colour wash is applied to all clips using ‘Look Suite’ software. Some of the clips prove harder to make consistent than others.

I ’ m concer ned,“Duel ”i sn’ taf i l m,i t ’ sl i t er at ur e. ’ Andysays,‘ Ther e’ sof t enasenseofdel i cacyand pr eci ousnessar oundwor dst hatsuggest st hey havet ost andal onet ohavepower .Idon’ tbel i eve t hat . ”

Here the video ‘segments’ are displayed at the top of the timeline and the audio at the bottom. So far ‘Duel’ has over 7 layers of audio in Chapter One. Some of it seems to get distorted in the final movie export.

EPI SODE#1

2 1 0 h2 c r a M / y r a u r b e F

F a s t v i d e oc o m p r e s s i o n We decided to use Miro Video Converter for quickly compressing Duel’s hefty video content. Miro is a free tool that provides drag and drop functionality for converting video clips to a number of open source formats.

No single video format is completely cross browser compatible yet, but the HTML5 video tag allows ‘fall back’ to any number of alternative formats. Duel has ben encoded to MP4, OGV and WEBM to try and cover all bases. http://www.mirovideoconverter.com/

Co l l a b o r a t i v eWo r k i n gOn S c r e e n Mar ch2012sawAndyandKat emeet i ngupi nper son t owor kt oget heront hepr oj ect .Dur i ngapr oduct i ve sessi on,t heyvi ewedt hef i r stt hr eemi nut esof chapt eronesever alt i mes,anddi scussedchanges t ot hevi deoandsoundef f ect s.AndygaveKat ea t ouroft hebackendoft hepr oj ect ,andt heyl ookedat t hecompl exl ayer sofsour cecodebehi ndt he chapt er .Toget heri nf r ontoft hecomput ermoni t or , t heyr eor derandedi t edt hevi deo,aswel las di scussi nghow t ocr eat et hef i nalsect i onoft he chapt er .

V i d e of e e d i n gi n t ot h es c r i p t We have decided to drop actual stills from the video into the script to trigger key text narratives. As the project evolves, these stills will hopefully be converted into ‘actual’ screenshots from each scene in the final work. The script also contains technical notes about the delivery of the work on each platform (divided into 3 - Desktop, Tablet, Phone.) It all looks very ambitious right now, but is rewarding and exciting to work on.

2 1 0 2 l i r p A

T ECHNOL OGI ES

Op e nS o u r c eA t I t s L i m i t s We’ve come a long way with the open source version of ‘Duel’ chapter one, but we’re not seeing great performance results as the layers of media ramp up. Even on the most powerful desktop computer, Duel has performance issues when combining parallax with video and text. It’s like HTML5 and Javascript just aren’t quite capable yet. It’s also painstakingly slow to work on and has synchronisation issues with the video and audio. We need to find another development solution!

N o t e s f r o mA n d y Fl a s hS t r i k e s Ba c k

I thasbecomecl eart hatt hesheeramountof medi awe’ r et r yi ngt ocombi neher e( event hough i nsomewaysi t ’ snotal lt hatmuchcompar edt o somegamesandappl i cat i ons! )woul dbebet t er sui t edt oadi f f er entdevel opmentmet hod.The f or t hcomi ngl aunchofAdobePr oduct i onSt udi o CS6haspr ompt edmet omakeanear l y,

We’ve gone full circle from the initial demos we made - back to the Flash Professional authoring environment, but this time with stacks of assets and a well-developed script to work with.

di scount edupgr adet oCS5.

5andopenedt he door st oexpor t i ngFl ashpr oj ect sasi OSand Andr oi dAppsvi aAdobeAI R.Af t eraf ew weeks ofscr ubbi ngupont hi s,Icanhappi l ysayt hat I ’ venow gotDuelr unni ngatqui t esomespeedon t hei Pad-waybeyondwhatwe’ vebeenabl et o achi evesof arwi t hopensour ce.Thi si sver y exci t i ngandwi l lr ampupourdevel opment pr ocessconsi der abl y.

We’ve decided to take all the assets out of the open source version of Duel and put them into a Flash project in the hope of exporting it as an iOS and Android App. This means we need to use ActionScript version 3 which Andy isn’t fluent with.

Working in Flash is like a breath of fresh air. The open source version has to be hand-coded; now we have timelines, visual tools and very fast compiling to see the results.

DEVEL OPMENT

2 1 0 t2 s u g u A / y l u J

S l o wg o i n g It’s the Summer Holidays, which means very little time can be allocated to Duel at the moment. However, Andy has partially re-edited the video sequence and Kate has partially re-written the script after having got the new ‘app’ prototype working on her iPad (hurray) a feat that Apple don’t make very easy. So there’s a lowlevel operation still happening here!

N o t e s f r o mA n d y I ’ mf i ndi ngt heconst antr epubl i shi ngandt est i ng ont hei Padvi aAI R-andt hent heendl essl y sl uggi shi Tunes-r eal l yt i r esomeandwonder i ng whet herImi ghtbebet t eri nvest i ngi nsomeki nd

N e wt i t l es c r e e na n i m a t i o n

ofl owcostAndr oi ddevi ce.Andr oi ddevel opment i sr epor t edl ymucheasi er .I ' m goi ngt oneed somet hi ngAndr oi df r i endl yanywayi fwe' r egoi ng t omaket hi st hi ngwor kcr osspl at f or m.Havi ng edi t edt hevi deodownconsi der abl y,t hepr oj ecti s now wei ghi ngi natamuchsmal l erf i l esi zet hani t waspr evi ousl y( ar ound20mbasopposedt o 30mb)whi chi shel pi ng.Ihavet empor ar i l y r emovedt her at herni cebutt r oubl esomeopeni ng scr eenI ' vedevel opedbecausei t ' ssl owi ngt hi ngs down,butwi l lkeept hegr aphi csonf i l e.

V i d e oa n ds c r i p t r e h a s h The rebvised script and re-edited video have finally come together and seem to work really well now. We've decided that the Mr Psycho view point shots don't really cut it - so they've been reversed (or rather, put back into normal motion) to represent Harriot and Jack's car tearing away from the muddy woodlands once it's escaped from its ditch.

We’ve built a short opening sequence for the title screen of the project which looks pretty good, but also consumes quite a bit of memory and seems to have some unexpected performance issues on the iPad.

This means Mr Psycho isn't really seen at all visually in this first section of the story, but merely hinted at in the text.

We've also cut out the view from the 'back window' in the second to last video sequence. There were a number of problems with this shot, not least the fact that it was confusing if you completed reading all of the bits of dialogue in the front-facing scene - the world was going forward, then suddenly it started going backwards. Which didn’t make any sense.

2 1 0 2 r e b m e t p e S

PROGRESS

Ge t t i n gi t r i g h t Although we’re getting pretty sick of the sight of this car crashed off-road now, we’re aware that the interface and general ‘feel’ of the work has to be pretty much right before we progress too far into the rest of the work. Time is ticking along and, like Harriet and Jack, we’re feeling frustrated and a bit ‘stuck in the mud’. Maybe it’s just the fall out from the summer holidays...

Harriet and Jack are now represented by significantly different fonts. There is also a sound when each bit of dialogue is clicked or touched (very subtle)and we’re working on a way to visually represent progression through each portion of the narrative. Not easy.

Duel can be viewed now in either landscape or portrait mode on Android. Portrait makes things a bit pokey however, so isn’t really recommended.

A brief experiment by Andy this month has resulted in progress in getting this 3D functionality ported across to Android - and thus potentially iOS as well - something he didn’t think would be possible at all. So that’s exciting. It’s also fast, and smooth, but lacking just one thing - the ability to actually move through 3D space! You can pan around using your fingers, but shifting through the 3D corridors at the moment is sadly, ah, impossible.

But blimey, 3D on mobile. Great.

Ex p e r i m e n t s i n3D

N o t e s f r o mA n d y

Early on when playing around with what we might be able to pull off with Duel and some of the future episodes, we developed a small mouse and keyboard interactive 3D ‘maze’ using WebGL technology and a software program called Coppercube

Thi smont hIdeci dedt ot aket hepl ungeand buyaNexus7-Googl e’ snew andver yl ow costAndr oi dt abl et .I t ’ sanamazi ngdevi ce.

Wi t hi n30mi nut esIhadDuelexpor t edasan Andr oi dappf r om AI Randr unni ngext r emel y wel l ,wi t hzer ogl i t chesandexcel l ent per f or mancespeed.Theappcanl i t er al l ybe dr aggedanddr oppedont ot hedevi ce, bef or ebei ngdoubl et appedont het ouch scr eenandi nst al l edi namat t erofseconds.

Thi si sar evel at i oni nt er msoft est i ng.My onl ysl i ghtwor r yi st hatt hi sdevi cehasa st r ongerpr ocessort hanmyi Pad,soImay endupover doi ngi tgr aphi cswi se.

Needt obecar ef ul .

T HEST ORY

2 1 0 2 r e b m e t p e S

N o t e s f r o mKa t e Du e l a n dt h eBi g g e r Pi c t u r e As well as some healthy progress on Duel, this month has seen the development of a new website for Kate which connects up the story of her characters across three different projects - showcasing them on a clean-looking, dedicated site.

Here you can see the banner from the website representing the prologue (Flight Paths, a networked novel developed by Kate with Chris Joseph), the main story (Kate's new novel) and the epilogue Duel itself.

I ’ vemadegoodpr ogr essonmynovel ,‘ Our St uf fandOurThi ngs’ ,t owhi ch‘ Duel ’i sa compani onpi ece,andI ’ m hopi ngi twi l lbe r eadyt oshow t opubl i sher ssomet i mesoon.

Ihaveashor tl i stofpubl i sher s(–i fonl yi t wasashor t l i st ,butno,i t ’ sashor tl i st )whoI know t obei nt er est edi ndi gi t ali nnovat i on beyondt heebook,andI ’ m hopi ngt hatI ’ l lbe abl et opi t cht hepr oj ect ,bot ht henoveland ‘ Duel ’ ,t ot hem.Ihavenoi deai fanyoneout t her ei npubl i shi ngl andwi l lbei nt er est edi n

(Below) A slightly earlier version of the website banner with heavier shadowing and graphics.

t hi spr oj ect ,orwhet herI ’ l lendupsel l i ngt he noveloni t sownt oapubl i sher ,andAndy andIwi l lmovef or war dwi t hpubl i shi ng ‘ Duel ’our sel ves.We’ l lsee.

I NT ERF ACE

2 1 0 2 r e b m e t p e S

A pause button has been added to the top right of the screen resulting in some strikingly odd stills where the video freezes mid-flow, yet the parallax remains active. An unexpected but rather nice effect. The pause screen also includes the abilty to return to the title page (reboot Duel, as it were).

We’ve also added an underlying bar indicator beneath the timer bar itself at the bottom of the screen to show - well, how much time there is left. When this wasn’t visible, it was hard to tell where the bar would end and the scene would flash across to the next one.

P a u s eb u t t o na n ds e t t i n g s We've just developed a pause button which has an interesting feel to it - it stops the audio/video stream but does not turn off the parallax. The resulting effect is a bit like “freezing time” but still allowing some weird Matrix-like movement.

We've finally also got the project to return to the title screen either when paused and an option selected, or when it reaches the end of the first half of Episode One. This doesn't seem like much really - but was actually pretty difficult to do!

Temporary title screen.

De s k t o pEd i t i o n A d o b eA I RUp d a t e d I I t ’ st he26t hSept emberandAdobeappeart o haver el easedanupdat et oAI R( ver si on3.

4) whi chal l owsi OSdevel opmentwi t hout havi ngt ogot hr oughi Tunesf ordepl oyment .

Thi si sgr eatf r om adevel opmentpoi ntof vi ew!AI R3.

4al soseemst ohavechanged t hewayt heAndr oi dver si onont heNexus di spl aysi t sel f ;al lofasuddent hewor kf i l l s We've built an extra layer for the desktop/installation edition of Duel which rotates moodily through a few screen captures from the work, with dark rain super-imposed and a haunting soundtrack.

t heent i r escr eenbydef aul t ,spanni ngout wel lbeyondt heconf i nesoft hest age.

F I NALSCENES

2 1 0 2 r e b o t Oc

S p l i t S c r e e n Two short sections of tracking footage will be used in this section - one taken from the One to One Collection (also used in one of Andy’s previous works, Nightingale’s

Playground, Part One, although in a completely different context!) and a time-

lapsed front-windscreen shot from a free stock video website. The idea is that one represents Harriet and her mental state, the other Jack and his thoughts. Both can be read in any order and at different speeds, but both need to be completed in order to progress.

HARRIET

Ch a n g eo fT o n e This whole section has a very different tone to the first 'chase' sequence. To get the video sequences to look dark, we've used Red Giant's Look Suite again and turned the footage almost monochrome in colour. The footage from the One to One Collection is quite old standard definition, which means it has a black borders down either side - these have turned out useful as they form the 'split' between both scenes in After Effects without any further processing having to be done.

For the moment we've obtained some audio of cars on a motorway from Freesound.org and combined this with some ambient backing noise from Video Co-pilot’s fantastic resource pack. There is sense of looping with the audio, but we're not sure that this matters too much, as the thoughts going on in Harriet and Jack's heads are pretty spiraling anyway. It might work well.

The script at this stage has become very text-heavy - both Harriet and Jack have a lot on their minds. The reader learns a lot about how they ended up in this situation.

JACK

F I NALSCENES

2 1 0 2 r e b o t Oc R e t u r no ft h ePs y c h o TThe very last scene in the episode sees the return of Mr Psycho from a rear/timelapse POV. Using some speeded up footage combined with a couple of zooming special effects, we’re hoping to make it look like the baddie vehicle is closing in. Although on the original footage, the vehicle looks pretty harmless...

Ohmygod,he’ sback.

S o u n d t r a c k For the return of the baddie we’ve used a repeat of the orchestral soundtrack used earlier in the piece. This comes in quickly with a swoosh and goes out with a cymbal clash - leaving a bit of ponderous black. The soundtrack and video were both edited in Premiere.

The original stock footage was very small and low-resolution. Using Adobe Premiere’s ‘Camera View’ filter we were able to magnify it by about 3-4 times. It looks grainy, but this suits the nature of the piece at the moment, and could easily be replaced with more high definition footage further down the line.

Z o o m i n gt h eBa d d i e There is of course no sense of being chased in the original stock footage - it’s just like someone stuck their camera out of the back window on a motorway and captured some random headlights. So in After Effects, we’ve been doing some sneaky zooming in/scaling. Mr Psycho doesn’t actually get any nearer, it’s a pseudo-camera in AE that does the zooming, but the whole sequence is so fast and cuts off so suddenly, hopefully it’ll work.

We’ve used a couple of ‘twitch’ effects in this sequence again to match the glitchy, unstable first half of the work.

www. d i g i t a l f i c t i o n . c o . u k