import{t as f,l as y,o as s,c as u,a as e,F as g,J as _,k as t,f as m,w as i,E as b,H as v,b as a,i as k,d as w,e as I}from"../chunks/chunk-B6X1IyzH.js";import{C as z,_ as S,a as V}from"../chunks/chunk-CIy362Nd.js";import{C as l}from"../chunks/chunk-BhivZ3KV.js";import"../chunks/chunk-BiXZZjxD.js";import"../chunks/chunk-DvJ0CJYz.js";import"../chunks/chunk-B61HtB8z.js";import"../chunks/chunk-B0IABKug.js";import"../chunks/chunk-4EZ9MtAH.js";const P=["width","height","poster"],x=["data-src","type"],h={__name:"LazyVideo",props:{caption:String,poster:String,width:{type:String,default:"768"},height:{type:String,default:"auto"},sources:{type:Array,default:()=>[]}},setup(n){const d=f(null);return y(()=>{const r=new IntersectionObserver(p=>{p.forEach(o=>{if(o.isIntersecting){for(let c of o.target.children)c.tagName==="SOURCE"&&(c.src=c.dataset.src);o.target.load(),o.target.classList.remove("lazy"),r.unobserve(o.target)}})});r.observe(d.value)}),(r,p)=>(s(),u(g,null,[e("video",{ref_key:"videoElem",ref:d,class:"lazy !mb-0",autoplay:"",muted:"",loop:"",playsinline:"",width:n.width,height:n.height,poster:n.poster},[(s(!0),u(g,null,_(n.sources,o=>(s(),u("source",{key:o.src,"data-src":o.src,type:o.type},null,8,x))),128)),t(" Your browser does not support the video tag. ")],8,P),n.caption?(s(),m(z,{key:0},{default:i(()=>[t(b(n.caption),1)]),_:1})):v("",!0)],64))}},C=e("p",null,[t(" When I began developing the level for "),e("a",{href:"/in-a-plaza-darkly"},"In a Plaza Darkly"),t(`, I knew I wanted it to be visually darker than what I've done previously. After all, it says "darkly" right there in the title. `)],-1),E=e("p",null," Darker, yes, but also colorful — this wasn't going to be some shadowy survival horror game. It needed to also keep the neon look of the other levels. ",-1),T=e("p",null,[t(" Back when I was working on "),e("a",{href:"/atomize"},"Atomize"),t(", I stumbled on the Tilt Shift effect in "),e("a",{target:"_blank",href:"https://github.com/pmndrs/postprocessing"},"pmndrs/postprocessing"),t(", and ended up using it for the whole level. But not in the normal way. ")],-1),N=e("p",null,[t(" As you may know, normally a "),e("a",{target:"_blank",href:"https://en.wikipedia.org/wiki/Tilt%E2%80%93shift_photography"},"tilt shift"),t(" effect blurs a portion of the top and bottom of an image, fading to an unblurred section around the middle. It can be used to mimic the look of small-scale, miniature photography. ")],-1),B=e("p",null,[t(" But things get really interesting when you play around with the blend mode options pmndrs/postprocessing gives you. On Atomize, I used "),e("code",null,"color dodge"),t(" to give deeper shadows and a slight haze to the scene. Towards the end of the song, I switch to "),e("code",null,"linear light"),t(" to give the ending a super saturated, neon feel. In both cases the opacity of the effect was set to 50%. ")],-1),j=e("p",null,[t(" Early in development of In a Plaza Darkly, I set the blend mode to "),e("code",null,"color burn"),t(" and raised the opacity to 75%. Things got dark. But colors still stood out. ")],-1),A=e("p",null,[t(" More interestingly - the blending gives darker areas of the screen a ghostly aura, almost a chiaroscuro. Notice how the edges of the trees darken the lighter parts of the sky. It's almost like a drunken "),e("a",{target:"_blank",href:"https://en.wikipedia.org/wiki/Ambient_occlusion"},"ambient occlusion"),t(". ")],-1),F=e("p",null,[t(" It also reminds me of practical effects found in movies from the 1970s and 1980s, where compositing gave layered objects a slightly blurry, dark halo. Look at the edges of the composited Necronomicon as it moves over the background layer in this clip from the opening of "),e("em",null,"Evil Dead 2"),t(", and compare to the aura surrounding the cube precipitation: ")],-1),D={class:"flex"},O=e("p",null,[t(" There are lots of other applications for this method — pmndrs/postprocessing lists dozens of different blend modes. If you want to play around with my level and try different blend modes, load it up with the "),e("a",{href:"/in-a-plaza-darkly#debug"},"#debug hashtag"),t("! Click the "),e("code",null,"Controls"),t(" panel in the top right and scroll down to the "),e("code",null,"Tilt Shift"),t(" panel to expand it. You can select a different "),e("code",null,"blendFunction"),t(" and slide around the "),e("code",null,"opacity"),t(" setting. ")],-1),L=e("p",null," Bonus: you get to see how convoluted and messy my debug panel is while I'm building a level. ",-1),$={__name:"+Page",setup(n){return(d,r)=>(s(),m(S,null,{default:i(()=>[a(h,{sources:[{src:"https://d1pbiarvv41xds.cloudfront.net/color-burn.mp4",type:"video/mp4"}],poster:"/images/blog/tilt-shift/poster.jpg",caption:"Fading the color burn in and out"}),a(l,null,{default:i(()=>[C,E,T,N,B]),_:1}),a(h,{sources:[{src:"https://d1pbiarvv41xds.cloudfront.net/atomize-clip-soar.mp4",type:"video/mp4"}],caption:"Linear light blending"}),a(l,null,{default:i(()=>[j,A]),_:1}),a(V,{image:"/images/blog/tilt-shift/burn.jpg"},{default:i(()=>[t("Dark objects seem to bleed into the red sky")]),_:1}),a(l,null,{default:i(()=>[F]),_:1}),e("div",D,[a(h,{sources:[{src:"/images/blog/tilt-shift/necronomicon.mp4",type:"video/mp4"}]})]),a(l,null,{default:i(()=>[O,L]),_:1})]),_:1}))}},R=Object.freeze(Object.defineProperty({__proto__:null,default:$},Symbol.toStringTag,{value:"Module"})),K=[{configName:"onPageTransitionEnd",importPath:"/src/renderer/+onPageTransitionEnd.js",isValueFile:!0,exportValues:k},{configName:"onPageTransitionStart",importPath:"/src/renderer/+onPageTransitionStart.js",isValueFile:!0,exportValues:w},{configName:"onRenderClient",importPath:"/src/renderer/+onRenderClient.js",isValueFile:!0,exportValues:I},{configName:"Page",importPath:"/src/pages/blog/tilt-shift/+Page.vue",isValueFile:!0,exportValues:R}],Q={onBeforeRenderEnv:{definedAt:{isComputed:!0},valueSerialized:"null"},dataEnv:{definedAt:{isComputed:!0},valueSerialized:"null"}};export{K as configValuesImported,Q as configValuesSerialized};