数字が光っているような表現

#1

gcc用DXライブラリで、数字が光っているような表現をしたいのですが、どのようにすればいいのでしょうか？
参考の画像を見て、数字を中心にだんだん薄くなるように白で描画すれば良さそうだとわかったのですが、いい実装が思いつきません。
なにかアイデアをいただけたら幸いです。
よろしくお願いします。

コード:

#include "DxLib.h"

int Key[256];

int UpdateKeyStateAll(void) {
	char KeyBuf[256];
	int i;
	if(GetHitKeyStateAll(KeyBuf))return -1;
	for(i=0;i<256;i++) {
		if(KeyBuf[i])Key[i]++; else Key[i]=0;
	}
	return 0;
}

// Twitterの推奨は1252x626 
const int SCREEN_WIDTH = 1252;
const int SCREEN_HEIGHT = 626;

// 半角文字列専用 
void DrawString2(int x,int y,const char* str,int color,int alpha) {
	char buf[4]={0};
	int pos=y;
	const char* now;
	//int a;
	SetDrawBlendMode(DX_BLENDMODE_ALPHA,alpha);
	for(now=str;*now;now++) {
		buf[0]=*now;
		DrawString(x-GetDrawStringWidth(buf,1)/2,pos,buf,color);
		pos+=GetFontSize();
	}
	//SetDrawBlendMode(DX_BLENDMODE_ALPHA,alpha/8);
	//a=GetFontSize()/2*90/89;
	//DrawBox(x-a,y-a,x+a,pos+a,color,TRUE);
}

int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance,LPSTR lpCmdLine, int nCmdShow ){
	SetGraphMode(SCREEN_WIDTH,SCREEN_HEIGHT,32);
	if( ChangeWindowMode(TRUE) != DX_CHANGESCREEN_OK || DxLib_Init() == -1 ) return -1; //初期化処理
	SetDrawScreen( DX_SCREEN_BACK );        //裏画面に設定
	SetBackgroundColor(0,17,125);
	ChangeFont("Impact",DX_CHARSET_DEFAULT);
	ChangeFontType(DX_FONTTYPE_ANTIALIASING_8X8);
	SetFontSize(SCREEN_HEIGHT/13);

	while(!ProcessMessage() && !ClearDrawScreen() && !UpdateKeyStateAll() && !Key[KEY_INPUT_ESCAPE]){
		//↑ﾒｯｾｰｼﾞ処理         ↑画面をｸﾘｱ          ↑ｷｰﾎﾞｰﾄﾞ入力状態取得   ↑ESCが押されていない

		//ココに処理を書いていく
		
		DrawString2(100,0,"1234567890123",GetColor(255,255,255),105);

		ScreenFlip();//裏画面を表画面に反映
	}

	DxLib_End();
	return 0;
}

#2

とりあえず画像を使ってみましたが、微妙な感じです。
画像はここで作成しました。
http://mikecat.6.ql.bz/jstool/pnggen/

コード:

#include "DxLib.h"

int Key[256];

int UpdateKeyStateAll(void) {
	char KeyBuf[256];
	int i;
	if(GetHitKeyStateAll(KeyBuf))return -1;
	for(i=0;i<256;i++) {
		if(KeyBuf[i])Key[i]++; else Key[i]=0;
	}
	return 0;
}

// Twitterの推奨は1252x626 
const int SCREEN_WIDTH = 1252;
const int SCREEN_HEIGHT = 626;

int lightHandle;
int circleHandle[2];

// 半角文字列専用 
void DrawString2(int x,int y,const char* str,int color,int alpha) {
	char buf[4]={0};
	int pos=y;
	const char* now;
	SetDrawBlendMode(DX_BLENDMODE_ALPHA,alpha);
	for(now=str;*now;now++) {
		buf[0]=*now;
		DrawString(x-GetDrawStringWidth(buf,1)/2,pos,buf,color);
		pos+=GetFontSize();
	}
	int size=GetFontSize()/2;
	int y1=y+size/2;
	int y2=pos-size/2;
	SetDrawBlendMode(DX_BLENDMODE_ALPHA,alpha/2);
	DrawExtendGraph(x-size,y1-size,x+size,y1,circleHandle[0],TRUE);
	DrawExtendGraph(x-size,y1,x+size,y2,lightHandle,TRUE);
	DrawExtendGraph(x-size,y2,x+size,y2+size,circleHandle[1],TRUE);
}

int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance,LPSTR lpCmdLine, int nCmdShow ){
	SetGraphMode(SCREEN_WIDTH,SCREEN_HEIGHT,32);
	if( ChangeWindowMode(TRUE) != DX_CHANGESCREEN_OK || DxLib_Init() == -1 ) return -1; //初期化処理
	SetDrawScreen( DX_SCREEN_BACK );        //裏画面に設定
	SetBackgroundColor(0,17,125);
	ChangeFont("Impact",DX_CHARSET_DEFAULT);
	ChangeFontType(DX_FONTTYPE_ANTIALIASING_8X8);
	SetFontSize(SCREEN_HEIGHT/13);
	
	lightHandle=LoadGraph("light.png");
	LoadDivGraph("circle.png",2,1,2,512,256,circleHandle);
	SetDrawMode(DX_DRAWMODE_BILINEAR);

	while(!ProcessMessage() && !ClearDrawScreen() && !UpdateKeyStateAll() && !Key[KEY_INPUT_ESCAPE]){
		//↑ﾒｯｾｰｼﾞ処理         ↑画面をｸﾘｱ          ↑ｷｰﾎﾞｰﾄﾞ入力状態取得   ↑ESCが押されていない

		//ココに処理を書いていく
		
		DrawString2(100,0,"1234567890123",GetColor(255,255,255),105);

		ScreenFlip();//裏画面を表画面に反映
	}

	DxLib_End();
	return 0;
}

#3

数字をガウスフィルタでぼやかして、これを加算ブレンドするって方法があるかなと思います。
「ＤＸライブラリ置き場　リファレンスページ」
http://homepage2.nifty.com/natupaji/DxL ... html#R3N26

#4

おお、美しいですね。
ありがとうございます。

コード:

#include "DxLib.h"

#define USE_GAUSS

int Key[256];

int UpdateKeyStateAll(void) {
	char KeyBuf[256];
	int i;
	if(GetHitKeyStateAll(KeyBuf))return -1;
	for(i=0;i<256;i++) {
		if(KeyBuf[i])Key[i]++; else Key[i]=0;
	}
	return 0;
}

// Twitterの推奨は1252x626 
const int SCREEN_WIDTH = 1252;
const int SCREEN_HEIGHT = 626;

#ifndef USE_GAUSS
int lightHandle;
int circleHandle[2];
#else
// 2のn乗に切り上げた画面サイズ 
const int SCREEN_WIDTH2 = 2048;
const int SCREEN_HEIGHT2 = 1024;
#endif

// 半角文字列専用 
void DrawString2(int x,int y,const char* str,int color,int alpha) {
	char buf[4]={0};
	int pos=y;
	const char* now;
	SetDrawBlendMode(DX_BLENDMODE_ALPHA,alpha);
	for(now=str;*now;now++) {
		buf[0]=*now;
		DrawString(x-GetDrawStringWidth(buf,1)/2,pos,buf,color);
		pos+=GetFontSize();
	}
#ifndef USE_GAUSS
	int size=GetFontSize()/2;
	int y1=y+size/2;
	int y2=pos-size/2;
	SetDrawBlendMode(DX_BLENDMODE_ALPHA,alpha/2);
	DrawExtendGraph(x-size,y1-size,x+size,y1,circleHandle[0],TRUE);
	DrawExtendGraph(x-size,y1,x+size,y2,lightHandle,TRUE);
	DrawExtendGraph(x-size,y2,x+size,y2+size,circleHandle[1],TRUE);
#endif
}

struct number_t {
	int x,y;
	char n[20];
};

const int SMALL_NUM = 18;
const int BIG_NUM = 9;
const int sm_pos[SMALL_NUM]={
	3,4,5,6,7,8,9,10,11,12,15,17,18,20,21,22,23,24
};
const int bg_pos[BIG_NUM]={
	0,2,4,6,9,10,11,15,17
};

int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance,LPSTR lpCmdLine, int nCmdShow ){
	SetGraphMode(SCREEN_WIDTH,SCREEN_HEIGHT,32);
	if( ChangeWindowMode(TRUE) != DX_CHANGESCREEN_OK || DxLib_Init() == -1 ) return -1; //初期化処理
	SetDrawScreen( DX_SCREEN_BACK );        //裏画面に設定
	SetBackgroundColor(0,17,125);
	ChangeFont("Impact",DX_CHARSET_DEFAULT);
	ChangeFontType(DX_FONTTYPE_ANTIALIASING_8X8);
	int fontSizeSmall=SCREEN_HEIGHT/13;
	int fontSizeBig=SCREEN_HEIGHT*2/13;

#ifndef USE_GAUSS
	lightHandle=LoadGraph("light.png");
	LoadDivGraph("circle.png",2,1,2,512,256,circleHandle);
#endif
	SetDrawMode(DX_DRAWMODE_BILINEAR);
	
	number_t sm[SMALL_NUM]={0};
	number_t bg[BIG_NUM]={0};
	
#ifdef USE_GAUSS
	int uraScreen=MakeScreen(SCREEN_WIDTH2,SCREEN_HEIGHT2,FALSE);
#endif

	while(!ProcessMessage() && !ClearDrawScreen() && !UpdateKeyStateAll() && !Key[KEY_INPUT_ESCAPE]){
		//↑ﾒｯｾｰｼﾞ処理         ↑画面をｸﾘｱ          ↑ｷｰﾎﾞｰﾄﾞ入力状態取得   ↑ESCが押されていない

		//ココに処理を書いていく
		if(Key[KEY_INPUT_F5]==1) {
			for(int i=0;i<SMALL_NUM;i++) {
				sm[i].x=(SCREEN_WIDTH-fontSizeSmall)*sm_pos[i]/25+fontSizeSmall/2;
				sm[i].y=GetRand(SCREEN_HEIGHT)-SCREEN_HEIGHT/2;
				for(int j=0;j<13;j++)sm[i].n[j]=GetRand(9)+'0';
			}
			for(int i=0;i<BIG_NUM;i++) {
				bg[i].x=(SCREEN_WIDTH-fontSizeBig)*bg_pos[i]/17+fontSizeBig/2;
				bg[i].y=GetRand(SCREEN_HEIGHT)-SCREEN_HEIGHT/2;
				for(int j=0;j<6;j++)bg[i].n[j]=GetRand(9)+'0';
			}
		}
		
		SetFontSize(fontSizeSmall);
		for(int i=0;i<SMALL_NUM;i++) {
			DrawString2(sm[i].x,sm[i].y,sm[i].n,GetColor(255,255,255),105);
		}
		SetFontSize(fontSizeBig);
		for(int i=0;i<BIG_NUM;i++) {
			DrawString2(bg[i].x,bg[i].y,bg[i].n,GetColor(255,255,255),105);
		}
#ifdef USE_GAUSS
		SetDrawScreen(uraScreen);
		DrawBox(0,0,SCREEN_WIDTH2,SCREEN_HEIGHT2,GetColor(0,0,0),TRUE);
		SetFontSize(fontSizeSmall);
		for(int i=0;i<SMALL_NUM;i++) {
			DrawString2(sm[i].x,sm[i].y,sm[i].n,GetColor(255,255,255),105);
		}
		SetFontSize(fontSizeBig);
		for(int i=0;i<BIG_NUM;i++) {
			DrawString2(bg[i].x,bg[i].y,bg[i].n,GetColor(255,255,255),105);
		}
		GraphFilter(uraScreen,DX_GRAPH_FILTER_GAUSS,16,1400);
		SetDrawScreen(DX_SCREEN_BACK);
		SetDrawBlendMode(DX_BLENDMODE_ADD,128);
		DrawGraph(0,0,uraScreen,FALSE);
#endif

		ScreenFlip();//裏画面を表画面に反映
	}

	DxLib_End();
	return 0;
}

数字が光っているような表現

数字が光っているような表現

Re: 数字が光っているような表現

Re: 数字が光っているような表現

Re: 数字が光っているような表現

		7月 2025
日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31