傷害數字的實現方式

前幾天有朋友在後台問我如何能讓文字移動,以及縮放大小,經過一番溝通確認了他的目的是想要做那種人物受到傷害時頭頂飄出的傷害數字,想了一下原理並不複雜,於是有了這篇簡單的教程,下面先看下基本效果:

其中使用的最重要的一個函數是

draw_text_transformed_color(x,y,string,xscale,yscale,angle,c1,c2,c3,c4,alpha)

通過這個函數我們可以控制繪製文字的繪製屬性

  • x,y——文字繪製坐標
  • string——需要繪製的文字內容
  • xscale,yscale——文字的橫縱向縮放比
  • angle——文字繪製角度
  • c1,c2,c3,c4——左上左下右上右下四個頂點的顏色值,中間的顏色會自動過渡
  • alpha——透明度

之前的文字放大就是通過xscale和yscale的設定實現的,文字淡出的效果則是調整了alpha值。當然這樣的效果需要根據實際使用場景來進行具體的調整才會達到最佳。下面我們說一下這樣的文字具體的實現方式

思路

首先我們需要一個對象來繪製文字內容,並且我們希望這個文字有一個位移,然後在位移的過程中逐漸變淡同時略微放大,最後直接消失

首先是位移,在draw事件中我們可以指定繪製文字的坐標,理論上直接修改繪製文字的坐標也可以達到這個目的,為了方便我選擇直接修改繪製文字的對象本身的坐標,然後把繪製坐標跟對象的坐標綁定關聯,同樣可以讓文字移動。然後在對象的step事件中把對象自身的image_xscale和image_yscale進行遞增操作,同時將image_alpha進行遞減操作,最後把文字繪製方法中的xscale、yscale和alpha跟與之對應關聯,這裡其實也可以直接設定三個遞增/減的自定義變數而不使用內置屬性。最後是設定如果alpha小於等於0即完全透明不見時自動銷毀該對象,避免冗餘的對象消耗性能。

實現

首先創建一個對象

然後在create事件中添加了一個隨機數值的代碼,這部分是為了演示用的,在實際應用時需要根據自己的需求去定義

然後在step事件中是如下內容

第一部分就是設定對象的y坐標遞減以達到向上飄升的效果第二部分是設定了自身的橫縱圖像縮放比以每幀0.05的速率遞增第三部分是設定自身的圖像透明度以每幀0.05的速率遞減最後第四部則是設定當圖像透明度小於等於0以後直接銷毀當前實例最後是文字繪製的方法

這就是最關鍵的文字繪製,我這裡用step中修改的image_xscale和image_yscale來約束了文字的縮放比,同時用image_alpha約束了文字的透明度不過如果只按照以上方法繪製的效果會有一些問題,最主要是當文字放大以後會出現鋸齒而不清晰。

優化

為了解決文字放大鋸齒的問題,我們首先需要自定義一個足夠大的字體,然後在平時使用時可以縮小顯示,之後放大顯示就會平滑一些。然後我們會嘗試調整角度和顏色的變化來使文字更有動感,大概效果如下:

這部分優化代碼直接放出,不截圖了,代碼里會做一些注釋

//Create事件//隨機獲取四個頂點的顏色color = [c_green,c_white,c_red,c_purple,c_yellow,c_blue,c_lime,c_maroon,c_orange]color1_to_draw = color[random(7)];//c1 color2_to_draw = color[random(7)];//c2color3_to_draw = color[random(7)];//c3color4_to_draw = color[random(7)];//c4//隨機設定顯示的數字text_to_draw = floor(random(150));//String

//Step事件//upy -= 5 ;//scaleimage_xscale += 0.05;image_yscale += 0.05;//fade outimage_alpha -= 0.05;//destroyif (image_alpha <= 0 ) instance_destroy();

//Draw事件//設定自定義字體,這個字體的字型大小我設置了100draw_set_font(fnt_test); //文字居中排版 draw_set_halign(fa_center) //繪製文字,角度用了wave腳本,這個腳本以前介紹過draw_text_transformed_color(x,y,string(text_to_draw),image_xscale/10,image_yscale/10,wave(-10,10,5,0),color1_to_draw,color2_to_draw,color3_to_draw,color4_to_draw,image_alpha)


這麼個簡單的功能都能水一整篇也是蠻佩服我自己的XDDD


推薦閱讀:

遊戲資源傳送門
換個角度去看棋牌遊戲
unity3d在android使用sqlite
使用Unity2017開發MTV:一個Timeline和Cinemacine的實踐
翻譯-《彩虹六號:圍攻》中可破壞關卡中的動態音頻設計

TAG:GameMakerStudio | 遊戲開發 | 教程 |