[Console] Watcher the console

게임 포트폴리오|2016. 1. 31. 15:54

'게임 포트폴리오' 카테고리의 다른 글

[Unity] Fall in the hole  (0) 2016.01.31
[Unity] Acace 로봇 대전 게임  (0) 2016.01.31
[3D DirectX3D] 검은사막  (0) 2016.01.31
[2D API]The war? 더워!  (0) 2016.01.31
[2D API] 테라리아  (0) 2016.01.31

댓글()

DirectX 3D - 1. 벡터

카테고리 없음|2015. 9. 13. 15:18

0. 용어

스칼라 - 기압, 속력 등 숫자로 표기 가능한 값.

벡터 - 속도와 같이 크기와 방향을 가지는 값.

 

0벡터 - 크기가 0인 벡터

기저벡터 - 좌표축과 동일한 방향을 가지는 벡터

단위벡터 - 방향을 가지고 있으나 그 크기가 1인 벡터

법선벡터 - 어떠한 벡터와 수직 - 내적의 값이 0인 벡터

정규화 - 어떠한 벡터를 단위벡터로 만드는 것.

 

내적 -

 

1. DirectX 3D 상의 벡터

벡터는 각 x, y, z축에 대한 값을 요소로 가지고 있는 구조체이다.

 

2. 벡터의 연산

2.1 더하기, 빼기

벡터의 더하기와 빼기는 각 요소를 각각 더하거나 빼준다.

 

 

2.2 곱하기

벡터의 곱하기는 벡터와 스칼라와의 연산만 가능하다.

각 요소에 스칼라값을 곱하며, 크기가 스칼라 값 만큼 증가한다.

 

2.3 길이

피타고라스의 정리를 통해 얻을 수 있다. 각 요소를 제곱해 더한 다음 루트 값을 구하면 길이를 구할 수 있다.

댓글()

[jQuery]UI - datepicker(달력)

카테고리 없음|2014. 8. 7. 14:39

jquery ui에서 달력을 지원 하고 있다.

 

주소는 http://jqueryui.com/datepicker/ 이며 간단하게 달력을 만들 수 있다.

 

기본적인 사용법은 이렇다.

 

1
2
3
4
5
6
7
8
9
10
<head>
    <link href="/jqueryui/jquery-ui.min.css" rel="stylesheet">
    <script src="/jqueryui/jquery-ui.min.js"></script>
</head>
<body>
    <input type="text" id="calender"><!-- 혹은 <div> -->
    <script>
        $('#calender').datepicker();
    </script>
</body>

 

<div>로 하면 달력이 상시 보이게 된다.

 

더 이상의 기능은 http://api.jqueryui.com/datepicker/ 에서 확인.

 

- 한글 이용하기 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
jQuery(function($) {
        $.datepicker.regional['ko'] = {
            closeText : '닫기',
            prevText : '이전달',
            nextText : '다음달',
            currentText : '오늘',
            monthNames : ['1월''2월''3월''4월''5월''6월''7월''8월''9월''10월''11월''12월'],
            monthNamesShort : ['1월''2월''3월''4월''5월''6월''7월''8월''9월''10월''11월''12월'],
            dayNames : ['일''월''화''수''목''금''토'],
            dayNamesShort : ['일''월''화''수''목''금''토'],
            dayNamesMin : ['일''월''화''수''목''금''토'],
            weekHeader : 'Wk',
            dateFormat : 'yy-mm-dd',
            firstDay : 0,
            isRTL : false,
            duration : 200,
            showAnim : 'show',
            showMonthAfterYear : false,
            yearSuffix : '년'
        };
        $.datepicker.setDefaults($.datepicker.regional['ko']);
    });

 

 

댓글()

[jQuery]plugin - accordion

웹 & 안드로이드/HTML5|2014. 7. 29. 11:09

댓글()

[CSS]div로 요소 세로 가운데 정렬

웹 & 안드로이드/HTML5|2014. 7. 24. 09:55
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
#tableDiv{
    height:100%;
    display : table;
}
 
$cellDiv{
    display : table-cell;
    vartical-align : middle;
}
</style>
 
<div id="tableDiv">
    <div id="cellDiv">
        <img src="#">
    </div>
</div>

 

 

display : table, table-cell은 table, td태그와 같은 효과를 부여하여 table-cell내 요소의 세로 정렬을 가능하게 만들어 준다.

 

댓글()

[jQuery]요소를 추가하는 메소드(append, prepend, after, before)

웹 & 안드로이드/HTML5|2014. 7. 23. 10:33

append : 요소내의 맨 마지막에 새로운요소를 추가

prepend : 요소내의 맨 처음에 새로운 요소를 추가

after : 요소의 뒤에 추가

before : 요소의 앞에 추가

댓글()

[jQuery]썸네일을 만들어주는 플러그인 NailThumb

웹 & 안드로이드/HTML5|2014. 7. 23. 10:29

다운로드 : http://www.garralab.com/nailthumb.php

 

사용법

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 다운 로드 받은 js와 css파일을 추가. 당연히 jquery도 포함되어야 한다. -->
<script src="jquery.nailthumb.1.1.min.js"></script>
<link rel="stylesheet" href="jquery.nailthumb.1.1.min.css">
 
 
<div class="thumb">
    <img src="이미지 주소">
</div>
 
<script>
    $('.thumb').nailthumb();
</script>

 

 

아주 간단하게 썸네일 이미지를 모여줄 수 있다.

댓글()

websocket 정리(작성중..)

웹 & 안드로이드/HTML5|2014. 7. 8. 18:28

내가만든 java용 webSocketServer library

wakeup5_JavaWebSocketServer_v0.1.jar

 

1. 웹소켓 지원 브라우저 

(출처 - http://caniuse.com/#feat=websockets)

Current에 있는 것이 현재 버전이고

초록색이 지원, 분홍색이 미지원 브라우저.

(현재 대부분의 브라우저가 지원을 하는데 안드로이드는 이제야 지원하는 것 보니 왜 진즉에 안했나 싶음.. 유저에게 업데이트를 강제할 수도 없고 ㅡ.,ㅡ)

 

2. 웹소켓의 접속 과정

먼저 클라이언트에서 접속 요청을 보내고, 서버에서 요청을 받아 요청 정보를 핸드쉐이크 후 응답을 하면 소켓이 연결이 된다. 그 이후 소켓 통신처럼 스트림을 이용해 데이터를 주고 받을 수 있다.

 

2-1. 웹소켓의 접속

웹소켓의 접속은 브라우저에서 이루어지며 접속 방법은 다음과 같다.

var ws= new WebSocket('ws://localhost:8080/resources');

접속url은 ws:// 혹은 wss://(http://와 https://랑 같다), 접속할 host와 포트, /이후의 리소스로 이루어 진다.

 

2-2. 웹소켓 오픈 핸드쉐이크

먼저 요청을 보내고, 서버에서는 요청 헤더를 보고 적절히 응답을 보내야 한다. 이러한 과정을 핸드쉐이크라고 한다.

요청 헤더

        GET /{resources} HTTP/1.1
        Host: server.example.com
        Upgrade: websocket
        Connection: Upgrade
        Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
        Origin: {host}
        Sec-WebSocket-Version: 13

 

응답 헤더

        HTTP/1.1 101 Switching Protocols
        Upgrade: websocket
        Connection: Upgrade
        Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

응답 헤더는  HTTP/1.1 101 Switching Protocols로 시작하며

Upgrade: websocket
Connection: Upgrade

Sec-WebSocket-Accept:

이 세개의 키값은 반드시 포함하여야 한다.

Sec-WebSocket-Accept의 값 만드는 방법

1. 요청 헤더의 Sec-WebSocket-Key 값에 미리 정의된 문자열을 ("258EAFA5-E914-47DA-95CA-C5AB0DC85B11")를 붙여 새로운 문자열을 만든 후,

2. 새로운 문자열을 SHA-1로 암호화.

3. 암호화 된 값을 다시 BASE64로 인코딩 하고 Sec-WebSocket-Accept를 키로하는 응답 헤더를 작성.

 

여기까지가 연결 핸드쉐이크이며 응답을 받은 클라이언트에서 Sec-WebSocket-Accept값을 비교하여 값이 일치 할 경우 소켓이 연결되며, 데이터를 주고 받을 수 있다.

 

2-3 웹소켓의 데이터.

 

 

0. 웹소켓 정보

웹소켓 api - http://www.w3.org/TR/2011/WD-websockets-20110419/#websocket

웹소켓 문서 - http://tools.ietf.org/html/rfc6455

 : 웹소켓 정보에 대해 아주 자세히 나와있으나 영어.. ㅠㅠ

댓글()

[Java] 메소드 하나에 한해서 제너릭 사용하기

1
2
3
4
5
6
class B{
    static public <t> t toString(t a){
        System.out.println(a.toString());
        return a;
    }
}

 

 

이렇게 하면 객체를 생성하지 않아 제너릭 타입을 스테이틱 메소드에서는 사용이 불가능 하던 것을 스테이틱 메소드 하나에 한해서 제너릭을 사용이 가능하도록 할 수 있다. 명시된 리턴 타입 앞에 제너릭을 붙여준다.

 

이런 기법은 주로 Collection 프레임 워크에서 많이 사용한다..

댓글()

label 태그를 이용하여 폼 컨트롤 다루기.

웹 & 안드로이드/HTML5|2014. 6. 9. 21:41

일반적으로 잘 사용하지 않는 태그 중 LABEL 태그가 있다. 이 LABEL 태그를 잘 활용하면 라디오 버튼, 체크 박스, 입력 상자 등의 폼 컨트롤을 직접 선택하지 않고 텍스트만 눌러도 폼 요소가 선택이 되는 효과를 줄 수가 있다.

먼저 실행 결과부터 살펴 보도록 하자.

라디오 버튼을 직접 선택하지 않고, "예", "아니오" 같은 텍스트를 선택해도 체크 박스가 선택됩 니다.
LABEL 태그를 사용해 본 적이 있습니까?


 

체크박스를 직접 선택하지 않고, "네트웍 프로그래밍" 같은 텍스트를 선택해도 체크 박스가 선 택됩니다.
관심분야를 선택하세요!

 

 

아래 "주소를 입력하세요"란 텍스트를 클릭하면 입력 상자가 선택이 됩니다.

 

 

위 실행 결과에 대한 소스는 다음과 같다:

<STYLE>
LABEL {
cursor:hand;
color: black;
}
</STYLE>
 
<p>라디오 버튼을 직접 선택하지 않고, "예", "아니오" 같은 텍스트를 선택해도 체크 박스가 선택됩니다.<br>
<b>LABEL 태그를 사용해 본 적이 있습니까?</b>
<FORM>
<INPUT TYPE=radio ID=FirstButton NAME=radio1>
<LABEL FOR=FirstButton TITLE="있으면 예를 선택하세요!"></LABEL>
<BR>
<INPUT TYPE=radio ID=SecondButton NAME=radio1>
<LABEL FOR=SecondButton TITLE="없으면 아니오를 선택하세요">아니오</LABEL> </p>

<p>체크박스를 직접 선택하지 않고, "네트웍 프로그래밍" 같은 텍스트를 선택해도 체크 박스가 선택됩니다.<br>
<b>관심분야를 선택하세요!</b><br>
<INPUT TYPE="checkbox" NAME="INT" ID="int1">
<LABEL FOR="int1" TITLE="관심분야 : 네트웍 프로그래밍">네트웍 프로그래밍</LABEL>
<INPUT TYPE="checkbox" NAME="INT" ID="int2">
<LABEL FOR="int2" TITLE="관심분야 : 웹 프로그래밍">웹 프로그래밍</LABEL>
<INPUT TYPE="checkbox" NAME="INT" ID="int3">
<LABEL FOR="int3" TITLE="관심분야 : CS 프로그래밍">CS 프로그래밍</LABEL></p>

<p>아래 "주소를 입력하세요"란 텍스트를 클릭하면 입력 상자가 선택이 됩니다.<br>
<b><LABEL FOR="addr" TITLE="당신의 주소를 입력하세요!">주소를 입력하세요!</LABEL></b><br>
<INPUT TYPE="text" NAME="ADDR" ID="addr"> </p>

</FORM>

 

사용 방법은 간단하다. LABEL 태그의 속성으로 FOR를 사용하여 연결된 폼 컨트롤의 ID를 할당해 주면 된다.

 

댓글()