How to tear paper with user control?

I would like to make a game where we give the user a plain piece of paper and the have to tear it into a given shape (star, circle, triangle, etc).

Here is a game that does have paper tearing and it seems to be user controlled from what i can see in the video (game is not available in my country)
https://apps.apple.com/us/app/tear-down/id1463994538

Kindly guide me in how may i approach this.
My options, that i can see, are :
1. Cut mesh programatically, but how would i get the paper like folding effect, i mean a paper isnt flat, it can be curved. I want the user to rip the paper so the area where the paper is being torn would be curved, liek in the video here
2. Use a cloth like simulator like "Obi Cloth" and adjust its properties so the cloth behaves more like a paper.

Kindly point me in the right direction.
Thank you

 

Interesting idea. If I were going to attempt it (using an asset) I'd very likely use option 2, Obi Cloth, which has tearing effects. You could probably set the properties of the "cloth" to be more like paper, and go from there. Not sure if Obi cloth works for mobile but there may be other cloth sims that do tearing.

Edit: On further reflection and actual studying the game page closer, I think a cloth sim would be overkill. This is totally doable in a relatively straightforward way. See my post further down for my second look at it.

 

Obi cloth asset page mentions that it works for mobile. Will ask its author about my use case. Not a cheap asset for just checking if it works.

Anyone else has any ideas?

 

For this I would probably agree with a 3rd party solution unless your math is really, really good and you were willing to spend time on it. Writing up that kind of physical simulation (up to a polished finish) is not for the faint hearted.

 

I can tell you from experience that tearing real paper can be pretty unpredictable and frustrating. Take a sheet of paper, hold it in front of you with both hands, make a tear that is as straight as possible, rotate it 90 degrees, try again. It should be considerably easier in one angle, compared to the other. That is because the fibres inside the paper are oriented in a certain way.

So if your simulation was spot on 100% accurate, it would likely still be frustrating to play with. Thus my recommendation would be to not simulate, to maintain full control of the gameplay aspect of the tears. And yeah, that's probably not very straight forward to implement and involves math and manually changing meshes from code.

 

Its not a simulation game so dont need 100% accuracy. I definitely wont have fibre orientation.
What do you think the dev of "Tear Down" game might have done for his game.

 

Try googling "iOS game tear down" and you'll learn a valuable lesson in how not to pick your game's name. It's impossible for me to find a video of it and the iTunes page doesn't show one in my browser and I don't have an up to date iOs device.

If your game is clearly not trying to rip this one off, I would try asking the dev who made this for general pointers:
http://steadystate.studio/

 

Yeah, I've found that when directly contacting devs - they're often really receptive and willing to talk. Good call @Martin_H

 

Obi can simulate stiff cloth (which can equal paper maybe)

But you need to crank up the solver iterations, dont know how mobile friendly that will be

 

It's not even smooth in the video, so probably not very mobile friendly.

 

We cant really tell since its in the editor but yeah

 

Thanks for the idea, the dev did guide me by telling that he did it all on his own using his unbelievable (My word, not his) math skills .
So i guess this might be out of reach for me and i have never worked on stuff this complex myself, always used assets..

Will start my research then.
Cheers

 

Or you could try to use this opportunity to learn the math its much easier when its applied as in you have a real world thing your trying to do with it instead of learning it theoretically.

Good luck!

 

If this is a truly important feature, then you have a way to do it. Simulate the tearing animations (multiple) in Houdini and then randomly select one during game play. It is more lightweight this way in run time. Although you will need to investigate if the Houdini engine can play back animations on mobile platforms. I know there is a limited support for Android, but I'm not a mobile developer, so I have no idea if they support every platform you need.

 

The math for this is totally doable if you approach it with the right mind set. Think about exactly what it is you want to do and then break it down into smaller steps.

Start with your paper, then think about each step of the "tear down". What does a micro step of the tear look like? There are multiple ways of approaching this, some simpler than others. I'm reminded of the old BASIC "racing" games that were super simple to program, something like Road Race.



Road Race for Tandy MC-10

or...



Formula One for TRS-80

Basically an overhead racing game where two points are randomly chosen on either side of the center point, and this becomes the track, or in your case the torn strip. This is a relatively common "trope" of older type-in programs and the technique was used a lot, whether vertically or horizontally. The idea is the same, though. It's figuring out how to create a "random" strip.

Then think about what it means to "tear" the paper towards the camera. It is going to take some math, but I don't think it's as far advanced as it might appear at first glance. Just think about it simply.

My wife/game dev partner pointed out that if you look at those screen shots on the game page, the shadows and highlights on the "ribbon" of paper are always in the same place across the screen in rows.

It's just pixels on a screen. This could be done completely with some simple art and simple math. No need to even go 3D with it. Look deeply at things like that and you can figure it out.

 

Exactly. Every clue in the image suggests that it's not modifying the meshes but is instead using an alpha cutout effect on both the background and the ribbon. One thing that I noticed that you didn't mention is that the polygons making up the bend where the two meet is identically positioned across all the images. This is totally smoke and mirrors.

 

You guys might be right about the shadows thing. here is a video to better see it.

 

video is unavailable.

 

still? i see views on it, and i have not restricted to any region.

 

Notice how it gets wieder as you go and smaller when you hit an obstacle like the width of the tear is your health amount? You'll definitely want full control over that.

 

Yea
the way the tear part also divides because of "obstacles" suggest that it is indeed mesh. doesnt it?
and the shadow effect may just be lighting and the curved path of the mesh is following a wave pattern which is the same so the lighting looks the same.

 

ah yeah it's showing now. So yup, seeing it in action it looks like you might be dealing with meshes, since the perspective changes. The ideas are the same, as far as the math and technique goes, but you just have to apply it to a mesh instead of just a flat plane. Barring that you could still use a flat plane of graphics instead of 3D mesh, but pop a lens distortion at the top of the screen, etc..

There are multiple ways of doing this, and in the end it's up to you to decide which way to go with it. It's going to take some work, of course.

 

Honestly, seeing this video gave me another idea. I think it is completely doable without manipulating meshes. You can do it by building VFX particle-systems and particle system trail (the teared gap and its borders can be trail). Only the start and the finish are real animations. The tearing width probably can be parameterized in the Vfx. LWRP probably would be the best for this kind of stuff.

 

I have no idea about this stuff, can you explain further?

I did manage to get similar gameplay with mesh manipulation but its very cpu demanding and slow even on my PC let alone a mobile. Will have to use Job systems to calculate the vertex positions to gain some speed.
Any tips on improving runtime mesh manipulation speed? I have 700k vertices on the mesh, will probably have to increase it further.

I did use a plane. manipulating the point at which the cut happens by a variable that move with user control. then at the point user selects to cut i create an extra vertex, replace the vertex on left side triangles and store the left and right side vertices in a list, then i animate is by slowly moving them away. But all this is just changing vertex positions and then reapplying them on the mesh. Very very slow, smoothness is so bad. No way near publishing.
Do you think the whole sheet of paper in the reference game video is one single mesh? maybe its divided into sub meshes so only a small part has to be refreshed so fewer calculations need to be done.