首页 > 其他分享 >第五话：高级图形操作与优化

第五话：高级图形操作与优化

时间：2024-11-16 23:16:37浏览次数：3  
标签：函数 int 绘制 纹理 第五 图形操作 SDL 旋转 优化

SDL简单教程

第五话：高级图形操作与优化

前言

  SDL2（Simple DirectMedia Layer 2）是一个跨平台的多媒体库。它提供了对音频、键盘、鼠标、游戏控制器和图形硬件（通过 OpenGL、Vulkan 等）的低级访问接口，主要用于开发游戏和其他交互式多媒体应用程序。本章介绍SDL的事件处理。

第五话：高级图形操作与优化

5.1 透明效果与颜色混合

理解透明效果和颜色混合的概念

  • 透明效果：在图形渲染领域，透明效果是一项极为关键的特性，它能够使图像或图形的特定部分呈现出透过的视觉效果，从而展现出位于其后的其他内容。这一特性在创建高度逼真的场景时发挥着不可或缺的作用，例如在模拟透过玻璃观察后方物体的情景时，透明效果能够精准地还原出真实世界中的视觉感受。此外，对于实现一些特殊的视觉特效，如半透明的精灵，透明效果更是不可或缺的技术手段。在计算机图形处理中，透明度通常借助设置像素或纹理的透明度值来达成。在 SDL2 这一广泛应用的图形库中，透明度主要通过 alpha 通道来表示，其取值范围为 0 至 255，其中 0 代表完全透明，即该像素或纹理将完全不可见，而 255 则表示完全不透明，此时像素或纹理将以其原始的完整形态呈现。
  • 颜色混合：颜色混合是将源颜色（例如即将绘制的纹理颜色）与目标颜色（已经存在于渲染目标上的颜色）依据特定规则进行融合的复杂过程。通过巧妙地运用颜色混合技术，可以创造出多种多样的透明、半透明以及其他极具创意的特殊视觉效果。例如，当两个图形相互重叠时，借助颜色混合能够使它们之间产生自然流畅的融合效果，仿佛彼此之间存在真实的物理交互。这种技术为图形渲染增添了丰富的层次感和真实感，极大地拓展了图形设计的创意空间。

SDL_SetTextureBlendMode 函数详细解析

  • 函数原型：int SDL_SetTextureBlendMode(SDL_Texture* texture, SDL_BlendMode blendMode);
  • 参数含义：
    • texture：此参数为指向要设置混合模式的 SDL_Texture 对象的指针。该纹理在后续的渲染操作中，将依据设定的混合模式与目标颜色进行融合计算，从而决定最终在屏幕上呈现的颜色效果。
    • blendMode：指定的混合模式，它属于 SDL_BlendMode 类型的枚举值。SDL2 提供了多种常见的混合模式，每种模式都具有独特的视觉效果和应用场景：
      • SDL_BLENDMODE_NONE：在这种模式下，不进行任何颜色混合操作，源颜色将直接覆盖目标颜色。这是 SDL2 默认的混合模式，适用于那些不需要透明效果的纹理绘制场景，例如绘制一些完全不透明的实体图形或背景元素。
      • SDL_BLENDMODE_BLEND：这是一种常用的正常透明度混合模式。它会根据源颜色和目标颜色各自的 alpha 通道值，按照一套精确的算法将两者进行混合。例如，当源颜色的 alpha 值设定为 128（即半透明状态）时，渲染系统会依据特定的数学公式，将源颜色和目标颜色按相应比例进行混合，从而产生出自然的半透明叠加效果，使得图像看起来既有层次感又不失真实感。
      • SDL_BLENDMODE_ADD：加法混合模式，其原理是将源颜色和目标颜色的 RGB 通道值分别相加。这种模式的独特之处在于它能够创造出强烈的发光或高亮效果，因为相加的操作会使颜色的亮度值增加，从而使图像呈现出更加明亮、鲜艳的视觉效果。然而，需要特别注意的是，由于颜色值相加可能会导致最终结果超出正常的 0 - 255 范围，因此在实际应用中，需要根据具体情况进行适当的处理，以确保颜色值在合法的范围内，避免出现颜色失真或异常的情况。
      • SDL_BLENDMODE_MOD：乘法混合模式，此模式通过将源颜色和目标颜色的 RGB 通道值相乘来实现颜色混合。这种模式在模拟阴影效果或颜色过滤方面表现出色，因为相乘的操作会使颜色变暗，从而能够逼真地营造出物体被遮挡或光线透过有色滤镜后的视觉效果。
  • 返回值处理：该函数返回 0 表示设置混合模式成功，若返回 - 1，则表示设置过程中出现错误。在实际编程中，如果函数返回 - 1，可以通过调用 SDL_GetError 函数获取详细的错误信息，以便进行针对性的错误处理和调试工作。以下是一个设置纹理混合模式为 SDL_BLENDMODE_BLEND 的示例代码片段：
SDL_Texture* texture; // 假设已经通过其他方式加载并成功创建了纹理对象
if (SDL_SetTextureBlendMode(texture, SDL_BLENDMODE_BLEND) < 0)
{
    std::cerr << "SDL_SetTextureBlendMode failed: " << SDL_GetError() << std::endl;
    // 根据具体需求，可以在此处进行错误恢复操作或直接返回错误码
    return 1;
}

SDL_SetTextureAlphaMod 函数深入讲解

  • 函数原型：int SDL_SetTextureAlphaMod(SDL_Texture* texture, Uint8 alpha);
  • 参数含义：
    • texture：此参数为指向要设置透明度的 SDL_Texture 对象的指针，明确指定了需要调整透明度的目标纹理。
    • alpha：这是一个取值范围在 0 - 255 之间的整数，用于精确指定纹理的整体透明度。其中，0 表示将纹理设置为完全透明状态，此时纹理在屏幕上几乎不可见；而 255 则表示将纹理设置为完全不透明状态，纹理将以其原始的不透明形态呈现。例如，若要将一个纹理设置为半透明效果，使其透明度为 128，可以使用如下代码：SDL_SetTextureAlphaMod(texture, 128);。
  • 返回值处理：与 SDL_SetTextureBlendMode 函数类似，SDL_SetTextureAlphaMod 函数返回 0 表示设置透明度成功，返回 - 1 表示设置失败。在出现失败情况时，可以借助 SDL_GetError 函数获取详细的错误信息，以便排查问题所在并进行相应的处理。

示例：创建半透明纹理并实现混合效果

  以下是一个完整的示例代码，展示了如何加载两个图像纹理，将其中一个纹理设置为半透明并应用 SDL_BLENDMODE_BLEND 混合模式，然后将两个纹理依次渲染到窗口上，从而实现半透明混合的视觉效果：

#include <SDL.h>
#include <SDL_image.h>
#include <iostream>


int main(int argv, char* argc[])
{
	if (SDL_Init(SDL_INIT_VIDEO) < 0)
	{
		std::cerr << "SDL_Init failed: " << SDL_GetError() << std::endl;
		return -1;
	}

	SDL_Window* window = SDL_CreateWindow("my window", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, 640, 480, SDL_WINDOW_SHOWN |SDL_WINDOW_RESIZABLE);
	if (window == nullptr)
	{
		std::cerr << "SDL_CreateWindow failed: " << SDL_GetError() << std::endl;
		// 清理 SDL2 资源并退出程序
		SDL_Quit();
		return -1;
	}

	// 创建一个与窗口关联的渲染器
	SDL_Renderer* renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED);
	if (renderer == nullptr)
	{
		std::cerr << "SDL_CreateRenderer failed: " << SDL_GetError() << std::endl;
		// 销毁窗口并清理 SDL2 资源后退出程序
		SDL_DestroyWindow(window);
		SDL_Quit();
		return -1;
	}

	// 加载第一个图像纹理
	SDL_Texture* texture1 = IMG_LoadTexture(renderer, "E:/pro/sdl_code/res/test_img.png");
	if (texture1 == nullptr)
	{
		std::cerr << "IMG_LoadTexture (image1) failed: " << SDL_GetError() << std::endl;
		// 销毁渲染器、窗口并清理 SDL2 资源后退出程序
		SDL_DestroyRenderer(renderer);
		SDL_DestroyWindow(window);
		SDL_Quit();
		return -1;
	}

	SDL_Texture* texture2 = IMG_LoadTexture(renderer, "E:/pro/sdl_code/res/sdl.png");
	if (texture2 == nullptr)
	{
		std::cerr << "IMG_LoadTexture (image2) failed: " << SDL_GetError() << std::endl;
		SDL_DestroyRenderer(renderer);
		SDL_DestroyWindow(window);
		SDL_Quit();
		return -1;
	}

	// 设置纹理2 的混合模式为 SDL_BLENDMODE_BLEND
	if (SDL_SetTextureBlendMode(texture2, SDL_BLENDMODE_BLEND) < 0)
	{
		// 销毁已加载的纹理 1 和 2、渲染器、窗口并清理 SDL2 资源后退出程序
		SDL_DestroyTexture(texture1);
		SDL_DestroyTexture(texture2);
		SDL_DestroyRenderer(renderer);
		SDL_DestroyWindow(window);
		SDL_Quit();
		return -1;
	}

	// 设置纹理2的透明度为半透明 （alpha值为128）
	if (SDL_SetTextureAlphaMod(texture2, 128) < 0)
	{
		std::cerr << "SDL_SetTextureAlphaMod(texture2) failed: " << SDL_GetError() << std::endl;
		// 销毁已加载的纹理 1 和 2、渲染器、窗口并清理 SDL2 资源后退出程序
		SDL_DestroyTexture(texture1);
		SDL_DestroyTexture(texture2);
		SDL_DestroyRenderer(renderer);
		SDL_DestroyWindow(window);
		SDL_Quit();
		return -1;
	}

	// 定义纹理 1 的目标矩形位置和大小
	SDL_Rect dst_rect1 = { 0, 0, 640, 480 };
	// 定义纹理2的目标矩形和大小
	SDL_Rect dst_rect2 = { 0, 0, 640, 480 };

	// 将纹理1渲染到窗口上
	if (SDL_RenderCopy(renderer, texture1, nullptr, &dst_rect1) < 0)
	{
		std::cerr << "SDL_RenderCopy(texture1) failed: " << SDL_GetError() << std::endl;
		// 销毁已加载的纹理 1 和 2、渲染器、窗口并清理 SDL2 资源后退出程序
		SDL_DestroyTexture(texture1);
		SDL_DestroyTexture(texture2);
		SDL_DestroyRenderer(renderer);
		SDL_DestroyWindow(window);
		SDL_Quit();
		return -1;
	}

	// 将纹理 2 渲染到窗口上，实现与纹理 1 的半透明混合效果
	if (SDL_RenderCopy(renderer, texture2, nullptr, &dst_rect2) < 0)
	{
		std::cerr << "SDL_RenderCopy (texture2) failed: " << SDL_GetError() << std::endl;
		// 销毁已加载的纹理 1 和 2、渲染器、窗口并清理 SDL2 资源后退出程序
		SDL_DestroyTexture(texture1);
		SDL_DestroyTexture(texture2);
		SDL_DestroyRenderer(renderer);
		SDL_DestroyWindow(window);
		SDL_Quit();
		return 1;
	}

	// 将渲染结果显示到窗口上
	SDL_RenderPresent(renderer);

	// 暂停程序执行 3000 毫秒，以便观察渲染结果
	SDL_Delay(3000);

	// 销毁已加载的纹理 1 和 2
	SDL_DestroyTexture(texture1);
	SDL_DestroyTexture(texture2);
	// 销毁渲染器
	SDL_DestroyRenderer(renderer);
	// 销毁窗口
	SDL_DestroyWindow(window);
	// 清理 SDL2 资源并退出程序
	SDL_Quit();
	return 0;

}

  在上述示例中，首先通过 SDL_Init 函数初始化 SDL2 的视频子系统，接着创建了一个窗口和与之关联的渲染器。然后分别加载了两个图像纹理，并对第二个纹理进行了混合模式和透明度的设置。之后，通过 SDL_RenderCopy 函数将两个纹理依次渲染到窗口上，最后使用 SDL_RenderPresent 函数将渲染结果显示到窗口中，从而呈现出两张图半透明混合的视觉效果。在程序的末尾，通过 SDL_Delay 函数暂停程序执行一段时间，以便观察渲染结果，之后清理了所有创建的 SDL2 资源并退出程序。

在这里插入图片描述

5.2 双缓冲和帧率控制

双缓冲机制详解

  • 双缓冲的原理：双缓冲是一种在图形渲染领域广泛应用的技术，其核心目的在于显著减少图形闪烁现象，并有效提高图形渲染的整体效率。在传统的单缓冲图形渲染模式下，图形的绘制操作直接在显示缓冲区中进行。当绘制过程较为复杂或者绘制速度相对较慢时，由于图形的绘制并非瞬间完成，用户可能会在屏幕上看到图形的部分绘制过程，这种现象会导致明显的闪烁问题，严重影响视觉体验。而双缓冲技术则巧妙地引入了两个缓冲区，一个被称为后台缓冲区，专门用于图形的绘制工作；另一个则是前台缓冲区，其主要职责是用于显示最终的图形结果。在图形绘制过程中，所有的绘制操作都在后台缓冲区中悄然进行，当绘制工作在后台缓冲区全部完成后，通过一个快速的交换操作，将前后台缓冲区的内容进行互换，从而将完整的绘制结果一次性地显示到屏幕上。这样一来，用户在屏幕上看到的始终是完整的、无闪烁的图形画面，极大地提升了视觉效果的稳定性和流畅性。
  • SDL2 中的双缓冲实现：在 SDL2 图形库中，渲染器在默认情况下已经采用了双缓冲机制。当开发人员调用 SDL_RenderPresent 函数时，实际上在底层执行的就是缓冲区的交换操作。具体而言，该函数会将后台缓冲区（即已经完成所有绘制操作的缓冲区）中的内容迅速显示到前台缓冲区（也就是窗口所对应的显示区域），同时将前台缓冲区标记为下一次绘制操作的后台缓冲区，从而为下一轮的图形绘制做好准备。这种默认的双缓冲机制为开发者提供了便捷的图形渲染环境，使得开发者无需过多关注底层的缓冲区管理细节，能够更加专注于图形绘制逻辑的实现。

帧率控制的重要性与方法

  • 帧率的概念与影响：帧率（Frames Per Second，FPS）是衡量图形动画或游戏流畅性的一个关键指标，它表示每秒钟能够显示的图像帧数。较高的帧率能够使动画和游戏呈现出更加流畅、自然的视觉效果，给用户带来身临其境的体验。例如，在一些高速动作游戏或精细动画场景中，高帧率可以确保动作的连贯性和细节的清晰展现，让玩家能够更精准地捕捉到画面中的各种信息。然而，如果帧率过高，可能会对硬件设备造成较大的负担，尤其是对于一些性能相对较弱的计算机系统。此外，在某些情况下，过高的帧率还可能导致画面撕裂现象的出现，特别是当图形渲染与屏幕刷新不同步时（即未开启垂直同步的情况下）。这种画面撕裂现象会破坏画面的完整性，严重影响视觉效果。另一方面，过低的帧率则会使画面明显卡顿，用户在操作过程中会感受到明显的延迟和不流畅，极大地降低了用户体验的质量。因此，在图形应用程序开发中，精确控制帧率在一个合适的范围内对于提供优质的用户体验至关重要。
  • 使用 SDL_Delay 实现简单帧率控制：
    • SDL_Delay 函数原型：void SDL_Delay(Uint32 ms);，此函数接受一个以毫秒为单位的时间参数，其主要功能是暂停当前程序的执行，使程序在指定的时间内处于等待状态。
    • 帧率计算与 SDL_Delay 的使用：为了实现特定的帧率目标，可以根据每帧所需的理论时间来合理使用 SDL_Delay 函数。例如，若要实现 60 帧每秒（FPS）的帧率目标，根据帧率的定义，每帧所需的时间约为 1000 毫秒 / 60 ≈ 16.67 毫秒。在实际编程中，可以在每帧绘制完成后调用 SDL_Delay(16);（这里取近似值，因为 SDL_Delay 函数的时间精度可能存在一定的限制），通过这种方式来控制每帧之间的时间间隔，从而近似实现 60 帧每秒的帧率。以下是一个简单的示例代码，展示了如何在一个基本的动画循环中运用 SDL_Delay 函数来控制帧率：
#include <SDL.h>
#include <SDL_image.h>
#include <iostream>


int main(int argv, char* argc[])
{
	if (SDL_Init(SDL_INIT_VIDEO) < 0)
	{
		std::cerr << "SDL_Init failed: " << SDL_GetError() << std::endl;
		return -1;
	}

	SDL_Window* window = SDL_CreateWindow("my window", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, 800, 600, SDL_WINDOW_SHOWN |SDL_WINDOW_RESIZABLE);
	if (window == nullptr)
	{
		std::cerr << "SDL_CreateWindow failed: " << SDL_GetError() << std::endl;
		// 清理 SDL2 资源并退出程序
		SDL_Quit();
		return -1;
	}


	// 创建一个与窗口关联的渲染器
	SDL_Renderer* renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED);
	if (renderer == nullptr)
	{
		std::cerr << "SDL_CreateRenderer failed: " << SDL_GetError() << std::endl;
		SDL_DestroyWindow(window);
		SDL_Quit();
		return -1;
	}


	// 绘制移动矩形
	SDL_Rect rect = { 0, 0, 50, 50 };
	int x_direction = 2;
	int y_direction = 2;
	Uint32 frame_start, frame_time;
	const int target_fps = 60;
	const int frame_delay = 1000 / target_fps;

	bool m_running = true;
	SDL_Event e;
	while (m_running)
	{
		frame_start = SDL_GetTicks();

		// 处理事件
		while (SDL_PollEvent(&e))
		{
			if (e.type == SDL_QUIT)
			{
				m_running = false;
			}
		}

		// 移动
		rect.x += x_direction;
		rect.y = y_direction;
		if (rect.x > 750 || rect.x < 0)
		{
			x_direction = -x_direction;
		}

		if (rect.y > 550 || rect.y < 0)
		{
			y_direction = -y_direction;
		}

		// 清除渲染器
		SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255);
		SDL_RenderClear(renderer);

		// 设置绘制颜色白色
		SDL_SetRenderDrawColor(renderer, 255, 255, 255, 255);
		// 绘制矩形
		SDL_RenderFillRect(renderer, &rect);

		// 显示渲染结果
		SDL_RenderPresent(renderer);

		frame_time = SDL_GetTicks() - frame_start;
		if (frame_time < frame_delay)
		{
			SDL_Delay(frame_delay - frame_time);
		}
	}

	SDL_DestroyRenderer(renderer);
	SDL_DestroyWindow(window);
	SDL_Quit();
	return 0;
}

  在这个示例中，首先初始化了 SDL2 的视频子系统，并创建了窗口和渲染器。在主循环中，通过 SDL_GetTicks 函数获取每帧开始的时间戳 frame_start，然后进行图形绘制操作，包括移动矩形、清除渲染器、设置绘制颜色和绘制矩形，最后使用 SDL_RenderPresent 函数显示渲染结果。接着计算本帧的绘制时间 frame_time，如果 frame_time 小于预设的每帧时间间隔 frame_delay，则使用 SDL_Delay 函数暂停程序执行相应的时间，以实现近似 60 帧每秒的帧率控制。同时，在循环中还处理了基本的事件，如窗口关闭事件，当用户点击关闭窗口时，m_running 变量被设置为 false，从而结束主循环。

在这里插入图片描述

  • 更精确的帧率控制方法（使用时间戳和帧间时间计算）：
    • 时间戳的获取与使用：除了上述使用 SDL_Delay 的简单帧率控制方法外，还可以通过更精确地计算每帧的时间来实现更为精准和稳定的帧率控制。在 SDL2 中，可以使用 SDL_GetTicks 函数获取从程序启动到当前时刻的毫秒数，通过记录上一帧的时间戳和当前帧的时间戳，能够精确计算出帧间时间。然后根据目标帧率和帧间时间的差异来灵活调整下一帧的绘制时间。例如：
Uint32 lastFrameTime = SDL_GetTicks();
while (running)
{
    Uint32 currentFrameTime = SDL_GetTicks();
    float deltaTime = (currentFrameTime - lastFrameTime) / 1000.0f; // 将毫秒转换为秒
    lastFrameTime = currentFrameTime;

    // 根据 deltaTime 更新游戏逻辑，例如移动对象、动画播放等
    // 这里可以添加具体的游戏逻辑更新代码，根据 deltaTime 来调整对象的运动速度、动画播放进度等

    // 绘制图形
    //...
    // 这里添加图形绘制的相关代码

    // 根据目标帧率和 deltaTime 计算剩余时间并等待（如果需要）
    float targetFrameTime = 1.0f / targetFPS;
    if (deltaTime < targetFrameTime)
    {
        Uint32 waitTime = (Uint32)((targetFrameTime - deltaTime) * 1000);
        SDL_Delay(waitTime);
    }
}

  这种方法的优势在于它能够更好地适应不同硬件设备的性能差异。在不同性能的计算机系统上，每帧的绘制时间可能会有较大的波动，而通过精确计算帧间时间并动态调整等待时间，可以有效地保证帧率的稳定性，使得图形应用程序在各种硬件环境下都能提供相对一致的流畅体验。特别是在复杂的游戏或应用程序中，当每帧的绘制时间受到多种因素（如复杂的图形计算、大量的数据处理等）影响而产生较大变化时，这种基于时间戳和帧间时间计算的帧率控制方法能够显著提高帧率的稳定性，从而提供更平滑、更流畅的视觉效果。

5.3 纹理缩放和旋转

SDL_RenderCopyEx 函数全面解读

  • 函数原型：int SDL_RenderCopyEx(SDL_Renderer* renderer, SDL_Texture* texture, const SDL_Rect* srcrect, const SDL_Rect* dstrect, double angle, const SDL_Point* center, SDL_RendererFlip flip);
  • 参数详细说明：
    • renderer、texture、srcrect、dstrect 参数与 SDL_RenderCopy 函数类似：
      • renderer：此参数为指向要进行绘制操作的 SDL_Renderer 对象的指针，它指定了图形绘制的目标渲染器，所有的绘制指令都将在这个渲染器所关联的窗口或渲染目标上执行。
      • texture：该参数是指向要绘制的 SDL_Texture 对象的指针，明确了需要绘制到渲染器上的纹理资源。
      • srcrect：用于精确指定从纹理中获取的部分区域，如果将其设置为 nullptr，则表示使用整个纹理进行绘制。这一参数在需要从一个较大的纹理中提取特定部分进行绘制时非常有用，例如在制作精灵动画时，可以通过调整 srcrect 来选取纹理中的不同帧进行绘制。
      • dstrect：用于详细指定在渲染器上绘制的位置和大小。通过设置 dstrect，可以灵活控制纹理在窗口或渲染目标上的显示位置和缩放比例，例如，可以将一个较小的纹理拉伸或压缩到指定的矩形区域内进行显示。
    • angle 参数：这是一个双精度浮点数类型的参数，表示纹理的旋转角度，其单位为弧度。正值表示纹理将按照逆时针方向进行旋转，负值则表示纹理将按照顺时针方向旋转。例如，若要将纹理逆时针旋转 45 度（约 0.785 弧度），则可以将 angle 参数设置为 0.785。在实际应用中，可以根据具体的需求灵活调整该参数，以实现各种旋转效果，如物体的旋转动画、界面元素的旋转特效等。
    • center 参数：此参数为一个指向 SDL_Point 结构体的指针，用于精确指定纹理旋转的中心点。SDL_Point 结构体包含 x 和 y 两个成员变量，分别表示点的坐标。如果将 center 参数设置为 nullptr，则旋转中心将默认采用纹理或 dstrect 的中心位置。例如，若要以纹理的左上角为旋转中心，可以通过如下方式设置：
SDL_Point center = {0, 0};

  这种灵活的旋转中心设置方式为开发者提供了更多的创意空间，可以实现各种复杂的旋转效果，如围绕特定点的旋转、偏心旋转等。
- flip 参数：这是一个 SDL_RendererFlip 类型的枚举值，用于指定纹理是否进行翻转操作，以及翻转的方向，它具有以下几种取值：
- SDL_FLIP_NONE：表示不进行任何翻转操作，纹理将按照原始的方向进行绘制，这是 SDL_RenderCopyEx 函数的默认值。在大多数情况下，如果不需要对纹理进行翻转处理，可以使用该默认值进行绘制。
- SDL_FLIP_HORIZONTAL：此取值表示将纹理进行水平翻转。例如，对于一个原本面向右的角色纹理，通过设置 flip 参数为 SDL_FLIP_HORIZONTAL，可以使其面向左，这种效果常用于实现角色左右移动方向改变时的视觉效果切换，使游戏角色的动画更加自然流畅。
- SDL_FLIP_VERTICAL：该值表示将纹理进行垂直翻转。垂直翻转可以用于创建一些特殊的视觉效果，如倒影、上下颠倒的图像显示等，为图形设计增添更多的变化和创意。

  • 返回值处理：SDL_RenderCopyEx 函数返回 0 表示绘制操作成功执行，若返回 - 1，则表示绘制过程中出现了错误。在实际编程中，如果函数返回 - 1，可以通过调用 SDL_GetError 函数获取详细的错误信息，以便进行针对性的错误排查和处理。例如：
if (SDL_RenderCopyEx(renderer, texture, nullptr, &dstRect, angle, &center, SDL_FLIP_NONE) < 0)
{
    std::cerr << "SDL_RenderCopyEx failed: " << SDL_GetError() << std::endl;
    // 根据具体情况进行错误处理，如显示错误提示信息、记录日志或尝试恢复操作等
}

示例：旋转和翻转纹理

  以下是一个完整的示例代码，展示了如何使用 SDL_RenderCopyEx 函数对纹理进行旋转和翻转操作，并将结果绘制到窗口上：


#include <SDL.h>
#include <SDL_image.h>
#include <iostream>
#include <cmath>

int main(int argv, char* argc[])
{
	if (SDL_Init(SDL_INIT_VIDEO) < 0)
	{
		std::cerr << "SDL_Init failed: " << SDL_GetError() << std::endl;
		return -1;
	}

	SDL_Window* window = SDL_CreateWindow("my window", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, 800, 600, SDL_WINDOW_SHOWN | SDL_WINDOW_RESIZABLE);
	if (window == nullptr)
	{
		std::cerr << "SDL_CreateWindow failed: " << SDL_GetError() << std::endl;
		// 清理 SDL2 资源并退出程序
		SDL_Quit();
		return -1;
	}


	// 创建一个与窗口关联的渲染器
	SDL_Renderer* renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED);
	if (renderer == nullptr)
	{
		std::cerr << "SDL_CreateRenderer failed: " << SDL_GetError() << std::endl;
		SDL_DestroyWindow(window);
		SDL_Quit();
		return -1;
	}

	// 加载第一个图像纹理
	SDL_Texture* texture = IMG_LoadTexture(renderer, "E:/pro/sdl_code/res/test_img.png");
	if (texture == nullptr)
	{
		std::cerr << "IMG_LoadTexture (image) failed: " << SDL_GetError() << std::endl;
		// 销毁渲染器、窗口并清理 SDL2 资源后退出程序
		SDL_DestroyRenderer(renderer);
		SDL_DestroyWindow(window);
		SDL_Quit();
		return -1;
	}

	// 获取纹理的宽度和高度
	int texture_width, texture_height;
	SDL_QueryTexture(texture, nullptr, nullptr, &texture_width, &texture_height);

	// 定义目标矩形，用于指定纹理绘制的位置和大小
	SDL_Rect dst_rect = { 0, 150, texture_width, texture_width };

	// 旋转 45 度（大约0.785弧度）并以纹理中心为旋转中心
	double angle = 0.785;
	SDL_Point center = { texture_width / 2, texture_height / 2 };

	// 先绘制原始纹理
	if (SDL_RenderCopy(renderer, texture, nullptr, &dst_rect) < 0)
	{
		std::cerr << "SDL_RenderCopy (original) failed: " << SDL_GetError() << std::endl;
		SDL_DestroyTexture(texture);
		SDL_DestroyRenderer(renderer);
		SDL_DestroyWindow(window);
		SDL_Quit();
		return -1;
	}

	// 水平移动目标矩形位置，用于显示旋转后的纹理
	dst_rect.x += 250;
	// 旋转并绘制纹理
	if (SDL_RenderCopyEx(renderer, texture, nullptr, &dst_rect, angle, &center, SDL_FLIP_NONE) < 0)
	{
		std::cerr << "SDL_RenderCopyEx (rotated) failed: " << SDL_GetError() << std::endl;
		SDL_DestroyTexture(texture);
		SDL_DestroyRenderer(renderer);
		SDL_DestroyWindow(window);
		SDL_Quit();
		return -1;
	}

	// 垂直移动目标矩形位置，用于显示翻转后的纹理
	dst_rect.x += 250;
	// 垂直翻转并绘制纹理
	if (SDL_RenderCopyEx(renderer, texture, nullptr, &dst_rect, 0, nullptr, SDL_FLIP_VERTICAL) < 0)
	{
		std::cerr << "SDL_RenderCopyEx (flipped) failed: " << SDL_GetError() << std::endl;
		SDL_DestroyTexture(texture);
		SDL_DestroyRenderer(renderer);
		SDL_DestroyWindow(window);
		SDL_Quit();
		return -1;
	}

	// 将渲染结果显示到窗口上
	SDL_RenderPresent(renderer);

	// 暂停程序执行 3000 毫秒，以便观察渲染结果
	SDL_Delay(3000);

	// 销毁纹理
	SDL_DestroyTexture(texture);
	// 销毁渲染器
	SDL_DestroyRenderer(renderer);
	// 销毁窗口
	SDL_DestroyWindow(window);
	// 清理 SDL2 资源并退出程序
	SDL_Quit();
	return 0;
}

  在这个示例中，首先初始化了 SDL2 的相关系统，并创建了窗口和渲染器。接着加载了一个图像纹理，并获取了该纹理的宽度和高度信息，以便后续设置旋转中心和目标矩形。然后，通过 SDL_RenderCopy 函数先绘制了原始纹理，接着使用 SDL_RenderCopyEx 函数分别对纹理进行了旋转和垂直翻转操作，并在不同的位置绘制出来，以便清晰地展示纹理变换的效果。最后，使用 SDL_RenderPresent 函数将渲染结果显示到窗口上，并通过 SDL_Delay 函数暂停程序执行一段时间，以便观察渲染结果。在程序结束前，依次销毁了纹理、渲染器和窗口，并清理了 SDL2 资源，确保程序的正常退出。

在这里插入图片描述

高级纹理缩放技巧（使用线性插值等）

  在某些特定的图形应用场景中，简单地通过调整 dstrect 来改变纹理大小可能会导致图像质量出现明显下降的问题，尤其是在对纹理进行放大操作时。为了获得更加优质、细腻的缩放效果，可以采用一些更高级的算法，如线性插值。

  线性插值是一种在两个已知数值之间生成新数值的有效方法。在纹理缩放的应用场景中，它可以用于精确计算新的像素值，从而在缩放过程中尽可能保留图像的细节和清晰度。虽然 SDL2 本身并没有直接提供专门用于纹理缩放的线性插值函数，但开发者可以通过一些数学计算来手动实现类似的效果。例如，当对纹理进行放大操作时，可以考虑每个新像素周围的原始纹理像素值，根据它们与新像素之间的距离和权重关系来计算新像素的最终值。以下是一个简单的概念示例代码（这里只是伪代码，实际实现可能会更加复杂，并且需要考虑更多的边界处理和优化情况）：

// 假设我们要将一个纹理从原始大小(textureWidth, textureHeight)放大到新的大小(newWidth, newHeight)
for (int y = 0; y < newHeight; y++)
{
    for (int x = 0; x < newWidth; x++)
    {
        // 计算在原始纹理中的对应位置（使用浮点数坐标进行插值计算）
        float originalX = (float)x * ((float)textureWidth / (float)newWidth);
        float originalY = (float)y * ((float)textureHeight / (float)newHeight);

        // 获取原始纹理中周围的四个像素坐标（整数部分）
        int x1 = (int)originalX;
        int y1 = (int)originalY;
        int x2 = x1 + 1;
        int y2 = y1 + 1;

        // 计算插值权重
        float dx = originalX - x1;
        float dy = originalY - y1;

        // 获取周围四个像素的颜色值（这里假设已经有获取像素颜色的函数 getPixelColor）
        Color color1 = getPixelColor(texture, x1, y1);
        Color color2 = getPixelColor(texture, x2, y1);
        Color color3 = getPixelColor(texture, x1, y2);
        Color color4 = getPixelColor(texture, x2, y2);

        // 使用线性插值计算新像素的颜色值
        Color newColor = interpolateColors(color1, color2, color3, color4, dx, dy);

        // 将新像素颜色值设置到新的纹理或渲染目标中（这里省略具体的设置步骤）
    }
}

  这种基于线性插值的方法在一定程度上能够有效提高纹理缩放的质量，使得放大后的图像在细节和过渡上更加自然平滑。然而，需要注意的是，这种方法的计算量相对较大，尤其是对于大规模的纹理或高分辨率的图像，可能会对程序的性能产生一定的影响。在实际的应用开发中，开发者需要根据具体的性能和质量要求来权衡是否采用这种较为复杂的缩放技术。如果对图像质量要求极高且硬件性能允许，可以考虑使用这种方法来获得出色的缩放效果；而在一些对性能要求较为苛刻或者图像质量要求不是特别严格的场景下，可能需要选择其他更简单高效的缩放策略，或者考虑使用一些专门的图形处理库，这些库通常提供了经过高度优化的高质量纹理缩放功能，可以在保证一定性能的前提下获得较好的图像质量。

旋转纹理的性能优化（减少不必要的计算）

  当在图形应用程序中频繁地对纹理进行旋转操作时，特别是在动画或游戏等对性能要求较高的场景下，如果每次都重新计算旋转角度、中心等参数，可能会导致严重的性能问题，影响程序的流畅性和响应速度。为了解决这一问题，可以采用以下几种有效的优化方法：

  • 缓存旋转后的纹理（如果纹理内容不变）：如果一个纹理在旋转过程中其内容始终保持不变（例如一个静态的图标、固定的背景元素等），可以在程序的初始化阶段将其旋转到不同的常见角度，并将这些旋转后的纹理版本进行缓存。然后在后续的渲染过程中，根据实际需要直接使用已经预先旋转好的纹理，而无需每次都进行实时的旋转计算。这样可以大大减少不必要的计算开销，提高程序的运行效率。例如：
// 假设我们有一个纹理 texture，我们想缓存它旋转 0 度、90 度、180 度和 270 度的版本
const int numRotatedTextures = 4;
SDL_Texture* rotatedTextures[numRotatedTextures];

// 旋转 0 度（原始纹理）
rotatedTextures[0] = texture;

// 旋转 90 度
double angle90 = M_PI / 2; // 90 度的弧度值
SDL_Point center90 = {textureWidth / 2, textureHeight / 2};
rotatedTextures[1] = createRotatedTexture(renderer, texture, angle90, center90);

// 类似地创建旋转 180 度和 270 度的纹理
// 这里假设 createRotatedTexture 函数是一个自定义函数，用于创建旋转后的纹理
// 其内部可以通过 SDL_RenderCopyEx 函数将纹理旋转并绘制到一个新的纹理对象上

// 在渲染过程中，根据旋转角度需求选择合适的缓存纹理
if (desiredRotation == 90)
{
    if (SDL_RenderCopy(renderer, rotatedTextures[1], nullptr, &dstRect) < 0)
    {
        // 处理错误
    }
}
// 其他角度情况类似

  通过这种缓存机制，在需要频繁使用特定角度旋转纹理的场景中，可以显著减少计算量，提高渲染性能。

  • 利用旋转矩阵进行批量旋转计算（对于多个相关纹理）：如果在程序中有多个纹理需要按照相同的角度和中心进行旋转，可以利用旋转矩阵这一数学工具来简化计算过程，提高性能。旋转矩阵是一种用于表示二维空间中旋转操作的数学结构。对于每个纹理的顶点坐标（假设纹理被绘制为一个四边形），可以通过与旋转矩阵相乘来快速计算出旋转后的坐标。例如：
// 旋转矩阵结构体
struct RotationMatrix
{
    double matrix[2][2];
};

// 创建旋转矩阵函数
RotationMatrix createRotationMatrix(double angle)
{
    RotationMatrix matrix;
    matrix.matrix[0][0] = cos(angle);
    matrix.matrix[0][1] = -sin(angle);
    matrix.matrix[1][0] = sin(angle);
    matrix.matrix[1][1] = cos(angle);
    return matrix;
}

// 假设我们有一个纹理数组 textures，包含多个要旋转的纹理
std::vector<SDL_Texture*> textures;
// 旋转角度
double angle = M_PI / 4; // 45 度
RotationMatrix rotationMatrix = createRotationMatrix(angle);

// 对于每个纹理，计算旋转后的顶点坐标（这里假设纹理的顶点坐标存储在一个数组中）
for (int i = 0; i < textures.size(); i++)
{
    SDL_Point vertices[4]; // 假设纹理四边形的四个顶点
    // 这里假设已经初始化了原始顶点坐标

    for (int j = 0; j < 4; j++)
    {
        double newX = rotationMatrix.matrix[0][0] * vertices[j].x + rotationMatrix.matrix[0][1] * vertices[j].y;
        double newY = rotationMatrix.matrix[1][0] * vertices[j].x + rotationMatrix.matrix[1][1] * vertices[j].y;
        vertices[j].x = (int)newX;
        vertices[j].y = (int)newY;
    }

    // 使用旋转后的顶点坐标绘制纹理（这里省略具体的绘制代码，可能需要根据新坐标更新 dstrect 等参数）
}

  这种方法通过预先计算旋转矩阵，并利用矩阵乘法来批量处理多个纹理的旋转坐标计算，避免了对每个纹理都重复进行三角函数计算，从而大大提高了多个纹理旋转操作的性能。特别是在处理大量纹理或者需要实时旋转多个对象的复杂场景下，这种优化方法能够显著提升程序的运行效率，减少卡顿现象，为用户提供更加流畅的视觉体验。

总结

  通过深入学习和灵活运用这些高级图形操作和优化技巧，开发者能够在 SDL2 平台上创建出更加丰富多样、高质量且性能卓越的图形应用程序。无论是开发简单的 2D 游戏、精美的图形界面，还是复杂的动画演示，这些技术都将为开发者提供强大的支持和广阔的创意空间。在实际的开发过程中，开发者需要根据具体的应用场景特点、性能要求以及硬件设备条件等多方面因素综合考虑，选择最适合的方法和技术组合，以达到最佳的开发效果和用户体验。

标签：函数,int,绘制,纹理,第五,图形操作,SDL,旋转,优化
From： https://blog.csdn.net/weixin_53223301/article/details/143449399

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99