I am still quite new to Codea and I just got Shade today. I was able to use the shaders made in Shade on 3D craft models in Codea. However, I can’t figure out a way to get them to work on 2D meshes. I only started learning about shaders recently, so I might have a misunderstanding on how they work. I can get normal shaders built in Codea to work on my meshes, but nothing made in Shade.
Is there something I am missing? Do I need to make the shaders in Shade in a special way or is it not possible?
@exomut at the moment you need to use the craft API to make use of shaders exported from Shade
You can create simple boxes and planes in craft and apply materials made in Shade. In the attached project (zip) you can see the basic checker material applied to a cube in Codea
We’re working on universal support for Shade files throughout Codea, including on mesh
I was able to import a model I made in the iOS app “Forge” and apply the checker material. Craft projects work perfectly. Since you recently added support for craft projects export to xcode, I feel excited to start working on some 3D projects. Making a 2D app using 3D might be a fun challenge too!
I am not a professional programmer. I am an English teacher that makes apps to use in class to make classes more interesting, so I mainly focus on 2D. Shaders make the look of app more enjoyable for the students.
I can’t wait for support for 2D meshes. I am also looking forward to the Universal iPhone and iPad support that is in beta, as well. Keep up the great work.
Thanks for your suggestion. I spent the day setting up an isometric camera pointing at a plane. I found some other users on this forum who had already figured that out. In the end, I decided that it wasn’t going to be easy to make games for my class doing 2D in a 3D environment.
On the plus side, I got over the fear of making an app in 3D and learned a ton. I might make some 3D apps for class now. It wasn’t as hard as I was expecting.
@dave1707 Thanks for the idea! I started working on a small alphabet learning app for my class of ESL elementary students. Having just a static “A” floating around the screen felt a little dull and non-engaging. So my thought was to add some visual shaders to make the letters have hologram effects or glitch effects using elapsedTime.
Since I can’t use Shade yet for 2D meshes, I bought a book(s) about shaders. The humblebundle.com is having a sale right now on graphics books. (Amazing timing for me!) After reading a bit, I noticed it will be a while until I fully understand shaders.
I like your idea about capturing the image from Shade. If I setup a 3D craft model and have it run with a shader. I could capture a few frames and export them. Then use those frames as an animation on a 2D mesh.
I see you a lot on this forum. So I am guessing I will be needing your help again. Thanks for the help!
@exomut Here the program I threw together, so it’s not that polished. After you do a Shader screen snapshot, load this code. Tap on the word Dropbox:lava to open the Assets list. Select Dropbox. When that opens, tap on +photos to import the shader image into Dropbox. Give it a name and tap Use. Then tap that image and the Dropbox:lava name will change to the name of the image you selected. Then run my code and there will be a yellow square over the image. Use 2 fingers to shrink or enlarge the square and move it around. Once you have what you want in the square, tap the screen anywhere at the top of the screen. An image of what you selected in the square will be the only image showing. You’re done and that image will be in the Dropbox folder named tempImage. Exit my code and you can use or rename the image to what you want. If you have any questions, just ask.
PS. Don’t forget to enlarge the image in the Shade program before you do the screen snapshot. It sounds more complicated than it is. Once you do it, it’s no problem.
displayMode(FULLSCREEN)
function setup()
spriteMode(CORNER)
img=readImage("Dropbox:lava")
size=img.width/2
dx,dy=size/2,size/2
tab={}
stroke(255, 236, 0, 255)
strokeWidth(3)
noFill()
end
function draw()
background(0)
if img2==nil then
sprite(img,0,0)
translate(dx,dy)
rect(0,0,size,size)
else
sprite(img2,50,50)
end
end
function touched(t)
if t.state==BEGAN then
if t.y>HEIGHT-50 then
img2=img:copy(dx//1,dy//1,size//1,size//1)
saveImage("Dropbox:tempImage",img2)
end
if #tab<2 then
table.insert(tab,{id=t.id,x=t.x,y=t.y})
if #tab==2 then
startDist=vec2(tab[1].x,tab[1].y):dist(vec2(tab[2].x,tab[2].y))
startSize=size
end
end
elseif t.state==MOVING then
for a,b in pairs(tab) do
if b.id==t.id then
b.x=t.x
b.y=t.y
end
end
if #tab==2 then
d=vec2(tab[1].x,tab[1].y):dist(vec2(tab[2].x,tab[2].y))
size=startSize*(d/startDist)
end
dx=dx+t.deltaX/#tab
dy=dy+t.deltaY/#tab
elseif t.state==ENDED then
for a,b in pairs(tab) do
if b.id==t.id then
table.remove(tab,a)
end
end
end
end
@exomut you can use the legacy style shaders on mesh (i.e., the ones you can create in the Shader Lab tool in Codea). You do have to write the code for these shaders, but simple hologram-style effects are possible and there are included ones like swirl and ripple.
@Simeon Thanks for your reply. Like I said above, I bought some books on Shaders that were on sale. Since, I only program just for fun, shaders are still way over my head. I have been playing around in Shade for a couple weeks now, and I feel like I am starting to understand a lot more. Learning first visually with Shade makes the step to programming shaders by hand seem easier. Thanks for making a wonderful tool! I am also excited that the update to Shade came out today! Congratulations, that was a long app store wait.
@dave1707 Like always, from what I have seen on these forums, you go above and beyond! Thanks for the code! I will tinker around with what you gave me and see what I can learn from it!