Easy implementation of AA (Jianfengchazhen) games on the iOS platform

Objective

Remember that it was 2015 of June after a rain (a rain, trapped me here ...) , the elder sister brought her in the QQ space to see an interesting game: Jianfengchazhen. (It was also in the mobile development of this line, or a new university lippy, do not know that this is the first time on the iOS platform to launch a popular world-wide classic casual game: aa) This web version of the user experience is not the mobile side of the feeling good, but this is only later know. Well, this game is not too difficult at first glance, then you may quickly pass through the front of a few very simple levels (I initially contacted only 15 off), then you can be in 8, 9 or so may be the first failure, and then the pain of the discovery of the game from the 1th off. One or two plays OK, if you finally overcome the "difficulties and hardships" came to 12, 13 off, and then give you the whole such a out, the shadow of the inner area can imagine, fell the mood of mobile phones have!

After the "into the pit", the face of these things will not just pure appreciation and play, but always subconsciously think of the effect can be cashed into what kind of code. And then by this thought result constantly in the development tool groping, finally one day, a flash of inspiration, the sample came out. Then because of the impulse to restrain the heart, want to write something through some channel to share such a practice process, so there is an article: iOS platform AA (Jianfengchazhen) game simple implementation.

The enemy, Baizhanbudai

Friends who have played AA know that its game logic is this: each level you have a different number of "needles", the center of the disk on the initial state may have a "needle" is inserted in place, but this is to increase the difficulty of the game design. Your task is to insert all the "needles" held in your level into the center-rotating disc (the insertion point is relatively fixed), as long as you cannot contact other "needles" or the game fails. In order not to let you quickly clearance, the back of the level of course will become more and more difficult, such as the increase in disk speed, the initial ready "needle" number and hold the number of needles, clockwise rotation (the pit is this point, I have a lot of somersault on this!) ), the reason is called the simple implementation is mainly because the Demo simply realized the game logic, not set multiple levels, replaced by the so-called endless mode.

As I started to practice this game, I was already in the final exam, so I need to start preparing for exams and internships, not much energy to design the game beautification and subsequent levels. Of course, if there is a chance later, there should be a Demo2.0 version.

My first thought about the implementation of this game is that when you click on the screen, the path property of the center disk (Cashapelayer instance) is extended to achieve the effect of the final "pin" inserted on the disc. For the "pin" dynamic movement process, you can create a transition "pin" view to replace the equivalent. So the core question is: How do I determine the starting and ending points of the drawing when I extend the path of the layer? Because during the rotation of the central disc, the points on it will also be affine transformed along with it. If you confirm the draw "pin" when the layer is rotated or when the disk is still hard-coded to get the start and end point then the new "needle" will be "plug" with the "needle" coincident together, resulting in the result is: no matter how You "pin", the disc saw only a "needle", although it is actually a lot of " The result of the "overlapping" of stitches.

So the first question is how to get the current "pin" drawing start and end point?

Practice is the only standard to test truth

Thankfully, the central hinge is circular (so called a disc), and can only be in the case of a round to design a game effect such as AA. Since the calculation of the start and end point of the pin depends on the nature of the distance between the center of the circle and the point of the boundary, the conversion process of the coordinate point can be represented by the following two graphs:

The datum point is the insertion point of the "needle" at rest (corresponding to the starting point of the drawing "pin"), and the end point can be converted by the same method, except that the value of RADIUS R needs to be adjusted accordingly.

Then the question of practice turns to how to get the rotation of the layer during rotation, and unfortunatelyApple does not provide a direct API to get such a value. After the author has practiced some methods without fruit, decided in the Stack Overflow to brush the existence feeling, asks the question, the result has met some embarrassing things! Think of it as a small episode, share to you, hope warning!

No doubt, before Ask question , you have to search the relevant questions whether someone has already proposed, perhaps you can directly pick up the ready-made. No, just typing in the keyword found a possible workaround:

Take a look at the problem description:

Look at the answer:

Hey! It seems that one thing, try it first! ..................... (The 100-word practice is omitted here) and it turns out that it can only calculate the angle value when the final state is rotated, that is, if someone does not tell you how many angles the view will be rotated, you can get his preset value. The calculated results are obviously related to Xxview.transform.b, Xxview.transform.a , because the corresponding affine transformations will take effect immediately after the setting is complete.

The problem has not been solved, so the new question has to be put forward to be necessary:

After that, they were "laughed at", which is the reason:

This is the result of his revision of my question before and after:

Alas! Forgive me this novice's don't understand the rule ah! This also reflects the professionalism of Stack Overflow from one side, and it is no wonder that the great gods are willing to engage in technical exchanges here. Here is my thanks:

Unfortunately, no one has answered this question so far! It's a real capital embarrassment! So in the face of problems, to ask others at the same time they also need to constantly think about the solution of the problem. The so-called "hands-on, clothed".

In fact, the previous answer has already told us the answer, but here we need in the animation process in some way to obtain similar to XXVIEW.TRANSFORM.B, XXVIEW.TRANSFORM.A such a quantity. What we all know is that when it comes to animations, the layer gives the animation process to Presentationlayer(the presentation layer) to complete. The intermediate values between the initial and final values of the animation are calculated by the system and presented through the presentation layer. Speaking here is very clear, we are involved in the need to change the color of the text, the trouble will be solved.

Keep moving.

Now that we're using a layer, we need to know that its transform property is a struct variable named catransform3d , and Xxview 's transform property is a struct variable named cgaffinetransform . The former does not naturally have member variables such as a and B, but a matrix structure like this:

struct CATransform3D{  CGFloat m11, m12, m13, m14;             CGFloat m21, m22, m23, m24;  CGFloat m31, m32, m33, m34;  CGFloat m41, m42, m43, m44;};

The M14, M24, M34, M44 are just placeholders for the matrix, usually M14, M24, M34 set to 0, andm44 set to 1. The values for the other components correspond to different scenarios, which are represented as follows:

In this example, we rotate around the z-axis, and we can use the inverse tangent transform function to join the actual parameter M21, M22 value to know the current rotation angle of the layer in real time, but it certainly needs some correction to fit in the clockwise, counterclockwise angle to calculate the result value of 0 ~ 2π(the inverse tangent calculation is expressed in radians):

//This method is open to the outside, is mainly used in different rotation direction, can get the rotation angle of the layer in real time- (CGFloat) Transformanglewithrotationdirection: (BOOL) Clockwise {returnClockwise? [ SelfTransformrotationangle]:2.0f * M_PI-[ SelfTransformrotationangle];}//This method is a private method, and the value it returns is used directly for the calculation of coordinate transformations- (CGFloat) Transformrotationangle {//This can actually be used to calculate the angle value with the inverse sine and cosine.    CGFloatDegreeangle =-ATAN2F ( Self. Presentationlayer. Transform. M21, Self. Presentationlayer. Transform. M22);if(Degreeangle <0.0f) {Degreeangle + = (2.0f * m_pi); }returnDegreeangle;}

With the aid of the mathematical induction formula, the transformation formula of coordinates can be unified into the following forms:

- (CGPoint)convertPointWhenRotatingWithBenchmarkPoint:(CGPoint)point roundRadius:(CGFloat)radius {    CGFloat rotationAngle = [self.presentationLayer transformRotationAngle];    return CGPointMake(point.x + sinf(rotationAngle) * radius, point.y - radius + cosf(rotationAngle) * radius);}

Here's the final:

Summarize

Although, in the writing of the article when the sense of thought is very clear, and the whole process is coherent, but in practice the detours or even halfway is inevitable. With this Demo , it was written once before, but that might be because of the lack of technical reserves (so far, no one on the internet can find a Demoof the game on the IOS platform), halfway! But just a few days ago, it was felt that technical improvements needed to be measured by whether or not the task could not be completed before. In addition to doing other people have not done practice, will always be more interesting and more challenging meaning, this is not the embodiment of value? Here is the Demo , interested friends can download down to see, thank you!

Easy implementation of AA (Jianfengchazhen) games on the iOS platform