ScratchData LogoScratchData
Back to sly_i's profile

3d Floor Spritesheet

SLsly_i•Created June 24, 2024
3d Floor Spritesheet
26
21
238 views
View on Scratch

Instructions

Single stamp 3d floor grid using svg css, hopefully this is smooth and convincing like @AddZero excellent project https://scratch.mit.edu/projects/150731 This uses svg css, to create a small floor spritesheet. This could be useful for repeating static floor animations with fixed camera like sonic special zone but not Mario Kart. Works on safari and chrome. It is much faster load time for bitmap but trying to keep texture size to a minimum and decent runtime vs load time.

Description

My CSS skills are pretty basic, so alot of room for optimising. The css calc may effect performance a little at startup, as needs to generate and cache the webgl textures. I should figure out turning, but the method should be fast and pretty small. Each frame is 48px*36px and the 30 frames are made from five 2x3 spritesheets. The 2x3 spritesheet is 7kb (96px*108px) seems a reasonable balance of files#, quality & performance. 5 costumes totalling to 480x540 for this floor animation. The load time is too high with this method, about 20s on mobile :-( Inspired by @comp09/@52525rr method, https://scratch.mit.edu/projects/627583842 or https://scratch.mit.edu/projects/117487433 to allow a large number of frames. Memory is limited to webgl texture size of costumes, so set sprite size/zoom to 1000% instead. SVG's can either be base64 and imported in the client or can be imported natively via python script, as svg "use" element get scrubbed with a regular costume import, I used svg2sb3.py embedded We generate svg this way, as safari doesn't support matrix3d on textures :-( Since the method stamps only once, there is no giggle like my previous row stamper. https://scratch.mit.edu/projects/1026496231 The only really challenging bit was testing the css changes targeting chrome & safari using webkit for windows.

Project Details

Project ID1041228311
CreatedJune 24, 2024
Last ModifiedMay 24, 2025
SharedJune 24, 2024
Visibilityvisible
CommentsAllowed