raylib U2 - 运动小球（生命周期）

这篇笔记我们实现在窗口上画上几个小球，然后让小球反弹运动的功能。分成两个部分：

• 第一部分简单说一下基本原理
• 第二部分讲实现代码。

不喜欢看原理的同学可以直接跳到第二部分去。

原理

简单地理解，我们在计算机上看到的所有画面，都是计算机渲染出来的一个个图片，这些图片在屏幕上一张张被显示出来，当速度足够快的时候，人眼看起来就变成了动态的影像。

所以我们做界面，底层的原理就是把这每一个画面给设计好，然后交给计算机画出来。

画出第一个小球

先看一下画元素的生命周期

第一步，创建元素

首先，我们需要创建一个小球的元素，用来绘制到窗口上。这个动作分成两部分：先把图案画出来，然后创建显示的元素。

看一下创建元素的代码：

	//创建一个40*40,透明背景的图片
	Image img=GenImageColor(40,40,BLANK);
	//在图片中绘制一个以(20,20)为圆心，半径为20的红色圆
	ImageDrawCircle(&img,20,20,19,RED);
	
	//注意texture才是最终被画到窗口上的东西，
	Texture texture = LoadTextureFromImage(img);
	
	UnloadImage(img); //不再需要使用img了，释放掉

第二步，画到窗口上

根据上面讲的原理，咱们要在主循环里不停地去绘制

//开启程序的主循环
while (!WindowShouldClose()) {

	//绘制帧，这一Part都是放在循环的最后的
	BeginDrawing();//开始绘制
	ClearBackground(WHITE);//重新绘制一些背景。
	DrawTexture(texture,100,100,WHITE);//把咱们的小球元素画上去
	EndDrawing();//结束绘制
}

第三步，销毁元素

别看这一步就是个销毁，少了这一步程序就是个不完整的程序。

//释放texture对象
	UnloadTexture(texture);

看一下完整的代码

#include <raylib.h>
#include<bits/stdc++.h>
using namespace std;
#define WINDOW_WIDTH 800
#define WINDOW_HEIGHT 600
int main() {
	
	//初始化窗口
	InitWindow(WINDOW_WIDTH, WINDOW_HEIGHT,"Test");

	SetTargetFPS(60);
	
	//创建一个40*40,透明背景的图片
	Image img=GenImageColor(40,40,BLANK);
	//在图片中绘制一个以(20,20)为圆心，半径为20的红色圆
	ImageDrawCircle(&img,20,20,19,RED);
	
	//注意texture才是最终被画到窗口上的东西，
	Texture texture = LoadTextureFromImage(img);
	
	UnloadImage(img); //不再需要使用img，释放掉
	
	//开启程序的主循环
	while (!WindowShouldClose()) {
		
		
		//绘制帧，这一Part都是放在循环的最后的
		
		BeginDrawing();//开始绘制
		ClearBackground(WHITE);//重新绘制一些背景。
		DrawTexture(texture,100,100,WHITE);//把咱们的小球元素画上去
		EndDrawing();//结束绘制
	}
	
	//释放texture对象
	UnloadTexture(texture); 
	
	//关闭窗口
	CloseWindow();
	return 0;
}

让小球动起来

添加变量，记录texture的位置，然后在循环里修改，就能实现让他运动。这个时候大家可以试试把ClearBackground注释掉看看会有什么不一样。

先运算，再绘制。现在有体会了不