2d:null 2e:["$","title",null,{"children":"SVG Sprite Sheet Animation | Neil Turley | Observable"}] 33:[{"id":"07d53e541bc2710abeffa43a28a3509eaee2f812dda037f1d0a964094350d0e8dfb6bd612b3e4a7dab35d5b17c1a54bb55e1e6ff009682b7685b7ed4c3758246","href":"https://static.observableusercontent.com/files/07d53e541bc2710abeffa43a28a3509eaee2f812dda037f1d0a964094350d0e8dfb6bd612b3e4a7dab35d5b17c1a54bb55e1e6ff009682b7685b7ed4c3758246","name":"Skulli Sprite Sheet 1.png","type":"image/png","lastModified":1586833149777.761,"size":32049},{"id":"4cf2e1c535b1913df46ecbbbb7291f27ae470c796a48e1ba5cedd6601defad6b543ec75e32417dc2e39f49e5a81208a6538c6699c5ab8ef2f1609bf61ba286a7","href":"https://static.observableusercontent.com/files/4cf2e1c535b1913df46ecbbbb7291f27ae470c796a48e1ba5cedd6601defad6b543ec75e32417dc2e39f49e5a81208a6538c6699c5ab8ef2f1609bf61ba286a7","name":"crystal-qubodup-ccby3-32-orange.png","type":"image/png","lastModified":1586801164374.794,"size":12795},{"id":"190f697275dd2d8c486cff48b671f4434dff1acd65157b41c2498cff0e1f718dc6fd1add02b0121b0e106cfea4d7705e52985ccd3b266d2cee8d503dd3f7a5b0","href":"https://static.observableusercontent.com/files/190f697275dd2d8c486cff48b671f4434dff1acd65157b41c2498cff0e1f718dc6fd1add02b0121b0e106cfea4d7705e52985ccd3b266d2cee8d503dd3f7a5b0","name":"cowboy.png","type":"image/png","lastModified":1586836063948.303,"size":1556454}] 31:{"id":"5192d50163922ae6","slug":"svg-sprite-sheet-animation","title":"SVG Sprite Sheet Animation","thumbnail":"e6f3dbfd6a3c40d0753f9f0759a2a2a3a7b8450557a1c831fb5789f27e970d57","access_level":"public","create_time":"$D2020-04-13T18:04:23.655Z","update_time":"$D2020-04-14T04:49:50.431Z","view_time":null,"first_public_time":"$D2020-04-14T05:12:26.003Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"d3a5c7e199005588","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":"starter_2024"},"version":360,"publish_version":360,"role":null,"authored":false,"authors":[{"type":"individual","id":"08c0e1b672bab3d7","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":null}],"members":[{"type":"individual","id":"08c0e1b672bab3d7","login":"nturley","name":"Neil Turley","avatar_url":"https://avatars-next.observableusercontent.com/1144dcde8da195bed152315b9c34a7cd1cc33f52ca513a9b8582d9a077aff812","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"SVG Sprite Sheet Animation","cells":[{"id":0,"value":"md`# SVG Sprite Sheet Animation\nAn older technique to simulate 3d rendering is to take a series of images of the 3d rendered object and put them into a single image called a \"sprite sheet\". Then, you can flip through the frames of the image to show the object from different angles or poses.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"j = {\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`\nUsing SVG containers allows us to manipulate vector objects in the view without having to worry about painting a raster canvas. There are a few ways to \"flip\" through the frames of a sprite sheet. I had the most success with clip-path. You can switch frames by moving the position of the image by the size of each frame.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"g = {\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md`\nTo move around the animated sprite, you can wrap it in a group (\\`\\` tag) and use transforms to move around the group.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"c = {\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"md`Don't rerender the whole svg container every frame, otherwise it will flash white. Just dynamically compute the attributes for all of the elements and use setAttribute calls to apply them. Also make sure you scale the images appropriately otherwise you might get some ugly blurring`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"{\n c\n let i = 0;\n let pos = [20,55];\n let dirs = [\n [-1.2,-1.2],\n [-2,0],\n [-1.2,1.2],\n [0,2],\n [1.2,1.2],\n [2,0],\n [1.2,-1.2],\n [0,-2]\n ]\n while (true) {\n let x = (i%9)*-128-128;\n let y = Math.floor(i/9)*-128-256;\n let dpos = dirs[Math.floor(i/9)];\n pos[0] -= dpos[0]*2.6\n pos[1] -= dpos[1]*2.6\n document.getElementById(\"cowboyFrame\").setAttribute('x',x)\n document.getElementById(\"cowboyFrame\").setAttribute('y',y)\n document.getElementById(\"cowboyPos\").setAttribute('transform',`translate(${pos[0]},${pos[1]})`)\n \n yield Promises.delay(100, [i, x, y]);\n i=(i+1)%72;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"{\n j\n let i = 0;\n while (true) {\n let x = 50+Math.abs(i-100)*3;\n document.getElementById(\"ghostPos\").setAttribute('transform',`translate(${x},0)`)\n yield Promises.delay(50, [i, x]);\n i=(i+1)%200;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"{\n g\n let i = 0;\n while (true) {\n let x = -(i%4)*128\n let y = i>3?-128:0\n document.getElementById(\"ghost\").setAttribute('x',x)\n document.getElementById(\"ghost\").setAttribute('y',y)\n \n yield Promises.delay(100, [i, x,y]);\n i=(i+1)%6;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"{\n j\n let i = 0;\n while (true) {\n document.getElementById(\"jewel\").setAttribute('x',(--i)*32)\n yield Promises.delay(70, i);\n if (i<-6) i=0\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"