클론코딩12 [Unity] #4. 게임 플레이 컨텐츠 만들기 : 미션 in Cafeteria 지금부터는 미션 내용을 구현하고, USE button을 눌렀을 때 게임 화면으로 전환될 UI를 구현하면 된다. 그리고 마지막으로 게이지 바를 연동해 7개의 모든 미션이 끝나면 다시 메인 화면으로 나가게끔 해 줄것이다. 먼저 Cafetria에 위치할 두 가지 미션을 살펴보도록 하자~ 야자수 카드 맞추기) 위처럼 UI안에 Background에 버튼을 7개 생성해준다. 그리고 벌집 모양의 Image를 넣어준 뒤, 축구공 모양처럼 위치를 지정해준다. 그리고 저런식으로 랜덤으로 색이 변하게 해, 모두 흰색을 맞추면 미션 성공이 되도록 코드를 작성했다. Mission 1 script) 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 2.. 2022. 3. 1. [Unity] #3. 게임 플레이 컨텐츠 만들기 : 미니게임 미션 기본 세팅 자! 이제 어몽어스에 하이라이트!! 바로~ 미니게임 미션 컨텐츠를 구현할 차례이다. 어떤 미션들을 만들었는지 간단하게? 정리 먼저 해보고! 설명하겠다. 게임은 총 6가지 종류로 맵에 위치된 지형을 이용해 수행하게 된다. 맵에서 살펴보면 이렇게 위치한 것을 볼 수 있다. 먼저 장소를 기준으로 게임을 나열해 보았다. 일단 맵에서 가장 넓은 공간을 차지하고 있는... - 카페테리아 + 야자수 -> 버튼 색 맞추기 미션 + 벽 면 쓰레기장 -> 쓰레기 버리기 미션 이렇게 두 미션이 위치한 것을 볼 수 있다 !! 자, 그 다음에는 이상한 실험체가 있는 것 같은 실험실을 살펴보자. - 실험실 + 키보드 -> 랜덤으로 생성되는 번호 입력하기 미션 + 마우스 -> 순서대로 숫자 클릭하기 미션 여기는 좀 비슷한 위치에 .. 2022. 3. 1. [Unity] #2 게임 플레이 환경 만들기 : 메뉴, 캐릭터, 맵, 설정 총 8일차까지의 강의를 듣고, 드디어!! 게임 플레이 환경을 구축하는 것에 성공했다. 즉, 대략적인 메인 UI 부분의 작업을 마무리하고, 이제 기능들을 C# script로 구현하고 연결하는 작업을 하고 있다. 빌드는 안드로이드 기준으로 하기 때문에 안드로이드 모듈을 먼저 유니티 엔진에 추가해 준 뒤, 세팅에서 안드로이드로 빌드 할 것임을 먼저 설정해주어야 한다. 그 후 전체적인 프로그래밍에 들어갔다. 1) MainMenu UI 게임의 컨셉을 바닷속에서의 어몽어스 느낌으로 잡았기 때문에 배경을 인디 바다 느낌이 나도록 조정해 줄 것이다. 이 작업은 Main Camera에서 조작해주면 된다. 이렇게 배경색 먼저 설정해주면, 버튼이나 다른 이미지 배치에 있어서 전체적인 느낌을 파악할 수 있기 때문에 좋다! 그.. 2022. 1. 16. [HTML&CSS] 웹 프로젝트 12일차! (friends.html & .css ) 지난 시간에 이어 이번엔 friends.html을 만들어 보았다. 그리고 세분화한 css파일을 적용해 아래와 같은 화면처럼 보이게 했다. 이번에도 역시 HTML을 작성하기 전 어떻게 박스를 입힐지에 대한 구상부터 했다. friends.html ) 확실히 지난 index.html보다는 더 복잡해 졌다... ㅎㅎ 쨋든!! 이번에도 font awesome의 icon을 이용해서 아이콘들을 넣어주었고, text는 span태그를 사용했다. 천천히 큰 div부터 차례차례 잡아가다보면 어느새 완성!! friends.html 코드) status-bar의 class를 저번 index와 똑같이 해서 css가 적용된 상태이고, 추가적으로 user-component부분이랑 nav-bar 부분 그리고 no-mobile 부분 세 .. 2021. 7. 21. [CSS] 웹 프로젝트 11일차! (index 부분 css 작업) 지난 시간에는 아래 화면의 html, 즉 뼈대를 완성했다. 이번에는 본격적으로 css를 사용해 아래 화면처럼 이쁘게 보이도록 해 보았다!! 우선 모든 화면에 적용해야 하는 status-bar부터 시작! 아! 그 전에 우선, 브라우저의 기본 세팅값을 초기화를 위한 reset.css파일을 먼저 추가해 주어야 한다!! rest.css) status-bar) 우선 위 화면처럼 적당한 간격으로 icon의 위치를 설정해주어야 한다. 이럴 땐 무엇을 쓴다? --> 바로 flex!!! icon의 부모요소인 .status-bar에 flex를 지정해 주었고 justify-content:center;를 적용했다. 그러면 중앙에 아이콘들이 모여있는 것을 볼 수 있는데 이럴 때 사용할 수 있는 스킬이 바로... width:33.. 2021. 7. 20. [HTML] 웹 프로젝트 10일차! (클론 코딩 index.html) 카카오톡 클론 만들기 1일차! 로그인 화면 - index.html) +) 왜 이름을 index.html로 했는가? 왜냐하면! 대부분의 웹 서버가 디폴트로 index.html을 찾아보도록 설정되어 있기 때문이다. 영어로 index는 첫 번째를 뜻한다. html 코딩에 들어가기 앞써 어떤식으로 코딩을 해야하는지 구상부터 했다. 이런식으로 box부터 구상하고 차례차례 큰 것부터 잡은 후에 세부적인 box를 코딩해주었다. 큰 box들에는 div를 사용했고, 세부적인 요소들은 text에는 span을 이미지에는 i를 사용했다. 여기서 i는 font awesome에서 추가한 아이콘을 뜻한다. font awesome을 사용하면 아이콘 코드를 바로 복사-붙여넣기 후 사용할 수 있기 떄문에 무척 편하다. 그 대신 이 코드.. 2021. 7. 18. 이전 1 2 다음
