일전에 덧셈과 뺄셈으로 두 변수의 값을 바꾸는 것을 올렸었다.(http://www.tibyte.kr/95)

이 방법은 연산과정에서 데이터형의 비트수를 넘어가면 오버플로우가 발생할 수 있는데,

다음과 같이 비트XOR(배타적논리합)연산을 쓰면 오버플로가 일어날 일이 없다.


a = a^b;

b = a^b;

a = a^b;


//한 줄로 쓰면

a ^= b ^= a^= b;


배타적 논리합 연산이므로 1행에서 a와 b의 각 자리의 비트열 차이(같은지 다른지)에 대한 정보가 a에 할당된다.

2행에서 b 우측의 항은 결과적으로 a^b^b 연산이 되어 a값이 들어간다.

3행이 처리될 때 a는 a^b 이고 b는 초기의a값이므로 a^b^a가 되어 b값이 들어가게 된다.

이렇게 a와 b의 값이 서로 바뀌게(swap) 되는 것이다.



==========================




 



저해상도 RGB모니터효과 플래시.


- 순서

1. 플래시

2. 미리보기

3. 소스코드




1. 플래시






2. 미리보기













3. 소스코드


package  {
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.display.MovieClip;
	import flash.net.FileReference;
	import flash.net.FileFilter;
	import flash.events.Event;
	import flash.utils.ByteArray;
	import flash.display.Loader;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.display.DisplayObjectContainer;	
	
	public class TVeffect extends MovieClip{
		
		public function TVeffect() {
			
			var file:FileReference = new FileReference();
			file.addEventListener(Event.SELECT,onSelected);
			var loadedBytes:ByteArray;
			var image:Loader = new Loader();
			var container:MovieClip = new MovieClip();
			
			var tf1:TextField = new TextField();
			tf1.autoSize = TextFieldAutoSize.LEFT;
			tf1.x = tf1.y = 200;
			tf1.text = "화면을 눌러서 그림파일을 선택하세요.";
			addChild(tf1);
			var tf2:TextField = new TextField();
			tf2.autoSize = TextFieldAutoSize.LEFT;
			tf2.x = tf2.y = 450;
			tf2.text = "http://tibyte.kr";
			addChild(tf2);
			addChild(container);
			
			stage.addEventListener(MouseEvent.CLICK, onClick);
			function onClick(evt:MouseEvent):void
			{
				file.browse([new FileFilter("image file (JPG, JPEG, GIF, PNG)","*.jpg;*.jpeg;*.gif;*.png")]);
			}
			function onSelected(evt:Event):void
			{
				evt.target.load();
				evt.target.addEventListener(Event.COMPLETE, onCompleted);
			
			}
			
			function onCompleted(evt:Event):void
			{
				loadedBytes = evt.target.data;
				image.contentLoaderInfo.addEventListener(Event.INIT,onInited);
				image.loadBytes(loadedBytes);
			}
			
			
			function onInited(evt:Event):void
			{
				removeChildAll(container);
				var bmp:Bitmap = evt.target.content as Bitmap;
				container.addChild(bmp);
				for(var i_x:int = 0; i_x<bmp.bitmapData.width; i_x++){
					for(var i_y:int = 0; i_y<bmp.bitmapData.height; i_y++) {
						bmp.bitmapData.setPixel(i_x,i_y,bmp.bitmapData.getPixel(i_x,i_y)&0x0000ff<<(i_x%3)*8);
					}
				}
			}
			
			function removeChildAll(container:DisplayObjectContainer):void
			{
				for(var i:int=0; i<container.numChildren; i++) {
					container.removeChildAt(i);
				}
			}
				
		}
	
	}
	
}

 








웹페이지에 소스코드를 올릴 때 그냥 붙여넣으면 모두 같은 색으로 나와서 읽기가 어렵다.

이럴 때 SyntaxHighlighter는 코드의 키워드나 명령문, 주석 등에 색을 입혀서 가독성을 높여준다.



(▼ 코드가 색칠된 모습을 볼 수 있다.)




 SyntaxHighlighter를 블로그에 적용하면 게시물을 쓸 때

간단한 태그로 쉽게 코드에 색을 입힐 수 있다.


먼저 http://alexgorbatchev.com/SyntaxHighlighter/download/ 에서 최신 버전의 파일을 내려받는다.

scripts 폴더를 보면 각종 프로그래밍 언어들의 Brush 파일들이 있는데

shAutoloader, shCore, shLegacy파일은 필수적으로 업로드하고, 추가로 자신이 쓸 언어들을 더 올린다.

여기서는 AS3, Cpp, Java, JS, Php, Xml 파일을 선택했다.





그 다음 스타일시트 파일을 올리는데, shCore.css 파일은 기본적으로 올려야 하고

기본 스타일로 하려면 shCoreDefault, shThemeDefault 파일을 선택한다.

하이라이터가 다른 모양으로 나타나게 하려면 그 테마의 스타일시트 파일을 올려야 한다.

테마가 적용된 모습은 http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ 여기서 볼 수 있다. 




필요한 파일을 다 올렸으면 메인 스킨의 html파일로 들어가서

head태그 안에 아래와 같은 코드를 추가해야 한다.

<link rel="stylesheet" type="text/css" href="./images/shCore.css" />
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" />
<link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css" />
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

코드를 보면 아까 업로드한 css파일과 js파일들의 경로를 볼 수 있다. (티스토리는 리소스 파일들이 images폴더에 저장되어 저런 경로를 써주어야한다.)

테마나 다른 언어를 추가하고자 할 땐 이것도 추가해야 한다.

그리고 마지막으로는 SyntaxHilighter.all();함수를 호출한다.


 


이제 블로그 게시글을 쓸 때 하이라이터를 쓸 수 있는데,

<pre class="brush:언어의 명칭(alias)">

코드

</pre>

HTML 모드로 들어가서 위와 같이 적어주면 된다.


예를 들어 C++언어를 쓰려고 한다면

<pre class="brush:cpp">

코드

</pre>

로 적어주면 되는것이다.


나머지 언어들의 alias들은 여기서 확인할 수 있다.

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/





한가지 중요한 주의점이 있는데

코드에 < 문자가 들어가면 코드가 깨지고 하이라이팅도 정상적으로 되지 않으므로

<문자가 있으면 모두 &lt; 로 바꿔야 한다.

찾아바꾸기를 지원하는 텍스트 에디터를 쓰거나 직접 간단한 프로그램을 작성하여 일괄적으로 바꿔놓으면 간단하다.


<pre>태그 대신 <srcipt>태그를 쓰면 이 문제는 해결되지만

특정환경(티스토리 모바일 등)에선 코드가 아예 안보이게 되는 점을 주의해야 한다.


script태그로 코드를 넣는 법은

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html 

이 주소에 쉽게 설명되어 있다.



그리고 여러 가지 기능을 비롯한 더 자세한 설명은 신택스하이라이터 공식 페이지에 접속하면 볼 수 있다.

http://alexgorbatchev.com/SyntaxHighlighter



 






* 맵 에디터 제작


인터페이스를 그리고 클래스화한다.

그리고 swc 내보내기.




빌더에서 프로젝트 속성에 들어가 Build Path에 swc를 추가한다.





코드에서 클래스를 생성하여 addChild하면

시험용으로 그려본 인터페이스가 화면에 출력됨.





그동안 FlashBuilder로 프로젝트를 진행하고 있었는데,

플래시플레이어11로 swf출력이 되지 않고, 이클립스가 약간 불편이 느껴지는 등

플래시빌더로 진행하기에 몇가지 문제점이 있어서 FlashDevelop으로 바꾸게 되었다.

무엇보다도 플래시디벨롭은 무료라는 장점이 컸다.

빌더는 어도비에서 학생과 무직자에게 무료로 주는 라이센스를 쓰고 있었지만 저작물을 이용하는 데 몇가지 제약이 있다. 



게임 내의 월드를 모델링하기 위한 알고리즘을 갈아엎고

새로 짰기 때문에 코드 역시 처음부터 다시 쓰게 되었다.

시점을 isometric 방식으로 고정시켜 놨을 때 보이는 타일들을 

x,y,z축을 두어 쌓는 방식으로, 3D이긴 하지만 현재 보이는 부분만  처리하게 되는 것이다.


플래시디벨롭으로 새로 시작하려고 할 때 문제발생!

http://www.tibyte.kr/145

해결.,


디벨롭에서는 swc파일을 프로젝트 폴더 안에 놓은 뒤

우클릭 메뉴에서 Add To Library를 체크하면 쓸 수 있다.







이미지 리소스가 담긴 바이너리 파일을 URLLoader로 읽어오는데,

urlLoader.dataFormat = URLLoaderDataFormat.BINARY;

을 써주지 않아서 text로 로딩되는 문제 발생. 수정완료.




인터페이스와 타일이미지 불러오기는 일단 해결..






작성중인 프로젝트의 버전관리 필요성을 느끼고

DVCS(Distributed Version Control System)가 대세라길래 무턱대고 Git을 선택하였다.

저장소 호스팅 업체로는 무료로 private 저장소를 만들 수 있는 Bitbucket을 사용하기로 했다.



git bash 실행 후

cd  프로젝트 경로

git init 

git remote add origin 원격 저장소 주소

git add 추가할 파일들(.을 입력하면 지정한 디렉토리의 모든 파일)
git commit -m 메시지
git push -u origin master

원격 저장소 비밀번호 입력





Bitbucket에 있는 설명대로 했더니 원격저장소로 전송은 잘 됐나..

이제 Git를 비롯한 소프트웨어 버전관리에 대해서 공부를 좀더 해봐야겠다.













초등학교 때 게임보이로 즐겨 하던 게임이 있었는데

그걸 워낙 재밌게 했었고, 게임을 만들어보겠다는 생각을 하게 만든 게임이기도 했다.

요즘에 갑자기 생각이 나서 찾아보려고 하니 제목을 몰라서 구글을 한참을 뒤진 뒤에야 겨우 찾을 수 있었다.

1997년에 출시한 TinyToon Adventures 6 (타이니툰 어드벤쳐 6)이었다.


어떤 외국 사이트에 이 게임을 플래시로 복원해놓은  곳도 있었으나

배경음이나 그래픽이 어렸을당시 게임기로 하던 것 보다 못했고,

게임자체가 원본에 비해 생략된 부분이 많아서 제대로 플레이해 볼 수는 없었다.


시작화면




매 단계마다 도움을 주는 캐릭터가 하나씩 나온다.




플레이 중에 토끼/오리/돼지 (정확한 캐릭터 이름을 모름..--)을 

자유자재로 바꿀 수 있으며 각각 당근, 파인애플, 수박을 적에게 던진다.



슈퍼마리오처럼 파이프를 타고 지하로 내려가는 곳이 있다.




은근히 귀찮은 적인 벌과 벌집.

오리로 플레이를 하면 좀더 높이 뛰는 것처럼 느껴진다.




아이템이 들어있는 상자가 곳곳에 있는데

아래에서 치지 않고 위에서 밟아야 아이템이 떨어진다.



유령이 다가오는데 밟아서 처리하면 된다..




2단계에 나오는 고양이(?). 화면이 어두워지면서 3개의 통 중 하나로 들어가는데

그걸 맞춰야 도움을 받을 수 있다.



몇탄 보스인 개(?)와 대결.

잡히면 농구공처럼 말려서 골대로 던져진다. 




 몇탄 중간에 나오는 늑대.

늑대가 쳐주는 벽돌을 다 피하면 늑대가 치워지고 다음으로 진행할 수 있다



최종보스. 원래 매우 큰 바퀴가 달린 탈것을 타고 주인공을 깔아뭉개려고 하지만

그걸 다 피하면 저렇게 용수철만 달린 의자에 앉아 퉁퉁 튀어다닌다. 




이외에도 재미있는 장애물이나 미니게임 등 다양한 즐길꺼리가 등장하지만

워낙 오래된 게임이라 완전한 자료를 구할 수 없다..








몇 주 전에 애드센스 수익이 인증 기준액인 10달러를 넘었다.

일반우편을 통해 주소지 인증을 위한 PIN이 발송되고

3~6주 후에 도착한다고 하는데 약 4주만에 편지가 왔다.




보낸 주소를 보니 미국에서 직접 보낸 것 같다.





편지의 내용을 보면 맞춤형 도움말에 대한 안내와 PIN을 어떻게 입력해야 하는지에 대한 설명이 있다.


우편으로 받으려면 시간이 너무 오래 걸리고 (일반우편으로 오니까)분실위험도 있기에

현재는 지급 방식을 기업은행을 통해 송금받을 수 있는

웨스턴 유니온 퀵 캐시(Western Union Quick Cash)로 설정해 놓았다.











2012년 tibyte.kr 블로그 통계



1. 월별 블로그 방문자 수 (2009.12 ~ 2012.12)





2. 월별 블로그 방문자 수 누계 (2009.12 ~ 2012.12)






3. 국가별 유입 비율 (2012)







4. 지역별 유입 비율(국내, 2012)








5. 유입 브라우저 비율 (2012)











정상파 발생 플래시입니다. 소리를 들어보세요.

(화면에 표시되는 내용은 스피커에 전달될 샘플링 데이터를 나타낸 것으로 정상파와는 맞지 않습니다.)







소스코드

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flash.text.TextFieldAutoSize;
import flash.media.Sound;
import flash.events.SampleDataEvent;
 
var mySound:Sound = new Sound();
 
var t:Number = 0;
var amplitude:Number = 0.25;
var graph_amplitude:Number = 50/amplitude;
var bmpDat:BitmapData = new BitmapData(400,200,false,0x0);
var bmp:Bitmap = new Bitmap(bmpDat);
bmp.y=50;
addChild(bmp);
 
 
var tfield:TextField = new TextField();
tfield.text = "화면을 누르면 시작.";
tfield.x = 120;
tfield.y = 100;
tfield.autoSize = TextFieldAutoSize.LEFT;
tfield.selectable = false;
var tformat:TextFormat = tfield.getTextFormat();
tformat.color = 0x33cc33;
tformat.align = TextFormatAlign.CENTER;
tfield.setTextFormat(tformat);
addChild(tfield);
stage.addEventListener(MouseEvent.CLICK, mouse_h);
 
 
function sineWaveGenerator(event:SampleDataEvent):void {
    t+=2;
    bmpDat.fillRect(new Rectangle(0,0,400,200),0x0);
    var wave:Number;
    for ( var c:int=0; c<2048; c++ ) {
        wave = getWave(c+event.position,t);
        event.data.writeFloat(wave);
        event.data.writeFloat(wave);
        if(c<800){
            bmpDat.setPixel(c,wave*graph_amplitude+100,0x00ff00);
        }
    }
    bmp.bitmapData = bmpDat;
 
}
 
 
function getWave(p:Number,t:Number):Number
{
    return (Math.sin(0.420*(Number(p+t)/Math.PI/2))+Math.sin(0.420*(Number(p)/Math.PI/2)))*amplitude;
}
 
function mouse_h(evt:MouseEvent):void
{
    mySound.addEventListener(SampleDataEvent.SAMPLE_DATA,sineWaveGenerator);
    mySound.play();
    removeChild(tfield);
}







isometirc 쿼터뷰의 타일을 만들 때 64x32크기의 타일을 그냥 이어붙여 버리면

타일의 가장자리가 짤리는 현상이 발생한다.

경계선을 원래크기로 보면 가느다란 선으로 보일 뿐이지만 실제로는 픽셀로 맞물려 있기 때문이다.

아래그림처럼 경계선(테두리)의 굵기가 1이면 해당 경계선을 어느 타일이 덮어야할지 모호해진다






그래서 타일의 경계에 있는 픽셀(외곽 픽셀)들이 겹치게 하면 안되는데, 

타일이 차지하는 영역이 짝수x짝수이면 대각선 사이에 넣어야 할 타일이

꼭 들어맞지 않게 된다. (하단의 선이 직선이 되지 않고 엇갈려 있다)





그렇기 때문에 타일하나의 크기가 홀수x짝수나 짝수x홀수의 형태가 되어야 하는데

여기서는 너비가 높이보다 길기 때문에 높이는 그대로 두고 너비를 한 픽셀 줄여서 홀수로 만든다.

(그림은 32x16타일의 픽셀들을 나타낸 것으로 오른쪽 세로 한줄이 비어있는것을 볼 수 있다.)




이렇게 해서 타일을 붙이면 네 타일이 만나는 부분이 아래 그림과 같이 된다.







이제 타일들을 맞물리게 배치했다.

비록 실제 타일크기는 31x16이지만, 각 타일들의 좌표 기준점들은

(0,0), (32,0), (16,0), (32,16), (16,8) 등으로 프로그램에서 처리하기 쉽게 딱딱 떨어진다.






타일하나당 픽셀을 채워 넣는 다른 방법도 있는데,

타일들이 서로 겹치지 않고 꼭 들어맞는지,

배치한 타일의 좌표값이 타일크기에 맞게 결정되는지,  

타일들의 경계선이 엇갈려 있지 않고 직선이 되는지를 만족해야 할 것이다.











플래시디벨롭에서 새 AIR AS3 Projector를 만들고 Test Project를 실행했더니

이런 오류가 발생했다.


Starting AIR Debug Launcher...

invalid application descriptor: Unknown namespace: http://ns.adobe.com/air/application/3.5





Flashdevelop.org의 커뮤니티에서 해결책을 찾을 수 있었는데,

우선 cmd창에 adt -version을 실행해보았다.
3.5가 출력되어야 하는데 2.7이 출력된다.



Path 환경변수를 확인해 보니 AIR SDK 2.7버전이 지정되어 있었다.

그것을 adl.exe가 위치해 있는 경로인 플래시디벨롭 폴더\Tools\flexsdk\bin으로 갱신해줬다.





다시 cmd에서 adt의 버전을 확인해보니 3.5가 나온다!







디벨롭에서 에어창이 제대로 뜨는 것을 확인.









+ Recent posts