0x07. 處理精靈

時間  2019-11-24
標籤 0x07 處理 精靈 简体版
原文   原文鏈接

經過以前的代碼, 已經搞出了個根據方向鍵移動的矩形， 咱們要是把一個飛船紋理加載到矩形上，就是個可移動的飛船了， 紋理加載若是本身實現，很是繁瑣，幸虧 SDL 幫咱們處理了細節，只要作一個調參俠，我也能夠快速加載紋理。canvas

精靈

不過標題說是處理精力，個麼如今先講一下精靈（sprite）是什麼玩意，若是從事過遊戲開發，應該能理解精靈是什麼玩意，可是廢話仍是要講的。假如你要模擬一條火龍噴火的效果，要是作個 3D 遊戲，爲了效果逼真咱們固然能夠寫個粒子動畫模擬火焰，不過 2D 遊戲能夠不須要這麼複雜，一條龍用一張圖片顯示，這張圖片分幾個區域，上面有閉嘴的狀態圖片，張嘴噴火的狀態圖片，而後顯示不一樣區域，就能夠表現龍噴火的效果。ide

這裏放一下圖片素材，好理解上面的意思。函數

飛船精靈

這張圖包含九個小圖，中間的是飛船普通狀態，要是鍵盤點擊上鍵，就讓以前的矩形顯示第一排第二個圖，若是點擊左就顯示第二排第一個圖，其餘操做相似理解就好。佈局

Cargo.toml 配置改一下，由於立刻要用到 image 相關到東西。動畫

[dependencies.sdl2]
version = "0.29"
default-features = false
features = ["image"]
複製代碼

加載紋理

可是飯要一口一口吃，先把加載紋理的事熟悉一下。如今要搞個飛船，先把名字改一下，RectView 不符合語義化，建議擊斃，改爲 ShipView，這是個飛船視圖，裏面的內容稍微改一下，本質上其實沒區別，只是名字變了。ui

use sdl2::render::{Texture, TextureQuery};
struct Ship {
    rect: Rectangle,
    tex: Texture,
}

pub struct ShipView {
    player: Ship,
}
複製代碼

接下來把 impl RectView 改一下，天然是改爲 impl ShipView。spa

impl ShipView {
    pub fn new(phi: &mut Phi) -> Self {
        let tex = phi.canvas
        .load_texture(Path::new("assets/spaceship.png"))
        .unwrap();
        let TextureQuery { width, height, .. } = texture.query();
        Self {
            player: Ship {
                // width: u32, height: u32
                rect: Rectangle {
                    x: 64.0,
                    y: 64.0,
                    w: width as f64,
                    h: height as f64,
                },
                tex
            },
        }
    }
}
複製代碼

解構語法看着真爽，回到 ShipView 的 render 函數，把渲染操做修改一下指針

impl View for ShipView {
    fn render(&mut self, context: &mut Phi) -> ViewAction {
        ...
        phi.canvas.copy(
        &mut self.player.tex,
        Rectangle {
            x: 0.0, y: 0.0,
            w: self.player.rect.w,
            h: self.player.rect.h,
        }.to_sdl(),
        self.player.rect.to_sdl());
    }
}
複製代碼

如今就很厲害了，把整張圖都渲染出來了，接下來把九個小圖，只顯示其中一個，就拿中間那個開刀。
由於整圖大小是 129 * 117，恰好九個，因此每一個小圖大小是 43 * 39，既然小圖大小肯定那就定義常量吧，反正這個東西固定了。code

const SHIP_W = 43.0;
const SHIP_H = 39.0;

// ...

impl ShipView {
    pub fn new(phi: &mut Phi) -> Self {
        let tex = phi.canvas
        .load_texture(Path::new("assets/spaceship.png"))
        .unwrap();
        Self {
            player: Ship {
                rect: Rectangle {
                    x: 64.0,
                    y: 64.0,
                    w: SHIP_W,
                    h: SHIP_H,
                },
                tex,
            },
        }
    }
}

// ...

phi.canvas.copy(
    &mut self.player.tex,
    Rectangle {
        x: SHIP_W, y: SHIP_H,
        w: self.player.rect.w,
        h: self.player.rect.h,
    }.to_sdl(),
    self.player.rect.to_sdl());
複製代碼

這樣就顯示中間那個格子的小圖了，顯示效果應該還不錯，就是醜了點，黃黃的背景還沒處理，並且，要怎麼實現上面說到的精靈圖呢？orm

步入正題

每次執行 copy 圖片某區域操做，就能達到顯示該區域的效果，其實咱們能夠一次性 copy 全部的區域，而後根據鍵盤事件切換到對應區域就解決問題了。

struct Ship {
    rect: Rectangle,
    sprites: Vec<Sprite>,
    current: ShipFrame,
}

#[derive(Clone)]
pub struct Sprite {
    tex: Rc<RefCell<Texture>>,
    src: Rectangle,
}

impl Sprite {
    pub fn new(texture: Texture) -> Self {
        let TextureQuery { width, height, .. } = texture.query();
        Self {
            tex: Rc::new(RefCell::new(texture)),
            src: Rectangle {
                w: width as f64,
                h: height as f64,
                x: 0.0,
                y: 0.0,
            },
        }
    }
    pub fn load(canvas: &Renderer, path: &str) -> Option<Sprite> {
        canvas.load_texture(Path::new(path)).ok().map(Sprite::new)
    }
}
複製代碼

Sprite 結構體有個奇怪的東西，Rc<RefCell<Texture>>。這裏用到了 Rc 這個智能指針，那就解釋一下這玩意。Rc 其實全稱就是引用計數器，若是有過 iOS 開發經驗很好理解，Objective-C 的內存是經過引用計數來管理的，Rc 道理上相似。一般狀況下，一個變量能夠明確地知曉本身有某個值，而若是一個值存在多個全部者，就是 Rc 派上用場的時候了。某個值有一個全部者，計數器就是 1，若是有兩個，計數器就是 2，若是有 0 個，值就能夠被清理。如今的狀況是 Ship 結構體包含多個精靈實例，可是咱們只用一張圖片，因此用上 Rc 來引用同一個資源。同時，由於 phi.canvas.copy 函數參數須要 self 可變，雖然咱們不會改變圖片，可是須要繞過借用檢查器，這時候 RefCell 派上用場。如今把小圖區域佈局到 ShipView。

impl ShipView {
    pub fn new(phi: &mut Phi) -> Self {
        let sprite_sheet = Sprite::load(&phi.canvas, "assets/spaceship.png")
        .unwrap();
        let mut sprites = Vec::with_capacity(9);
        for y in 0..3 {
            for x in 0..3 {
                sprites.push(
                    sprite_sheet
                        .region(Rectangle {
                            w: SHIP_W,
                            h: SHIP_H,
                            x: SHIP_W * x as f64,
                            y: SHIP_H * y as f64,
                        })
                        .unwrap(),
                )
            }
        }
        Self {
            player: Ship {
                rect: Rectangle {
                    x: 64.0,
                    y: 64.0,
                    w: 32.0,
                    h: 32.0,
                },
                sprites,
                current: ShipFrame::MidNorm,
            },
        }
    }
}
複製代碼

以後控制鍵盤事件處理，因此 render 函數也要改一下。

#[derive(Clone, Copy)]
enum ShipFrame {
    UpNorm = 0,
    UpFast = 1,
    UpSlow = 2,
    MidNorm = 3,
    MidFast = 4,
    MidSlow = 5,
    DownNorm = 6,
    DownFast = 7,
    DownSlow = 8,
}

impl View for ShipView {
    fn render(&mut self, context: &mut Phi) -> ViewAction {
        let (w, h) = context.output_size();
        let canvas = &mut context.canvas;
        let events = &mut context.events;

        if events.now.quit || events.now.key_escape == Some(true) {
            return ViewAction::Quit;
        }

        let diagonal: bool =
            (events.key_up ^ events.key_down) &&
            (events.key_left ^ events.key_right);
        let moved = if diagonal { 1.0 / 2.0f64.sqrt() } else { 1.0 } *
        PLAYER_SPEED;
        let dx: f64 = match (events.key_left, events.key_right) {
            (true, true) | (false, false) => 0.0,
            (true, false) => -moved,
            (false, true) => moved,
        };

        let dy: f64 = match (events.key_up, events.key_down) {
            (true, true) | (false, false) => 0.0,
            (true, false) => -moved,
            (false, true) => moved,
        };

        self.player.rect.x += dx;
        self.player.rect.y += dy;

        canvas.set_draw_color(Color::RGB(0, 30, 0));
        canvas.clear();

        canvas.set_draw_color(Color::RGB(200, 200, 50));

        let movable_region: Rectangle = Rectangle::new(0.0, 0.0, w * 0.7, h);
        self.player.rect = self.player.rect
            .move_inside(movable_region)
            .unwrap();

        self.player.current =
            if dx == 0.0 && dy < 0.0 { ShipFrame::UpNorm }
            else if dx > 0.0 && dy < 0.0 { ShipFrame::UpFast }
            else if dx < 0.0 && dy < 0.0 { ShipFrame::UpSlow }
            else if dx == 0.0 && dy == 0.0 { ShipFrame::MidNorm }
            else if dx > 0.0 && dy == 0.0 { ShipFrame::MidFast }
            else if dx < 0.0 && dy == 0.0 { ShipFrame::MidSlow }
            else if dx == 0.0 && dy > 0.0 { ShipFrame::DownNorm }
            else if dx > 0.0 && dy > 0.0 { ShipFrame::DownFast }
            else if dx < 0.0 && dy > 0.0 { ShipFrame::DownSlow }
            else { unreachable!() };
        
        self.player.sprites[self.player.current as usize]
            .render(canvas, self.player.rect);

        ViewAction::None
    }
}

impl Rectangle {
    pub fn move_inside(self, parent: Rectangle) -> Option<Rectangle> {
        if self.w > parent.w || self.h > parent.h {
            return None;
        }
        Some(Rectangle {
            w: self.w,
            h: self.h,
            x: if self.x < parent.x {
                parent.x
            } else if self.x + self.w >= parent.x + parent.w {
                parent.x + parent.w - self.w
            } else {
                self.x
            },
            y: if self.y < parent.y {
                parent.y
            } else if self.y + self.h >= parent.y + parent.h {
                parent.y + parent.h - self.h
            } else {
                self.y
            },
        })
    }

    pub fn contains(&self, rect: Rectangle) -> bool {
        let x_min = rect.x;
        let x_max = x_min + rect.w;
        let y_min = rect.y;
        let y_max = y_min + rect.h;

        x_min >= self.x && x_min <= self.x + self.w && x_max >= self.x &&
            x_max <= self.x + self.w && y_min >= self.y
            && y_min <= self.y + self.h &&
            y_max >= self.y && y_max <= self.y + self.h
    }
}

impl Sprite {
    pub fn region(&self, rect: Rectangle) -> Option<Sprite> {
        let src: Rectangle = Rectangle {
            x: rect.x + self.src.x,
            y: rect.y + self.src.y,
            ..rect
        };
        if self.src.contains(src) {
            Some(Sprite {
                tex: self.tex.clone(),
                src,
            })
        } else {
            None
        }
    }

    pub fn render(&self, canvas: &mut Renderer, dest: Rectangle) {
        canvas.copy(&mut self.tex.borrow_mut(),
            self.src.to_sdl(), dest.to_sdl())
            .expect("failed to copy texture");
    }
}
複製代碼

如今執行以後，能夠看到一個飛船而後根據鍵盤方向鍵就能夠看到不一樣的圖案。其實到這裏已經完成了，其實還能夠把代碼寫得更符合直覺一些，就是讓 canvas 來渲染精靈，而不是精靈渲染其自己。

self.player.sprites[self.player.current as usize] .render(canvas, self.player.rect);

pub trait CopySprite {
    fn copy_sprite(&mut self, sprite: &Sprite, dest: Rectangle);
}

impl<'window> CopySprite for Renderer<'window> {
    fn copy_sprite(&mut self, sprite: &Sprite, dest: Rectangle) {
        sprite.render(self, dest);
    }
}

impl View for ShipView {
    fn render(&mut self, context: &mut Phi) -> ViewAction {
        // ...
        
        canvas.copy_sprite(
            &self.player.sprites[self.player.current as usize],
            self.player.rect);
        
        // ...
    }
}
複製代碼

利用 trait 來抽象行爲。

目前就這樣吧，接下來看看還有什麼要處理到。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程