精华内容
下载资源
问答
  • OpenGL使用精灵图集

    2018-10-30 17:14:05
    使用OpenGL绘制开机动画,fps33,使用精灵图集 使用OpenCV载入纹理。 运行环境ubuntu16, 废话不多说,上源码。 主程序main.cpp // // Created by czh on 18-9-10. // #include <glad/glad...

    使用OpenGL绘制开机动画,fps30,使用精灵图集
    使用OpenCV载入纹理。
    运行环境ubuntu16,
    废话不多说,上源码。

    主程序main.cpp

    //
    // Created by czh on 18-9-10.
    //
    
    #include <glad/glad.h>
    #include <GLFW/glfw3.h>
    #include "animation.h"
    #include "dconfig.h"
    
    Animation animation(SCREEN_WIDTH, SCREEN_HEIGHT);
    
    void keyCallback(GLFWwindow *window, int key, int scancode, int action, int mode) {
        if (key == GLFW_KEY_ESCAPE && action == GLFW_PRESS)
            glfwSetWindowShouldClose(window, GL_TRUE);
        if (key >= 0 && key < 1024) {
            if (action == GLFW_PRESS)
                animation.keys[key] = GL_TRUE;
            else if (action == GLFW_RELEASE)
                animation.keys[key] = GL_FALSE;
        }
    }
    
    void mainLoop() {
    
    }
    
    int main() {
        glfwInit();
        glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
        glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
        glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
        glfwWindowHint(GLFW_RESIZABLE, GL_FALSE);
        GLFWwindow *window = glfwCreateWindow(SCREEN_WIDTH, SCREEN_HEIGHT, "Blizzard", nullptr, nullptr);
        glfwMakeContextCurrent(window);
        glfwSetKeyCallback(window, keyCallback);
        gladLoadGLLoader((GLADloadproc) glfwGetProcAddress);
    
        animation.init();
    
        while (!glfwWindowShouldClose(window)) {
            glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
            glClear(GL_COLOR_BUFFER_BIT);
    
            animation.render(window);
    
            glfwSwapBuffers(window);
            glfwPollEvents();
    
        }
    
        glfwTerminate();
    
        return 0;
    }
    

    animation类头文件

    #ifndef OPENGL_PRO_ANIMATION_H
    #define OPENGL_PRO_ANIMATION_H
    
    #include <glad/glad.h>
    #include <GLFW/glfw3.h>
    #include <glm/gtc/type_ptr.hpp>
    #include <glm/glm.hpp>
    #include <glm/gtc/type_ptr.hpp>
    #include <glm/gtc/matrix_transform.hpp>
    #include <map>
    #include <GLFW/glfw3.h>
    #include "resource_manager.h"
    #include "sprite_renderer.h"
    
    enum AnimationState {
        BOOT_ON,
        BOOT_OFF
    };
    
    
    class Animation {
    public:
    
        AnimationState state;
        GLuint width, height;
        GLboolean keys[1024];
    
        Animation(GLuint width, GLuint height);
    
        ~Animation();
    
        void init();
    
        void destory();
    
        void processInput(float dt);
    
        void update();
    
        void displayVideo(GLFWwindow *window);
    
        void render(GLFWwindow *window);
    
        const char *defaultVshaderStr =
                "#version 330 core                                  \n"
                "layout (location = 0) in vec4 vertex;              \n"
                "out vec2 TexCoords;                                \n"
                "uniform mat4 model;                                \n"
                "uniform mat4 projection;                           \n"
                "uniform vec4 location;                             \n"
                "void main()                                        \n"
                "{                                                  \n"
                "   TexCoords.x = vertex.z * location.x + location.z;\n"
                "   TexCoords.y = vertex.w * location.y + location.w;\n"
                "   gl_Position = projection * model * vec4(vertex.xy, 0.0f, 1.0f);\n"
                "}                                                  \n";
    
        const char *defaultFshaderStr =
                "#version 330 core                                  \n"
                "precision mediump float;                           \n"
                "in vec2 TexCoords;                                 \n"
                "out vec4 color;                                    \n"
                "uniform sampler2D image;                           \n"
                "uniform vec3 spriteColor;                          \n"
                "void main()                                        \n"
                "{                                                  \n"
                "   color = vec4(spriteColor, 1.0) * texture(image, TexCoords);\n"
                "}                                                  \n";
    
    
    
    private:
    };
    
    
    #endif //OPENGL_PRO_ANIMATION_H
    

    aniamtion类源码

    //
    // Created by czh on 18-9-10.
    //
    
    #include <unistd.h>
    #include "animation.h"
    
    SpriteRenderer *spriteRender;
    
    Animation::Animation(GLuint width, GLuint height) : state(BOOT_ON), width(width), height(height) {
    }
    
    Animation::~Animation() {
    
    }
    
    void Animation::init() {
        glViewport(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
        glEnable(GL_CULL_FACE);
        glEnable(GL_BLEND);
        glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
        this->state = BOOT_ON;
    
        ResourceManager::loadShader("sprite", defaultVshaderStr, defaultFshaderStr);
    
        glm::mat4 projection = glm::mat4(1.0f);
        projection = glm::ortho(0.0f, static_cast<GLfloat>(this->width), static_cast<GLfloat>(this->height), 0.0f, -1.0f, 1.0f);
        ResourceManager::getShader("sprite").setInteger("image", 0);
        ResourceManager::getShader("sprite").setMatrix4("projection", projection);
        ResourceManager::loadTexture2D("opening1", "../blizzard/res/textures/opening0,1.png");
        ResourceManager::loadTexture2D("opening2", "../blizzard/res/textures/opening1,2.png");
        ResourceManager::getShader("sprite").setVector4f("location", glm::vec4(1.0f, 1.0f, 0.0f, 0.0f));
    
    
        spriteRender = new SpriteRenderer(ResourceManager::getShader("sprite"));
    }
    
    void Animation::destory() {
        //ResourceManager::clear();
    }
    
    void Animation::processInput(float dt) {
    
    }
    
    void Animation::update() {
    
    }
    
    void Animation::displayVideo(GLFWwindow *window){
        int px, py;
        float scaleX, scaleY, moveX, moveY;
        scaleX = 1.0f / 3.0f;
        scaleY = 1.0f / 8.0f;
        static int i = 0;
        for(int i = 0; i < 48; i++){
            px = i % 3;
            py = i / 6;
            moveX = (float)px / 3.0f;
            moveY = (float)py / 8.0f;
    
            if(i%6 < 3){
                ResourceManager::getShader("sprite").setVector4f("location", glm::vec4(scaleX, scaleY, moveX, moveY));
                spriteRender->drawSprite(ResourceManager::getTexture2D("opening1"), glm::vec2(0.0f, 0.0f), glm::vec2(1280.0f, 480.0f), 0.0f,
                                         glm::vec3(1.0f, 1.0f, 1.0f));
            } else{
                ResourceManager::getShader("sprite").setVector4f("location", glm::vec4(scaleX, scaleY, moveX, moveY));
                spriteRender->drawSprite(ResourceManager::getTexture2D("opening2"), glm::vec2(0.0f, 0.0f), glm::vec2(1280.0f, 480.0f), 0.0f,
                                         glm::vec3(1.0f, 1.0f, 1.0f));
            }
    #ifdef  SML
            std::cout << moveX << "," << moveY << std::endl;
    #endif
            glfwSwapBuffers(window);
            glfwPollEvents();
            usleep(1000 * 33);
        }
    }
    
    void Animation::render(GLFWwindow *window) {
        if (this->state == BOOT_ON) {
            this->displayVideo(window);
        }
    }
    

    开机动画一共48张图,由TexturePacker工具打包制作成精灵图集分别存入opening0,1.png、opening1,2.png。通过函数setVector4f可以设置每次绘图的视图大小和位置。

    ResourceManager::getShader("sprite").setVector4f("location", glm::vec4(scaleX, scaleY, moveX, moveY));
    

    ResourceManager类

    //
    // Created by czh on 18-9-10.
    //
    
    #ifndef OPENGL_PRO_RESOURCE_MANAGER_H
    #define OPENGL_PRO_RESOURCE_MANAGER_H
    
    #include <iostream>
    #include <map>
    #include <glad/glad.h>
    #include <stb_image/stb_image.h>
    #include "shader.h"
    #include "texture.h"
    #include "texture_vision.h"
    #include "vision/vision.h"
    
    class ResourceManager {
    public:
    
        static std::map<std::string, Shader> shaders;
    
        static std::map<std::string, Texture2D> textures;
    
        static std::map<std::string, cv::Mat> images;
    
        static Shader loadShader(std::string name, const GLchar *vShader, const GLchar *fShader, const GLchar *gShader = nullptr);
    
        static Shader getShader(std::string name);
    
        static cv::Mat readTexture2D(std::string file);
    
        static int loadTexture2D(std::string name, std::string file, bool save = true);
    
        static int loadTexture2D(std::string name, cv::Mat image, bool save = true);
    
        static int writeTexture2D(std::string name, std::string file);
    
        static Texture2D getTexture2D(std::string name);
    
        static Texture2D loadTextureVision(std::string name, cv::Mat *img);
    
        static void clear();
    
    private:
        ResourceManager() {}
    
    };
    
    
    #endif //OPENGL_PRO_RESOURCE_MANAGER_H
    
    //
    // Created by czh on 18-9-10.
    //
    
    #include "resource_manager.h"
    
    
    std::map<std::string, Texture2D>    ResourceManager::textures;
    std::map<std::string, Shader>   ResourceManager::shaders;
    std::map<std::string, cv::Mat>   ResourceManager::images;
    
    void ResourceManager::clear() {
    
    }
    
    Shader
    ResourceManager::loadShader(std::string name, const GLchar *vShader, const GLchar *fShader, const GLchar *gShader) {
        Shader shader;
        shader.compile(vShader, fShader, gShader);
        shaders[name] = shader;
    }
    
    Shader ResourceManager::getShader(std::string name) {
        return shaders[name];
    }
    
    cv::Mat ResourceManager::readTexture2D(std::string file) {
        cv::Mat image = Vision::read(file, cv::IMREAD_ANYCOLOR | cv::IMREAD_ANYDEPTH);
        return image;
    }
    
    int ResourceManager::loadTexture2D(std::string name, std::string file, bool save) {
        Texture2D texture2D;
        cv::Mat image = readTexture2D(file);
        if (image.data == nullptr) {
            printf("#loadTexture2D err\n");
            return -1;
        }
        if (image.channels() == 3) {
            texture2D.Image_Format = GL_BGR;
            texture2D.Internal_Format = GL_RGB;
        } else if (image.channels() == 4) {
            texture2D.Image_Format = GL_BGRA;
            texture2D.Internal_Format = GL_RGBA;
        }
        texture2D.update(image.size().width, image.size().height, image.data);
        textures[name] = texture2D;
        if (save) {
            images[name] = image;
        }
        return 0;
    }
    
    int ResourceManager::loadTexture2D(std::string name, cv::Mat image, bool save) {
        Texture2D texture2D;
        if (image.data == nullptr) {
            printf("#loadTexture2D err\n");
            return -1;
        }
        if (image.channels() == 3) {
            texture2D.Image_Format = GL_BGR;
            texture2D.Internal_Format = GL_RGB;
        } else if (image.channels() == 4) {
            texture2D.Image_Format = GL_BGRA;
            texture2D.Internal_Format = GL_RGBA;
        }
        texture2D.update(image.size().width, image.size().height, image.data);
        textures[name] = texture2D;
        if (save) {
            images[name] = image;
        }
        return 0;
    }
    
    int ResourceManager::writeTexture2D(std::string name, std::string file) {
        Texture2D texture2D;
        cv::Mat image = readTexture2D(file);
        if (images.find(name) == images.end()) {
            printf("#writeTexture2D error, w/o %s\n", name.data());
            return false;
        }
        cv::imwrite(file, images[name]);
        return true;
    }
    
    Texture2D ResourceManager::getTexture2D(std::string name) {
        if (images.find(name) == images.end()) {
            printf("#getTexture2D error, w/o %s\n", name.data());
        }
        return textures[name];
    }
    
    Texture2D ResourceManager::loadTextureVision(std::string name, cv::Mat *img) {
        //PicData picData = Vision::read(file_path);
        TextureVision textureVision;
        textureVision.update(img);
        textures[name] = textureVision;
    }
    

    shader类

    //
    // Created by czh on 18-9-10.
    //
    
    #ifndef OPENGL_PRO_SHADER_H
    #define OPENGL_PRO_SHADER_H
    
    #include <iostream>
    #include <glad/glad.h>
    #include <glm/glm.hpp>
    #include <glm/gtc/type_ptr.hpp>
    #include "dconfig.h"
    
    class Shader {
    public:
    
        Shader() {};
    
        int ID;
    
        Shader &use();
    
        void compile(const GLchar *vShaderSource, const GLchar *fShaderSource, const GLchar *gShaderSource);
    
        void setInteger(const GLchar *name, GLint value, GLboolean useShader = true);
    
        void setVector2f(const GLchar *name, const glm::vec2 &value, GLboolean useShader = true);
    
        void setVector3f(const GLchar *name, const glm::vec3 &value, GLboolean useShader = true);
    
        void setVector4f(const GLchar *name, const glm::vec4 &value, GLboolean useShader = true);
    
        void setMatrix4(const GLchar *name, const glm::mat4 &matrix, GLboolean useShader = true);
    
    private:
        void checkCompileErrors(GLuint object, std::string type);
    };
    
    
    #endif //OPENGL_PRO_SHADER_H
    
    
    //
    // Created by czh on 18-9-10.
    //
    
    #include "shader.h"
    
    void Shader::compile(const GLchar *vShaderSource, const GLchar *fShaderSource, const GLchar *gShaderSource) {
        GLuint sVertex, sFragment, gShader;
    
        sVertex = glCreateShader(GL_VERTEX_SHADER);
        glShaderSource(sVertex, 1, &vShaderSource, nullptr);
        glCompileShader(sVertex);
        checkCompileErrors(sVertex, "VERTEX");
    
        sFragment = glCreateShader(GL_FRAGMENT_SHADER);
        glShaderSource(sFragment, 1, &fShaderSource, NULL);
        glCompileShader(sFragment);
        checkCompileErrors(sFragment, "FRAGMENT");
    
        if (gShaderSource != nullptr) {
            gShader = glCreateShader(GL_GEOMETRY_SHADER);
            glShaderSource(gShader, 1, &gShaderSource, NULL);
            glCompileShader(gShader);
            checkCompileErrors(gShader, "GEOMETRY");
        }
    
        this->ID = glCreateProgram();
    #ifdef SML
        std::cout << "#glCreateProgram ID:" << this->ID;
        if (gShaderSource == nullptr) {
            std::cout << " w/o_gShader" << std::endl;
        } else {
            std::cout << " w/_gShader" << std::endl;
        }
    #endif
        glAttachShader(this->ID, sVertex);
        glAttachShader(this->ID, sFragment);
        if (gShaderSource != nullptr)
            glAttachShader(this->ID, gShader);
        glLinkProgram(this->ID);
        checkCompileErrors(this->ID, "PROGRAM");
    
        glDeleteShader(sVertex);
        glDeleteShader(sFragment);
        if (gShaderSource != nullptr)
            glDeleteShader(gShader);
    
    }
    
    Shader &Shader::use() {
        glUseProgram(this->ID);
        //std::cout << "#Use glUseProgram: " << this->ID << std::endl;
        return *this;
    }
    
    void Shader::setInteger(const GLchar *name, GLint value, GLboolean useShader) {
        if (useShader)
            this->use();
        glUniform1i(glGetUniformLocation(this->ID, name), value);
    }
    
    void Shader::setVector2f(const GLchar *name, const glm::vec2 &value, GLboolean useShader) {
        if (useShader)
            this->use();
        glUniform2f(glGetUniformLocation(this->ID, name), value.x, value.y);
    }
    
    void Shader::setVector3f(const GLchar *name, const glm::vec3 &value, GLboolean useShader) {
        if (useShader)
            this->use();
        glUniform3f(glGetUniformLocation(this->ID, name), value.x, value.y, value.z);
    }
    
    void Shader::setVector4f(const GLchar *name, const glm::vec4 &value, GLboolean useShader) {
        if (useShader)
            this->use();
        glUniform4f(glGetUniformLocation(this->ID, name), value.x, value.y, value.z, value.w);
    }
    
    void Shader::setMatrix4(const GLchar *name, const glm::mat4 &matrix, GLboolean useShader) {
        if (useShader)
            this->use();
        glUniformMatrix4fv(glGetUniformLocation(this->ID, name), 1, GL_FALSE, glm::value_ptr(matrix));
    }
    
    void Shader::checkCompileErrors(GLuint object, std::string type) {
        GLint success;
        GLchar infoLog[1024];
        if (type != "PROGRAM") {
            glGetShaderiv(object, GL_COMPILE_STATUS, &success);
            if (!success) {
                glGetShaderInfoLog(object, 1024, NULL, infoLog);
                std::cout << "| ERROR::SHADER: Compile-time error: Type: " << type << "\n"
                          << infoLog << "\n -- ----------------------------------------------------- "
                          << std::endl;
            }
        } else {
            glGetProgramiv(object, GL_LINK_STATUS, &success);
            if (!success) {
                glGetProgramInfoLog(object, 1024, NULL, infoLog);
                std::cout << "| ERROR::Shader: Link-time error: Type: " << type << "\n"
                          << infoLog << "\n -- ----------------------------------------------------- "
                          << std::endl;
            }
        }
    }
    

    开机动画效果图就不放了,会被炒鱿鱼

    展开全文
  • 图集图片(png、tga)放入Unity的“Assets/Resources”目录下,选中图集,在Inspector面板做如下操作: 1.将Texture Type改成Sprite(2D and UI) 2.将Sprite Mode改成Multiple 3.将Read/Write Enabled 4.将...

    将图集图片(png、tga)放入Unity的“Assets/Resources”目录下,选中图集,在Inspector面板做如下操作:

    1.将Texture Type改成Sprite(2D and UI)

    2.将Sprite Mode改成Multiple

    3.将Read/Write Enabled

    4.将Format改成RGBA 32bit

    5.点击Apply

    操作如下图

    修改图片属性

    点击Sprite Editor,进入精灵编辑器,如下图:

    设置切图

    进入精灵编辑器后,点击编辑器左上角的Slice,然后在弹出的下拉框中点击Slice,最后点击右上角的Apply,完成对图集切图。

    精灵编辑器

    完成对图集的切图后,创建C#脚本ExportSpriteEditor.cs文件并添加如下代码:

    using UnityEngine;
    using UnityEditor;
    
    /// <summary>
    /// 导出精灵工具
    /// </summary>
    public class ExportSpriteEditor
    {
        [MenuItem("Tools/导出精灵")]
        static void ExportSprite()
        {
            string resourcesPath = "Assets/Resources/";
            foreach (Object obj in Selection.objects)
            {
                string selectionPath = AssetDatabase.GetAssetPath(obj);
    
                if (selectionPath.StartsWith(resourcesPath))
                {
                    string selectionExt = System.IO.Path.GetExtension(selectionPath);
                    if (selectionExt.Length == 0)
                    {
                        Debug.LogError($"资源{selectionPath}的扩展名不对,请选择图片资源");
                        continue;
                    }
    
                    // 设置图片属性
    //                string path = AssetDatabase.GetAssetPath(obj);
    //                TextureImporter ti = (TextureImporter) TextureImporter.GetAtPath(path);
    //                ti.textureType = TextureImporterType.Sprite;
    //                ti.spriteImportMode = SpriteImportMode.Multiple;
    //                // 旧版Unity方法
                    ti.textureFormat = TextureImporterFormat.RGBA32;
    //                ti.textureCompression = TextureImporterCompression.Uncompressed;
    //                ti.isReadable = true;
    //                AssetDatabase.ImportAsset(path);
    
                    // 如果selectionPath = "Assets/Resources/UI/Common.png"
                    // 那么loadPath = "UI/Common"
                    string loadPath = selectionPath.Remove(selectionPath.Length - selectionExt.Length);
                    loadPath = loadPath.Substring(resourcesPath.Length);
    
                    // 加载此文件下的所有资源
                    Sprite[] sprites = Resources.LoadAll<Sprite>(loadPath);
                    if (sprites.Length > 0)
                    {
                        // 创建导出目录
                        string exportPath = Application.dataPath + "/ExportSprite/" + loadPath;
                        System.IO.Directory.CreateDirectory(exportPath);
    
                        foreach (Sprite sprite in sprites)
                        {
                            Texture2D tex = new Texture2D((int) sprite.rect.width, (int) sprite.rect.height,
                                sprite.texture.format, false);
                            tex.SetPixels(sprite.texture.GetPixels((int) sprite.rect.xMin, (int) sprite.rect.yMin,
                                (int) sprite.rect.width, (int) sprite.rect.height));
                            tex.Apply();
    
                            // 将图片数据写入文件
                            System.IO.File.WriteAllBytes(exportPath + "/" + sprite.name + ".png", tex.EncodeToPNG());
                        }
    
                        Debug.Log("导出精灵到" + exportPath);
                    }
    
                    Debug.Log("导出精灵完成");
                    // 刷新资源
                    AssetDatabase.Refresh();
                }
                else
                {
                    Debug.LogError($"请将资源放在{resourcesPath}目录下");
                }
            }
        }
    }

    代码创建完毕,选中图集图片文件,如下图:

    选中图集

    点击Unity顶部的菜单栏,选中Tools,点击“导出精灵”,如下图:

    标题

    在Assets/ExportSprite目录下就可以找到导出的切图文件了。如下图:

    导出的切图

    最后附上工程地址,有问题,可以在博客留言。

    https://gitee.com/foryun/UnityExportSprite

    展开全文
  • 1.为什么要打图集  降Draw Call! 在Unity中, 每一次引擎准备好要渲染数据并通知GPU的过程称为一次Draw Call. 对于开发者而言, 每帧的drawcall越低越好, 过多的drawcall会导致渲染过程极度耗时造成视觉卡顿. Unity...

    1.为什么要打图集

     降Draw Call! 在Unity中, 每一次引擎准备好要渲染数据并通知GPU的过程称为一次Draw Call. 对于开发者而言, 每帧的drawcall要限制在一个比较小的数字, 过多的drawcall会导致渲染过程极度耗时造成视觉卡顿. Unity内置了批次处理技术(batch), 只要游戏对象的Transform(不太严谨)和材质相同, 就合并为一个批次, 在一个drawcall内处理. 而降低批次效果最明显的方法就是打图集!

     减少IO! 打图集简单来说就是把一系列散图合并成一张大图, 在游戏运行时只需一次性加载大图, 在用到各散图时从大图中找, 达到了以内存空间换取读图效率的目的. 打图集有一些规则比如图集最好不要留空已达到最大利用率, 图集的长款最好为2的整次幂方便压缩等等, 不做赘述, 说TexturePacker!.

    2.TexturePacker使用流程

     官网: https://www.codeandweb.com/texturepacker
     Asset Store中搜可以找到Pro版和Free版, 不知道有啥区别
     还有一个需要用到的是Texture Packer Importer, 商店搜, 免费!
     在使用TP前需要先在Unity中导入TP importer, 在这里插入图片描述只需要留下Editor部分

    GUI界面长这样:
    在这里插入图片描述
     我们把需要打图集的某个文件夹丢进来之后会有一个图集样式的预览在这里插入图片描述
    在这里插入图片描述
     点击发布精灵表之后, 会有一个对应格式的图和一个tpsheet文件出现在输出目录在这里插入图片描述
     tpsheet里记录了图集的各种参数已经每个小图的位置信息, 中心点信息等,我们后面再说.

     之后把这两个文件丢到Unity的某个目录下, 注意同级, 丢进来之后就是自动分割好的图集
    在这里插入图片描述
    在这里插入图片描述
     成功!

    3.TexturePacker参数设置

     找点重点的说!

    在这里插入图片描述
     其实就是刚才说的那个TPSHEET的格式, 当然是选Unity啦

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191025144829462.png
     像素格式肯定是要问UI大佬, 能降则降.

    在这里插入图片描述
     图集的布局格式还是建议2的整次幂, 调节大小的时候预览图会变, 可以根据预览图打出最小的图集!

    在这里插入图片描述
     是否去掉精灵的透明通道, 有些精灵去掉透明通道后会变得很小, 可能与原美术效果不符, 可以选择裁剪并保持位置使精灵保持了有透明通道时的位置.

    在这里插入图片描述
     点击了某个具体的精灵后会有这个参数设置, 就是图集中精灵的pivot啦

    展开全文
  • 图集分割裁剪工具

    2018-07-27 16:02:38
    对png大图集进行分割裁剪,支持对导出的图片旋转,大小调整,只支持win7 以上的64位机,下载前请查看清楚,以免对你造成积分浪费
  • 纹理图集(Texture Atlas)也称为精灵表(Sprite Sheet),它是把许多小的精灵图片组合到一张大图里面。使用纹理图集(或精灵表)有如下主要优点: 减少文件读取次数,读取一张图片比读取一堆小文件要...

    游戏是一种很耗费资源的应用,特别是在移动设备中的游戏,性能优化是非常重要的

     纹理图集(Texture Atlas)也称为精灵表(Sprite Sheet),它是把许多小的精灵图片组合到一张大图里面。使用纹理图集(或精灵表)有如下主要优点

    减少文件读取次数,读取一张图片比读取一堆小文件要快。

    减少OpenGL ES绘制调用并且加速渲染。

    减少内存消耗。OpenGL ES 1.1仅仅能够使用2的n次幂大小的图片(即宽度或者高度是2、4、8、64...)。如果采用小图片OpenGL ES1.1会分配给每个图片2的n次幂大小的内存空间,即使这张图片达不到这样的宽度和高度也会分配大于此图片的2的n次幂大小的空间。那么运用这种图片集的方式将会减少内存碎片。虽然在Cocos2d-x v2.0后使用了OpenGL ES 2.0,它不会再分配2的几次幂的内存块了,但是减少读取次数和绘制的优势依然存在。

    Cocos2d-x全面支持Zwoptex和TexturePacker,所以创建和使用纹理图集是很容易的。

     

    我们通常可以使用纹理图集制作工具Zwoptex 和TexturePacker帮助我们设计和生成纹理图集文件如下图所示,以及纹理图集坐标文件(plist)组成。


    plist是属性列表文件,它是一种XML文件,SpirteSheet.plist文件代码如下:

    [html] view plaincopy在CODE上查看代码片派生到我的代码片

    1.   

    [html] view plaincopy在CODE上查看代码片派生到我的代码片

    1. <span style="font-size:14px;"><?xml version="1.0"encoding="UTF-8"?>  

    2. <!DOCTYPE plist PUBLIC "-//AppleComputer//DTD PLIST 1.0//EN""http://www.apple.com/DTDs/PropertyList-1.0.dtd">  

    3. <plist version="1.0">  

    4.    <dict>  

    5.        <key>frames</key>  

    6.        <dict>                                                                                                                               ①  

    7.             <key>hero1.png</key>                                                                                            ②  

    8.             <dict>  

    9.                 <key>frame</key>  

    10.                <string>{{2,1706},{391,327}}</string>                                                              ③  

    11.                 <key>offset</key>  

    12.                <string>{6,0}</string>  

    13.                 <key>rotated</key>  

    14.                 <false/>  

    15.                <key>sourceColorRect</key>  

    16.                 <string>{{17,0},{391,327}}</string>  

    17.                <key>sourceSize</key>  

    18.                <string>{413,327}</string>                                                                               ④  

    19.             </dict>  

    20.                        ……  

    21.            <key>mountain1.png</key>  

    22.             <dict>  

    23.                 <key>frame</key>  

    24.                <string>{{2,391},{934,388}}</string>  

    25.                 <key>offset</key>  

    26.                <string>{0,-8}</string>  

    27.                 <key>rotated</key>  

    28.                 <false/>  

    29.                <key>sourceColorRect</key>  

    30.                 <string>{{0,16},{934,388}}</string>  

    31.                <key>sourceSize</key>  

    32.                <string>{934,404}</string>  

    33.             </dict>  

    34.             … …  

    35.        </dict>  

    36.        <key>metadata</key>  

    37.        <dict>  

    38.             <key>format</key>  

    39.             <integer>2</integer>  

    40.            <key>realTextureFileName</key>  

    41.            <string>SpirteSheet.png</string>  

    42.             <key>size</key>  

    43.            <string>{1024,2048}</string>  

    44.            <key>smartupdate</key>           <string>$TexturePacker:SmartUpdate:5f186491d3aea289c50ba9b77716547f:abc353d00773c0ca19d20b55fb028270:755b0266068b8a3b8dd250a2d186c02b$</string>  

    45.            <key>textureFileName</key>  

    46.             <string>SpirteSheet.png</string>  

    47.        </dict>  

    48.    </dict>  

    49. </plist>  

    50. </span>  



    上述代码是plist文件,其中代码①~④描述了一个精灵帧(小的精灵图片)位置,第②行代码是精灵帧的名字,一般情况下它的命名与原始的精灵图片名相同。第③行代码描述了精灵帧的位置和大小,{2,1706}是精灵帧的位置,{391,327}是精灵帧的大小。由于我们不需要自己编写plist文件,其它的属性我们就不再介绍了。

     

     

    使用精灵表文件最简单的方式是使用Sprite 的create (const std::string &filename, const Rect &rect)函数,其中创建矩形Rect对象可以参考坐标文件中第③行代码的{{2,1706},{391,327}}数据。使用create代码如下:

     

    [html] view plaincopy在CODE上查看代码片派生到我的代码片

    1. <span style="font-size:14px;">   auto mountain1 = Sprite::create("SpriteSheet.png",Rect(2,391,934, 388));  

    2.               mountain1->setAnchorPoint(Point::ZERO);  

    3.     mountain1->setPosition(Point(-200,80));  

    4.     mountain1->addChild(mountain1,0);</span>  


    在创建纹理Texture2D对象,也可以使用精灵表文件,代码如下:

      

    [html] view plaincopy在CODE上查看代码片派生到我的代码片

    1. <span style="font-size:14px;">  Texture2D* cache = TextureCache::getInstance()->addImage("SpirteSheet.png");  

    2.     auto hero1 = Sprite::create();  

    3.     hero1->setTexture(cache);  

    4.     hero1->setTextureRect(Rect(2,1706,391,327));                                                                                    ①  

    5.     hero1->setPosition(Point(800,200));  

    6.     this->addChild(hero1,0);</span>  


    上述代码第①行中的setTextureRect函数,使用坐标文件中描述的数据。


    转载于:https://my.oschina.net/u/1410370/blog/266403

    展开全文
  • 基于TexturePacker和ugui,可具体查看精灵在预制中的引用,可以查看精灵名在代码中的引用,以便于清理冗余和无用资源。根据自己的工程在 AtlasSourceDataManagerConfigData(配置文件)中设置具体路径。图集文件默认...
  • Android-Sprite-Batcher 蒂姆·维克斯蒂德 Sprite Batcher 是一个帮助在 Android 中使用 OpenGL 绘制 ... 从用于绘制文本的字体生成精灵图集 绘制具有重复图案的点到点线 (1D) 使用重复图案(2D)绘制平铺纹理**实验*
  • UGUI 图集打包工具Sprite Packer

    万次阅读 2017-07-25 17:23:12
    设计的目的:让开发者忘记图集的概念,使用小图去开发UI,unity自动会将这些小图按照tag名字打到图集里面去。二.启用的方式:在Edit->Project Settings->Editor->Sprite Packer->Mode中进行设置: 1.Disabled:不启用。 ...
  • 你可以非常快速的导出一张纹理图集或者精灵表,所有精灵的位置都是自动来排列的,与图集对应的会产生一个XML配置文件。 每个精灵都以文件名为基础在配置文件中标出位置(XY)及大小(width、height)。 工具还有...
  • Unity编辑器下 图集精灵的获取

    千次阅读 2016-08-29 22:12:13
    孙广东 2015.12.11Unity中的图集打包工具没有提供这个功能。 没有更好的方法。可以选择图集, 查看里面的都包括哪些资源然后可以点击资源, 就会在 Project 面板中选择到指定的资源了。using UnityEngine; using ...
  • Unity 工具图集根据切割为一张张单张图片的简单封装(Unity 自带 SpritePackage 打包图集的性能优化) 目录 一、简单介绍 二、实现原理 三、注意事项 四、实现步骤 五、关键代码 附加 一、一些错误...
  • 如题,据我们的大神伟哥所说,我们在后面的开发中有可能会用到一个工具,需求是能够根据游戏原画所出的单个文字的图在游戏中能够方便的使用, 即跟调用 BMFont类型的字体一样。但是为什么要用原画出的图片,直接使用...
  • [MenuItem("Tools/导出精灵")] static void SaveSprite() { string resourcesPath1 = "Assets/ResourcesOut/ui/atlas"; foreach (Object obj in Selection.objects) { string selectionPath = As.
  • 分享一段利用cocos2dx中RenderTexture截图功能来拆分plist大图集的源代码。 函数声明: //解析plist大图集,imgPath:png大图。plistPath:plist文件 void DecodePlist(const std::string &imgPath, const ...
  • 网址:http://www.spritecow.com/ 把精灵图上传,然后选中自己想要的图标,复制下面的代码(记住改url为自己项目中精灵图的路径)
  • LayaAir 图集动画1—图集制作

    千次阅读 2018-12-16 15:30:37
    IDE 图集打包工具打包图集 资源管理器内自动打包图集 图集文件介绍 图集动画预览 图集制作·理论介绍 官网参考地址:https://ldc.layabox.com/doc/?language=zh&amp;nav=zh-js-2-2-0 1、图集(Atlas)是游戏...
  • 用于生成精灵的编辑器数据。 官方文档介绍:https://docs.unity3d.com/2017.2/Documentation/ScriptReference/SpriteMetaData.html 工具界面 工具使用场景 适用于游戏中存在多套皮肤图集 使用方法 拖入数据源图集...
  • 我们在搜集资源的时候会碰到把很多UI集成到一张png图片的情况,这个时候我们会用SpriteEditor将其分割,但是如果我们用NGUI的话就需要制作图集,这个时候我们需要小的图片来制作,可以用这个插件导出小的图片。...
  • Unity 制作图集

    2020-06-22 14:30:27
    一、制作图集的好处: 众所周知CPU是用来处理游戏的逻辑运算的,而GPU是用来处理游戏中图像的。在GPU中,我们要绘制一个图像需要提交图片(纹理)到...二、打包图集需要的工具 我们经常听说是在NGUI中打包图集,在用
  • 游戏进行过程中通常需要加载多张图片。如果每次只加载一张,则需要加载多次,那么这样就需要很长的时间和比较多的内存。如果我们把需要加载的多张图片整合到一张图片,则...TexturePacker就是这样的一个工具。Textur
  • 读取json文件切割图集

    2018-09-20 22:37:39
    读取json文件切割图集,支持按目录批量裁剪,保留命名
  • Cocos2d-JS 精灵的性能优化

    千次阅读 2016-04-12 14:32:41
    纹理图集已称为精灵表,它是把许多小的精灵图片组合到一张大图里面,使用纹理图集(或精灵表)有如下主要优点: (1)减少文件读取次数,读取一张图片比读取一堆小文件要快 (2)减少渲染引擎的绘制调用并且加速...
  • 因为自己开发小游戏的需求,让人感叹独立游戏没画师必si无疑(括弧笑),捣鼓出来了这个sprite sheet分割小工具,但是重要的并不是工具的好用,而是像素画也非常难画的好吧,为了偷懒下一个项目大概会想搞一个花哨点...
  • Unity UGUI图集专题

    2021-04-14 15:26:22
    一:图集介绍 什么是图集:我们可以将其理解为将一系列小图合并为一张大图。使用图集可以减少draw...(1)一种是使用系统自带的打包工具SpritePacker; (2)使用SpriteAtlas进行打包图集 (3)使用TexturePacker
  • 图集的好处: 什么是图集图集是一张包含了多个小图的大图和一份记录了每个小图id、位置、尺寸等数据的数据文件,一个图集应该对应两个文件,当然也有人把数据集成到图片中,导致看起来只有一张图片。 使用...
  • Unity的纹理图集创建者工具。 该工具用于组合纹理和/或重新映射3D模型的UV。 该工具还可以用于制作2D子画面。 可视化编辑器使您能够设置纹理地图集/精灵图纸中的大小和位置并确定其优先级。 组合纹理/精灵。 自动...
  • 20.TexturePacker图集打包

    2019-04-08 18:58:11
    1. 为什么要有图集 图片解码到内存, 内存加载到显卡生成OPENGL纹理;...图集打包工具TexturePacker的使用 (1)添加要打包的图片文件夹; --> Add Folder比较方便 (2)配置好对应的相关属性; (3)打包输出.p...
  • Sprite Atlas(精灵图集) Sprite Atlas 针对现有的图集打包系统Sprite Packer在性能和易用性上的不足,进行了全面改善。除此之外,相比Sprite Packer,Sprite Atlas将对精灵更多的控制权交还给用户,而且更加直观可...
  • 项目图集优化之一

    2019-09-27 10:21:18
    项目中的图集已经优化了很多了。我目前的工作是看看还有没有可以优化的空间。当然这项工作目前还在做。在开始这项工作之前,做了一些准备工作——数据的采集。我的思路是,不管后面要如何动手,先... 写了一个小工具...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 724
精华内容 289
关键字:

精灵图集工具