이전글: [twee 기본] 8. 특별한 통로와 태그 / 다음글: [twee 기본] 9. 정보 전달 2 (체크 박스, 라디오 버튼)
플레이어와 시스템 간의 상호작용은 어떻게 할까?
입력의 가장 대표적인 예가 링크일거야.
링크를 걸어서 선택지를 주고, 플레이어가 그중에서 원하는 것을 고르는거지.
'무엇을 드시겠습니까?'라는 질문을 주고 선택지로 '1. 밥', '2. 국', '3. 국밥'을 준다고 했을 때,
국 없이 밥만 먹고 싶은 사람은 1번을 고르는거야.
그럼 출력의 가장 대표적인 예는? 그냥 매크로 없이 아무거나 쓰면 화면에 글자가 나오지.
외에도 색을 바꾼다거나, 글자 모양을 바꾸거나, 크기를 바꾸거나, 경고 팝업을 띄우거나...
혹은 선을 그리거나, 칸을 만들거나, 도형을 만들거나 할 수도 있고.
이미지를 띄울 수도 있겠지.
이번 글은 정보 전달중 입력의 가장 기본인 링크와 버튼에 중점을 둘 예정이야.
1. link
이전에 통로간을 연결할 때 쓰던 게 [[통로이름]] 처럼 [[ ]] 로 되어있는 거였음.
이걸 이제 '링크 마크 업'이라고 부를거야. 링크마크업은 여러가지 형태가 있음
- [[통로]]
- [[텍스트 | 링크]]
- [[통로][Setter]]
- [[텍스트 | 링크][Setter]]
Setter는 매크로 set 매크로랑 같은 내용이야.
링크 세터를 누르면,
Setter도 잘 적용된 걸 알 수 있어.
텍스트 말고, 이미지를 쓸 수도 있어.
- [img[이미지]]
- [img[이미지][링크]]
- [img[이미지][링크][Setter]]
- [img[Title|이미지]]
- [img[Title|이미지][링크]]
- [img[Title|이미지][링크][Setter]]
이거는 '이미지 마크 업'이라고 부름.
이미지 부분에는 이미지의 위치를 적으면 됨.
이렇게 코드를 짜고,
tweeBase에 원하는 사진을 넣은 다음 컴파일 하고 실행
아이콘이 700 * 700이라서 엄청 커졌음.
사진을 클릭하면 미리 정해둔 링크로 가거나 함.
Title의 의미는 2가지가 있음.
사진 위에 마우스 올리고 기다리면 뜨는 메세지하고,
사진을 찾을 수 없을 때, 텍스트로 처리됨.
사진의 크기를 조절하고 싶으면, 다른 방법을 찾아야 해.
여기선 다루지 않겠지만, 궁금하면 CSS쪽 찾아보는게 좋을 것 같음.
그것 마저도 귀찮으면 이거라도 써. 좋은 예시는 아님.
이건 매크로도 있어.
＜＜link "텍스트"＞＞
＜＜link "텍스트" "링크"＞＞ ... ＜＜/link＞＞
＜＜link 링크마크업＞＞ ... ＜＜/link＞＞
＜＜link 이미지마크업＞＞ ... ＜＜/link＞＞
마크업을 넣을 때는 Setter 없이 해야 해.
이런 식으로 쓸 수 있음.
근데 이렇게 쓸 바에는 마크업 쓰겠지.
link 매크로를 쓰는 이유는 링크를 클릭하면 그 내용을 실행하는 매크로라는 점에 의의가 있음.
활용하는 예시를 하나 들어줄게.
처음 실행할 때 $a에 0을 넣음.
Start통로에서 div를 이용해서 영역을 잡음. (div는 html에서 영역을 만드는 태그임. 미리 공간을 잡아두는거야.)
그 다음, link를 만들었음.
replace는 잡아둔 영역을 안의 내용으로 바꾸는 매크로야. 지금은 $a를 출력하겠지.
실행해보면, 이런 결과가 나옴.
 |  |  |
링크를 누를 때마다, $a에 1을 더하고, replace로 출력을 바꾸고 있음.
이건 통로를 이동하지 않고 바뀌는거야.
링크 매크로는 이런게 가능함.
외에도 어떻게 쓸지는 개발자 마음대로지.
2. button
link랑 같은데, 하이퍼링크 대신 버튼이 나옴.
양식도 똑같음.
이거 외에는 링크랑 완전히 같아서, 설명은 생략할게.
버튼으로는 img 크기 조절 안된다하는 사람은 css 이렇게 바꿔주길 바람.
3. link[append|prepend|replace]
난 이걸 굳이 써야 할 이유가 없어서 안써봄.
다 1회용 링크를 만드는 매크로임.
linkappend는 링크를 비활성화 하면서, 링크텍스트 뒤에 내용을 붙이는 매크로야.
＜＜linkappend "text" [transition|t8n]＞＞ ... ＜＜/linkappend＞＞
링크를 누르기 전 | 링크를 누른 후 |
이런 식으로 바뀜.
transition은 css 트렌지션 효과임. a->b로 변할 때 효과를 넣는거야.
t8n은 기본적으로 지원하는 트렌지션 효과임. 다른 통로로 이동할 때 나오는 효과가 이거야.
만약, ＜＜linkappend "~" t8n＞＞이렇게 쓰면, 텍스트가 나올 때 효과가 적용됨.
이건 궁금하면 직접 해봐.
＜＜linkprepend "text" [transition|t8n]＞＞ ... ＜＜/linkprepend＞＞
linkappend랑 같은데, append가 뒤에 추가되면, prepend는 앞에 추가됨.
＜＜linkreplace "text" [transition|t8n]＞＞ ... ＜＜/linkreplace＞＞
이것도 같은데, 링크텍스트는 없어지고, 그 자리에 내용이 추가됨.
근데 나중에 div, span같은거 익히면 별로 안 쓸 애들이기도 해.
입력 버튼등은 변수를 이용해서 반복문으로 여러개 만들 때, 주의해야 할 점이 있음.
그건 나중에 객체 설명할 때 이야기 할게. 조금 오래 걸리겠지만.
