This article mainly explains how to draw a curve chart of the game's touch trajectory.
In the onTouchEvent method, we can obtain the x and y coordinates of the points touching when touching the screen. How to use these points to form an irregular track and display this irregular track curve on the screen is the main content of this article.
Android Path class
Android provides a Path class, which, as the name implies, can set curve path trajectory. Any irregular curve is actually composed of several line segments, and the line segment is defined as the shortest line between two points. The path class can record the trajectory between these two points, and several paths are the irregular curves we need to draw.
The following is a method for setting the path path in the API.
public class
Path
extends Object
quadTo(float x1, float y1, float x2, float y2)
Add a quadratic bezier from the last point, approaching control point (x1,y1), and ending at (x2,y2).
explain:
Parameter 1 Track start point X coordinate
Parameter 2 Track start point Y coordinate
Parameter 3 Track end point X coordinate
Parameter 4 Track end point Y coordinate
Therefore, based on this parameter, you can set a line segment track.
Step by step explanation
In order to set a relatively smooth and beautiful curve, we need to make some settings for the game brush. The comments have been written very clearly in the code. Here I will talk about Setting the brush style (); means setting the brush style. Android brushes provide a total of three styles. FILL_AND_STROKE means hollow, solid, solid and hollow. If not set, the default is , and it must be set to hollow here. Because if it is set to solid or solid and hollow, the brush will enclose the path path in the middle, so it is not a curve segment, so everyone pays attention to it.
Java code
/** Create curve brush **/ mPaint = new Paint(); (); /**Set brush anti-aliasing**/ (true); /**Type of brush**/ (); /**Set the brush to become smooth**/ (); /**Set the width of the line**/ (5);
In the touch press event, use the moveTo() method to set the touch screen point as the starting point of the track, so that the track of the curve is set in the touch movement event. The starting point of the curve is the last touch point and the end point is the touch point this time. Use the quadTo method to record one curve segment generated by each movement and then draw all curve segments on the screen. If you touch lift, the reset() method will be called to reset the curve track.
Java code
@Override
public boolean onTouchEvent(MotionEvent event) {
/** Get the touch status **/
int action = ();
float x = ();
float y = ();
switch (action) {
// Touch pressed event case MotionEvent.ACTION_DOWN:
/**Set the starting point of the curve track X Y coordinate**/
(x, y);
break;
// Touch moving events case MotionEvent.ACTION_MOVE:
/**Set curve track**/
// Parameter 1 Start point X coordinate // Parameter 2 Start point Y coordinate // Parameter 3 End point X coordinate //Parameter 4 End point Y coordinate (mposX, mposY, x, y);
break;
// Touch lift event case MotionEvent.ACTION_UP:
/**Clear the path track after the button is raised**/
();
break;
}
//Record the current touch X Y coordinate mposX = x;
mposY = y;
return true;
}
In game drawing, call the drawPath method to draw the path curve recorded in onTouchEvent on the screen.
Java code
private void Draw() {
/**Clear the canvas**/
();
/**Draw curve**/
(mPath, mPaint);
/**Record the current contact position**/
("Current Stylus X:" + mposX, 0, 20,mTextPaint);
("Current stylus Y:" + mposY, 0, 40,mTextPaint);
}
Overall implementation of the code
The detailed comments have been written in the code. Welcome to read them. Wow, Kak~~~~
Java code
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
public class SurfaceViewAcitvity extends Activity {
MyView mAnimView = null;
@Override
public void onCreate(Bundle savedInstanceState) {
(savedInstanceState);
// Full screen display window requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(.FLAG_FULLSCREEN,
.FLAG_FULLSCREEN);
// Show custom game view mAnimView = new MyView(this);
setContentView(mAnimView);
}
public class MyView extends SurfaceView implements Callback,Runnable {
/**Refresh the screen every 50 frames**/
public static final int TIME_IN_FRAME = 50;
/** Game brush **/
Paint mPaint = null;
Paint mTextPaint = null;
SurfaceHolder mSurfaceHolder = null;
/** Control the game update loop **/
boolean mRunning = false;
/** Game Canvas **/
Canvas mCanvas = null;
/**Control the game loop**/
boolean mIsRunning = false;
/**Curve direction**/
private Path mPath;
private float mposX, mposY;
public MyView(Context context) {
super(context);
/** Set the current View to have control focus **/
(true);
/** Set the current View has touch events **/
(true);
/** Get the SurfaceHolder object **/
mSurfaceHolder = ();
/** Add mSurfaceHolder to Callback function **/
(this);
/** Create canvas **/
mCanvas = new Canvas();
/** Create curve brush **/
mPaint = new Paint();
();
/**Set brush anti-aliasing**/
(true);
/**Type of brush**/
();
/**Set the brush to become smooth**/
();
/**Set the width of the line**/
(5);
/**Create path object**/
mPath = new Path();
/** Create text brush **/
mTextPaint = new Paint();
/**Set color**/
();
/**Set text size**/
(15);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
/** Get the touch status **/
int action = ();
float x = ();
float y = ();
switch (action) {
// Touch pressed event case MotionEvent.ACTION_DOWN:
/**Set the starting point of the curve track X Y coordinate**/
(x, y);
break;
// Touch moving events case MotionEvent.ACTION_MOVE:
/**Set curve track**/
// Parameter 1 Start point X coordinate // Parameter 2 Start point Y coordinate // Parameter 3 End point X coordinate //Parameter 4 End point Y coordinate (mposX, mposY, x, y);
break;
// Touch lift event case MotionEvent.ACTION_UP:
/**Clear the path track after the button is raised**/
();
break;
}
//Record the current touch X Y coordinate mposX = x;
mposY = y;
return true;
}
private void Draw() {
/**Clear the canvas**/
();
/**Draw curve**/
(mPath, mPaint);
/**Record the current contact position**/
("Current Stylus X:" + mposX, 0, 20,mTextPaint);
("Current stylus Y:" + mposY, 0, 40,mTextPaint);
}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height) {
}
@Override
public void surfaceCreated(SurfaceHolder holder) {
/**Start the main loop thread**/
mIsRunning = true;
new Thread(this).start();
}
@Override
public void surfaceDestroyed(SurfaceHolder holder) {
mIsRunning = false;
}
@Override
public void run() {
while (mIsRunning) {
/** Get the time before the game is updated **/
long startTime = ();
/** Add thread-safe lock here **/
synchronized (mSurfaceHolder) {
/** Get the current canvas and lock **/
mCanvas = ();
Draw();
/** Unlocked after drawing is finished displaying on the screen **/
(mCanvas);
}
/** Get the time to end the game **/
long endTime = ();
/** Calculate the number of milliseconds of a game update **/
int diffTime = (int) (endTime - startTime);
/** Make sure that each update time is 50 frames **/
while (diffTime <= TIME_IN_FRAME) {
diffTime = (int) (() - startTime);
/** Thread waiting **/
();
}
}
}
}
}
After understanding and mastering these code examples, I believe that everyone has a method of how to draw the curve chart of the game's touch trajectory. I hope everyone can use them freely in Android game development.