First of all, for those who don’t know what I’m talking about 
https://www.youtube.com/watch?v=baMmw29xtEw
I’m looking for a way to get a grid like this to work in Cocos2d-x.
Has anybody of you done this yet or know a sample of it?
I posted a while ago about the same topic and had this tutorial. I got it to work in the meantime by unfortunately it’s really really slow.
http://gamedevelopment.tutsplus.com/tutorials/make-a-neon-vector-shooter-for-ios-the-warping-grid--gamedev-1463723
This thing here if for Unity and also looks quite cool, even with the possibility of changing the color:
http://vectorgrid.blogspot.co.uk/12
But I also tried this, and it is also really slow.
Everything that helps making such a grid is highly appreciated, especially if you have experience working on something like this
This looks like it is likely to be a complex shader algorithm to achieve such an effect, it’s beyond the scope of these forums and not really a Cocos2d topic, I’ve never seen anything similar posted on the forums or implemented in Cocos2d, Google would be your best bet here. Try searching for texture warping shader effect or something similar. If you need help working with shaders in cocos2d-x then I can help you there.
As @UKDeveloper99 said this is achieved with a shader.
I don’t think that it should be complex to do.
What i would try is create 256x256 or 512x512 grid texture, and based on missile/explosion location i would translate that to my texture and pass it to shader for wrapping effect. Then i would scale resulting texture with applied shader to fill the background. This way shader should be fast since there wont be much pixels and results good.
Thanks for your responses!
Doing it with a shader definitely sounds like a good idea but I also think it would be quite complex.
@milos1290, if you think it’s not that complex, can you give me some hints / advice how to do it?
EDIT: Somebody here suggests that the original Geometry Wars developers created some kind of spring system for the simulation of the grid, but he doesn’t say anything about how to draw it:
Ok, so according to stackexchange post it seems that they calculate everything in another thread and just seed that data to renderer. So that means that they are not using a texture, they are drawing everything with lines. I would skip that for now and do everything on a main thread.
So, firstly create a grid, try to skip DrawNode and use your own custom command to draw everything. Do not hard code anything just seed your grid renderer with data. Since grid looks “alive” you will have to implement a system where every point can be moved and returned to initial position over time, also moving a single point will move all surrounding points by a factor, spring effect, there are built in easing functions to help you out. Try experimenting with that and see what are the results. It shouldn’t be too hard to get initial effect.
Yeah of course, at first getting the initial effect to work without any multithreading or things that could cause problems.
So what exactly would you do?
First step: Create a grid out of a texture? (Hence make a png file that looks like a grid) – or draw single lines?
I think I kind of get the idea, but not fully. I understand the thing about the spring-system and how the renderer should be fed with the data (hence the current points of the grid) and should then draw everything.
But how exactly would you draw the grid that is fed by the points?
Would you use a vertex shader for that or some other technique? Please explain as detailed as you can, every piece of information / input is highly appreciated
You can use glDrawLine. Checkout DrawNode source code on how to draw a line. In this case you don’t have to use texture if you are drawing directly with OpenGL. The main trick about this is to carefully think about structure you are going to use, because you want to modify points inside a grid, as a result drawing lines between these points will get you desired effect.
1 Like
I think you will have something like a huge array of points, or a 2-dimensional array to store all the base positions then another array to store the current positions (dynamic). Each position will represent a point on the grid where the lines cross. Although it will appear that they are all single lines, in reality there will be separate lines drawn between each point. Otherwise you won’t be able to have the warping effect because glDrawLine only draws a straight line. So once you have your points (positions) for the grid. You want to draw a single line between each neighboring point horizontal or vertical. Then you’ve got a good foundation which is the grid. That’s the easy part now comes the difficult part.
The grid works by having a start position where a touch occurs and then that touch spreads out like a drop in a pond and effects all the other positions with a force, the spring effect. This is somewhat similar to physics simulation. Infact attaching a physics body to each point may not be such a bad idea, you could quite easily replicate a spring effect then. But to do it programatically without physics is going to need a fairly complex algorithm. You will probably want to store a force or a vector for each point that changes every update. Then you want to loop through all the positions and calculate the length of the vector from the start position to the current position in the loop.
If you think of it more like a bomb blast it’s easier to visualize. You can base the force on the neightboring positions from the length of the vector between the neighboring position and the source of the blast (start position). The force will dampen, lose strength over time.
Then you need another force this is the spring effect this will be trying to pull the dynamic positions back to the base positions. If it’s like a spring then it will be stronger the further away the point is from it’s base position.
So every update you want to dampen the force pushing the point away from its base position and apply the force to pull it back towards its base position which will be proportional to the vector length between the positions.
So I say again fairly complex but if you have any experience with that I would consider the physics solution, which would be completely different.
Finally if you want it to look exactly like the game does, then after you have drawn the lines you need to use a 2d light shader on the opengl lines you’ve drawn. As you can see they are lit with a positional light.
Let me know how you get on.
1 Like
Thanks a lot you too, for taking your time and giving me some insight. I’m going to try out the things you suggested, starting easy and drawing a grid and then building up from there.
I will report back once I’ve achieved something.
If you have any further ideas / hints, just also reply here
