This is the 2.0 version of the GIF Looper! This version has much better beat syncing and will export to Android (theoretically). You will need to use Unity 2018.4.21f1. All other instructions are the same. I will be making instructional videos soon, so keep your eyes peeled on that.
-------------------------------------------------
I'm providing this Unity Template Project for free for personal use. If you create original Videopaks that you want to sell, please contact us and we can list it here with a percentage of the sales going to you! I'd love to overwhelm our servers with Videopaks and provide an outlet for artists like yourself to get compensated for your creations... even though you're probably doing this for fun.
-------------------------------------------------
The GIF Looper videopak is loaded with 14 GIF or video loops that repeat endlessly. All time is mapped to the average BPM that is sent from the OP-Z app. There is not a hard start / stop for the loops, for several reasons. The loops start when the app is enabled but the screen is black until you trigger a loop. You can trigger the 14 loops from the bottom 14 gray keys. You can trigger them at 1/2 time by pressing shift, then the loop key and it will play 1/2 time as long is the key is down.
There are effects you can enable from the numbered black keys. Some are multi effects and some effects use knobs to adjust parameters. The last two effects buttons “9” and “0” are multi-effects. “9” will randomly turn on/off and stack effects. This happens based upon the midi notes that your OP-Z is sending. Each note triggers a random number that might fall into the threshold for a given effect. So the more notes that are played the more likely effects will be turned on or changed. “0” functions the same way but for triggering the loops. If you want to just play music and let the visuals surprise you, record the Loop randomizer “0” for the full length of the motion track.
Effect button “7” turns on analog glitch controls. The button must be held down or recorded to keep the glitch controls working. Control the amount of glitch by the WHITE LED knobs. Effect button “8” turns on color controls. When first enabled, the screen will be black or all gray. You need to adjust the GREEN LED knobs to control all aspects of color. There is lots of power in this one setting.
----------------------------------------
This is a template project for Unity that includes the Videolab components that you need to export to the OP-Z App Videopak format (iOS, Mac, Android).
-
To load your own GIFs/Loops into this project, you’ll need to create a spritesheet for each of 14 GIFs.
-
Each spritesheet needs to have 30 frames. It will replace the placeholder spritesheets I have in the project and you’ll be able to export your videopak.
-
The most difficult part of the process is going to be creating the spritesheets. They need to be EXACTLY the same as the sheets they replace. Instructions below.
- OR, Use this new tool that lets you upload or link to GIFs and it exports the EXACT spritesheets you need!
Video Tutorial:
Many thanks to Tony Grisey for this amazing tutorial! Make sure you check out his free Gif-Looper paks and his Lazer Vector pak here at synthpaks! And join the Videolab creators Discord group!
INSTRUCTIONS:
-
Make sure you have Unity 2018.2.21. The Unity GIF Looper Project is created in this version of Unity. I can’t vouch for any other versions.
-
Visit the Videolab Github page for more info about versions, installing, exporting, etc.
-
Create your 14 Spritesheets
- Here are the placeholder spritesheets. Your final spritesheets need to be named with these names and need to be exactly the same.
- Each spritesheet has 30 frames and represents one GIF loop. The loops work best with the final size being 2 to 4 seconds long. The 30 frames represent this length of time.
- It’s best to export all frames as single files first, and then use a tool like Photoshop to create the spritesheets. If you use photoshop, this will be much easier by using its automated contact sheet builder. (See specific Instructions below)
- All frames need to be this exact pixel size (1014 x 468 pixels) or the same exact proportions (1521 x 702) or (500 x 231)
-
Download and unzip the GIF Looper Template project
-
Go to Assets>GIFs and drag all new spritesheets into the GIFs folder. Make sure all the names are the same and make sure to replace all .png files with the new spritesheets. (Leave the .png.meta files there without deleting them) (screenshot)
-
Open Unity
-
Now Open the GIF Looper 01 Template Project
-
Find and click on the Scene named “GIF-Looper-Scene-01” (Screenshot)
-
In the menu to the right of the scene, choose “Select Scene Asset"
-
Make sure there is an Asset Bundle Name set on the lower bottom right of the screen. It should say "gif looper”, you can create a new bundle name if you’d like. (Screenshot) Make sure the name is all lowercase.
-
In the top menu choose Assets>Build Videopaks and choose where to save the export. (Screenshot)
-
For more info on exporting videopaks and importing the videopak into your OP-Z app, visit the Videolab Wiki
Creating Frames from Video:
If you’re using video and want to convert to GIFs, I’m assuming you know your way around Video, After Effects, Etc, so I won’t bore you with the details. Do something like this:
-
Convert your video clips to 2 seconds length.
-
Export each frame of your video at 15 fps
-
This will give you 30 frames
-
Use these 30 frames to make your spritesheet
Creating Frames from GIFS:
- Locate a GIF you want to use.
- Gifs will work best if they’re 2 to 4 seconds long
- It’s easiest if you find GIFs that are close to 30 frames (30 frames are what you need to create sprite sheets)
- Copy the link to the GIF or download and use a free tool like https://ezgif.com/crop to edit and export your frames
- Crop the GIF to the correct proportions. With https://ezgif.com/crop
- Choose a pixel size that’s the same size or smaller than your existing GIF
- Some sizes that will work: (1014 x 468 pixels) or (1521 x 702) or (500 x 231)
- Always use the largest size possible to prevent pixelated frames
- Edit the Frames if your GIF has more than 30 frames
- Use the “Frames” option to skip any frames that you want to make sure you have exactly 30 frames
- Click “Make a GIF"
- Now click “split” to export all 30 frames
- Choose “Output Images in PNG Format"
- Click “Split To Frames"
- Now click “Download Frames as ZIP"
- This should give you a ZIP folder that you can unzip and will have your 30 frames.
- Use these 30 Frames to create your spritesheet, (see below for spritesheet creation instructions)
Creating Spritesheets Using Photoshop:
- Spritesheet creation requires 30 images/frames each.
- Each image should represent one frame of your loop.
- Each image should be sized exactly (1014 x 468 pixels) or (500 x 231) or (1521 x 702) or the same exact proportions
- Example images
- Use Photoshop’s Contact Sheet II automation tool to create your first spritesheet
- Once you have 30 frames ready for spritesheet creation, make sure they are organized into a folder and named sequentially.
- File>Automate>Contact Sheet II and use these exact settings.
- Here’s a Photoshop preset that you can use load with the settings
- IMPORTANT: Delete the background layer in the contact sheet. Your final spritesheet needs to have a transparent background
- Export Transparent PNG spritesheet
- In Photoshop, go to File>Export>Export As
- Use these exact settings
- Make sure to name your exported file correctly (GIF-Looper-Template-SpritesheetXX.png) (Where XX is a number between 01 and 14) Example placeholder Spritesheets
CC Attribution-NonCommercial CC BY-NC license
Works on iPhones, iPads, Mac & Some Android devices. On Mac and iPad the aspect ratio forces slight image crop on right and left of screens.
(iOS OP-Z App 1.2.8)
(MacOS OP-Z App 1.2.5)
(Android Confirmed Running: Pixel 2)