4. royalslider 슬라이드에 이미지 집어넣기
넣는 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>RoyalSlider Example</title> <!-- jQuery, 1.7+ is required --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- main slider JS, get it from build tool http://dimsemenov.com/private --> <script src="royalslider\jquery.royalslider.min.js"></script> <!-- main slider style --> <link href="royalslider/royalslider.css" rel="stylesheet"> <!-- selected skin style --> <link href="royalslider\skins\default\rs-default.css" rel="stylesheet"> <script> // Slider initialization, you may put this part of code in JS file jQuery(document).ready(function($) { // slider initialization $('#content-slider').royalSlider({ // example of slider options controlNavigation: 'bullets', slidesOrientation : 'vertical', arrowsNavAutoHide : true,
transitionSpeed : 3000,
autoPlay: { enabled: false, pauseOnHover : true, delay : 5000 }, deeplinking: { enabled: true, prefix: 'slider-' } }); }); </script> <!-- slider css --> <style> /* you may put here additional slider CSS */ /* but it'll be better if you move it to separate CSS file that your site uses */ #content-slider, #content-slider, #content-slider .rsOverflow, #content-slider .rsSlide, #content-slider .rsVideoFrameHolder, #content-slider .rsThumbs { background: #141e39;}
#slide_1, #slide_1 .rsOverflow, #slide_1 .rsSlide, #slide_1 .rsVideoFrameHolder, #slide_1 .rsThumbs { background: #141e39;}
#slide_2, #slide_2 .rsOverflow, #slide_2 .rsSlide, #slide_2 .rsVideoFrameHolder, #slide_2 .rsThumbs {background: #141e39;}
</style> </head> <body> <!-- actual slider code --> <div id="content-slider" class="royalSlider contentSlider rsDefault" style="height:950px; width: 100%;" >
<div> <img class="rsIgm" src="img\GameIntro.jpg" alt="" style="width:100%">
</div> <div> <img class="rsIgm" src="img\CreatorIntro.jpg" alt="" style="width:100%"> </div> <div>slide3</div> <div>slide4</div> </div>
</body> </html> |
이렇게 넣고 프로젝트에도 이미지 파일을 넣어 놓으면 이미지가 출력된다.
문제점
이렇게 통 이미지로 할 경우 원하는 형태로 꾸미기에는 좋지만 이후 수정하기가 여간 까다로운 것이 아니다.
따라서 슬라이드 안의 요소들을 각각 수정 가능한 형태로 바꾸어야 한다.
그런데 일단 이렇게 통 이미지로 한 이유가 글자 폰트가 망가져서 그런건데.
글자만 따로 출력하는 것으로 이 문제를 해결 할 수 있을까?...
일단은 개발 속도를 위해 통 이미지를 그대로 사용하여 페이지를 장식하고 그 뒤에 시간이 남으면 요소들을 잘라보기로 해야겠다.
'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글
| 6. 디자인 수정..다시 홈페이지 만들기. (0) | 2019.01.05 |
|---|---|
| 5. HTML로 이메일 보내는 기능 추가하기 (2) | 2019.01.02 |
| 3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기 (0) | 2019.01.02 |
| 2. 웹페이지 디자인/기획 (0) | 2019.01.01 |
| 1.웹 게임 개발 환경을 만드는 법 (0) | 2019.01.01 |
준비물
royalslider plugin - 구글에서 검색하시거나, 돈주고 사시면 됩니다.
http://dimsemenov.com/plugins/royal-slider/documentation/
royalslider plugin API가 나와 있는 사이트입니다.
============================================================
1. royalslider plugin을 자신의 웹 프로젝트에 추가합니다.
아마 올바르게 들어가지 않을 수도 있는데 그럴 경우 잘못 압축이 해제된 결과이니 다시 다른걸 다운 받아주세요
2. 예시 코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>RoyalSlider Example</title> <!-- jQuery, 1.7+ is required --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- main slider JS, get it from build tool http://dimsemenov.com/private --> <script src="royalslider\jquery.royalslider.min.js"></script> <!-- main slider style --> <link href="royalslider/royalslider.css" rel="stylesheet"> <!-- selected skin style --> <link href="royalslider\skins\default\rs-default.css" rel="stylesheet"> <script> // Slider initialization, you may put this part of code in JS file jQuery(document).ready(function($) { // slider initialization $('#content-slider').royalSlider({ // example of slider options controlNavigation: 'bullets', autoPlay: { enabled: true }, deeplinking: { enabled: true, prefix: 'slider-' } }); }); </script> <!-- slider css --> <style> /* you may put here additional slider CSS */ /* but it'll be better if you move it to separate CSS file that your site uses */ </style> </head> <body> <!-- actual slider code --> <div id="content-slider" class="royalSlider contentSlider rsDefault"> <div>slide1</div> <div>slide2</div> <div>slide3</div> </div>
</body> </html> |
가로로 슬라이드 되는 예시 코드입니다. 이제 이걸 세로로 바꾸면 됩니다.
2. 가로인 슬라이드 코드를 세로로 바꿔보기
어떻게 하는지 찾아보니
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>RoyalSlider Example</title> <!-- jQuery, 1.7+ is required --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- main slider JS, get it from build tool http://dimsemenov.com/private --> <script src="royalslider\jquery.royalslider.min.js"></script> <!-- main slider style --> <link href="royalslider/royalslider.css" rel="stylesheet"> <!-- selected skin style --> <link href="royalslider\skins\default\rs-default.css" rel="stylesheet"> <script> // Slider initialization, you may put this part of code in JS file jQuery(document).ready(function($) { // slider initialization $('#content-slider').royalSlider({ // example of slider options controlNavigation: 'bullets', slidesOrientation : 'vertical', autoPlay: { enabled: true }, deeplinking: { enabled: true, prefix: 'slider-' } }); }); </script> <!-- slider css --> <style> /* you may put here additional slider CSS */ /* but it'll be better if you move it to separate CSS file that your site uses */ </style> </head> <body> <!-- actual slider code --> <div id="content-slider" class="royalSlider contentSlider rsDefault"> <div>slide1</div> <div>slide2</div> <div>slide3</div> </div>
</body> </html> |
저렇게 옵션 값을 추가해서 바꾸면 된다고 한답니다.
3. 이제 화면 전체적으로 슬라이드를 할 수 있게 꽉채워 봅시다.
<div id="content-slider" class="royalSlider contentSlider rsDefault" style="height:1900px; width: 100%;" > |
음...아무래도 슬라이드 상으로는 가로 비율만 정의 할 수 있나봅니다. 세로는 비율이 안되고 px 값으로만 되는 듯 합니다.
4. 화살표가 있는게 거슬리네요 건드릴때만 나오도록 숨겨봅시다. 또 자동 전환 속도가 너무 빨라요 변경되는 시간에 8초 정도 걸리도록 해놔야겠네요
jQuery(document).ready(function($) { // slider initialization $('#content-slider').royalSlider({ // example of slider options controlNavigation: 'bullets', slidesOrientation : 'vertical', arrowsNavAutoHide : true, transitionSpeed : 3000, autoPlay: { enabled: true }, deeplinking: { enabled: true, prefix: 'slider-' } }); }); |
5. 자동 전환이 글을 읽는 도중에도 넘어가니 그걸 중지해야합니다. 마우스 커서가 올라가 있으면 자동으로 못 넘기게 합시다. 추가로 항목간 지연 시간을 5초 정도로 늘려줍시다.
jQuery(document).ready(function($) { // slider initialization $('#content-slider').royalSlider({ // example of slider options controlNavigation: 'bullets', slidesOrientation : 'vertical', arrowsNavAutoHide : true, transitionSpeed : 3000,
autoPlay: { enabled: true, pauseOnHover : true, delay : 5000 }, deeplinking: { enabled: true, prefix: 'slider-' } }); }); |
6. 이제 배경화면을 넣어봅시다.
</script> <!-- slider css --> <style> /* you may put here additional slider CSS */ /* but it'll be better if you move it to separate CSS file that your site uses */ #content-slider, #content-slider, #content-slider .rsOverflow, #content-slider .rsSlide, #content-slider .rsVideoFrameHolder, #content-slider .rsThumbs { background: #141e39;}
#slide_1, #slide_1 .rsOverflow, #slide_1 .rsSlide, #slide_1 .rsVideoFrameHolder, #slide_1 .rsThumbs { background: #141e39;}
#slide_2, #slide_2 .rsOverflow, #slide_2 .rsSlide, #slide_2 .rsVideoFrameHolder, #slide_2 .rsThumbs {background: #141e39;}
</style> </head> <body> <!-- actual slider code --> <div id="content-slider" class="royalSlider contentSlider rsDefault" style="height:1900px; width: 100%;" >
<div>slide1</div> <div >slide2</div> <div>slide3</div> <div>slide4</div> </div>
|
각 슬라이드에도 색상을 넣을 수 있는데 그건 비효율 적이니 안하고 slide_1이런거 쓰면 됩니다.
기본적으로 전체 색상을 잡아주기 위하여 content_slider에 색상을 추가했습니다.
7. 이제 테스트로 첫 슬라이랑 두번째 슬라이드 요소들을 채워 넣어봅니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>RoyalSlider Example</title> <!-- jQuery, 1.7+ is required --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- main slider JS, get it from build tool http://dimsemenov.com/private --> <script src="royalslider\jquery.royalslider.min.js"></script> <!-- main slider style --> <link href="royalslider/royalslider.css" rel="stylesheet"> <!-- selected skin style --> <link href="royalslider\skins\default\rs-default.css" rel="stylesheet"> <script> // Slider initialization, you may put this part of code in JS file jQuery(document).ready(function($) { // slider initialization $('#content-slider').royalSlider({ // example of slider options controlNavigation: 'bullets', slidesOrientation : 'vertical', arrowsNavAutoHide : true, transitionSpeed : 3000,
autoPlay: { enabled: true, pauseOnHover : true, delay : 5000 }, deeplinking: { enabled: true, prefix: 'slider-' } }); }); </script> <!-- slider css --> <style> /* you may put here additional slider CSS */ /* but it'll be better if you move it to separate CSS file that your site uses */ #content-slider, #content-slider, #content-slider .rsOverflow, #content-slider .rsSlide, #content-slider .rsVideoFrameHolder, #content-slider .rsThumbs { background: #141e39;}
#slide_1, #slide_1 .rsOverflow, #slide_1 .rsSlide, #slide_1 .rsVideoFrameHolder, #slide_1 .rsThumbs { background: #141e39;}
#slide_2, #slide_2 .rsOverflow, #slide_2 .rsSlide, #slide_2 .rsVideoFrameHolder, #slide_2 .rsThumbs {background: #141e39;}
</style> </head> <body> <!-- actual slider code --> <div id="content-slider" class="royalSlider contentSlider rsDefault" style="height:1900px; width: 100%;" >
<div> <img class="rsIgm" src="img\GameIntro_BigName.jpg" alt="" style="width:40%">
</div> <div>slide2</div> <div>slide3</div> <div>slide4</div> </div>
</body> </html> |
글자를 넣으려고하니 좌표를 직접 잡아줘야 해서 굉장히 짜증나네요. 이럴때 슬라이드의 장점을 살려봅시다.
어차피 한 화면씩 나오니 차라리 포토샵으로 그림이고 뭐고 다 해서 이미지 통째로 올려버리는 거죠 꺄르르르르르
'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글
| 5. HTML로 이메일 보내는 기능 추가하기 (2) | 2019.01.02 |
|---|---|
| 4. royalslider 슬라이드에 이미지 집어넣기 (0) | 2019.01.02 |
| 2. 웹페이지 디자인/기획 (0) | 2019.01.01 |
| 1.웹 게임 개발 환경을 만드는 법 (0) | 2019.01.01 |
| [개요] Web에서 작동하는 게임을 만들어보자! (0) | 2018.12.31 |
jQuery Plugin 사용법
http://blog.work6.kr/70
를 참고 했습니다.
=========================================================
으아아 jQuery Plugin 사용법을 설명하겠다아
플러그인이란 간단하게 기존의 기능을 확장할 수 있게 도와주는 프로그램입니다.
제이쿼리의 경우 주로 메소드로 많이 사용된다.
예시를 들면
zerofy라는 플러그인을 만들었다면, $('#zero').zerofy()라고 쓸 수 있는 메소드가 생성되는 것이다.
그럼 zerofy라는 플러그인을 어떻게 추가하는가
$.fn.zerofy = function(options) { var settings = $.extend({ repeat: 1 // 기본 설정 }, options); var zeros = '0'.repeat(settings.repeat); return this.each(function() { $(this).html(zeros); }); }; $('#zero').zerofy({ repeat: 5 }); // 00000 |
여기 html 전부를 0으로 만드는 zerofy라는 플러그인을 만들었다.
each는 여러 태그를 선택했을 경우 각각에 대해 반복문을 돌며 동작을 수행한다.
return this.each를 했기 때문에 각각의 this가 return되어 메소드 체이닝을 할 수 있다.
안에 settings 객체를 만들어 $.extend로 기본 설정과 주어진 options 객체를 합친다. 옵션을 주지 않으면 기본 설정인 repeat: 1이 사용된다. '0'.repeat()을 했는데 이 메소드는 ES2015에 추가된 메소드이다. 만약 브라우저가 es2015를 지원하지 않는다면 따로 만들어야 한다.
아무튼 이렇게 만든 플러그인을 추가하고 싶다면.
이렇게 plugin 폴더를 넣어주고
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>RoyalSlider Example</title> <!-- jQuery, 1.7+ is required --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- main slider JS, get it from build tool http://dimsemenov.com/private --> <script src="royalslider\jquery.royalslider.min.js"></script> <!-- main slider style --> <link href="royalslider/royalslider.css" rel="stylesheet"> <!-- selected skin style --> <link href="royalslider\skins\default\rs-default.css" rel="stylesheet"> <script> // Slider initialization, you may put this part of code in JS file jQuery(document).ready(function($) { // slider initialization $('#content-slider').royalSlider({ // example of slider options controlNavigation: 'bullets', autoPlay: { enabled: true }, deeplinking: { enabled: true, prefix: 'slider-' } }); }); </script> <!-- slider css --> <style> /* you may put here additional slider CSS */ /* but it'll be better if you move it to separate CSS file that your site uses */ </style> </head> <body> <!-- actual slider code --> <div id="content-slider" class="royalSlider contentSlider rsDefault"> <div>slide1</div> <div>slide2</div> <div>slide3</div> </div>
</body> </html> |
코드 상에서 각 파일의 주소값을 잘 맞춰서 넣어주면 실행이 된다.
정상 실행이 되는지 파악 하고 싶으면 크롬으로 확인해보면 된다
'WebDegine > Web' 카테고리의 다른 글
| 자바 서블릿을 사용해보자 (0) | 2019.01.02 |
|---|---|
| Jquery 기본적인 사용법 (0) | 2019.01.01 |
| [CSS] 부트스트랩 사용법 (0) | 2018.12.31 |
Jquery 기본적인 사용법
jquery는 자바스크립트를 좀더 손쉽게 사용하기 위해 만들어진 자바스크립트 라이브러리 중 하나이다.
자주 쓰이는 로직들을 랩핑해두었다고 생각하면 된다.
또 셀렉터를 이용해서 원하는 요소를 지정할 때 쓰이는 document.getElementsByID등을 $(Selector), jQuery(Selector) 형식으로 표현할 수 있으므로 코드도 짧아지게 된다.
- jQuery를 다운로드하는 방법
https://jquery.com/download/에 접속하여 원하는 버전을 다운 받습니다.
저는 https://code.jquery.com/jquery-3.3.1.min.js 를 다운 받았습니다.
근대 이런게 뜨내요...그래요 이게 jquery-3.3.1.min.js 입니다. 이걸 어떻게 다운 받으시면 되고 저 같은 경우는 다운 받는 방법을 모르니 그냥 복사 한다음에 메모장에 넣고 그 뒤에 js확장자로 변경하겠습니다.
그렇게 파일을 만들고 자신의 웹 프로젝트에 js 디렉토리를 만든다음에 그 안에 파일을 넣어줍시다.
-jQuery를 사용하는 방법
다운받은 js 파일을 이용할 경우
<head> <script src="js/jquery-3.1.0.min.js"></script> <head> |
CDN을 이용할 경우
<head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <head> |
또는 사용 가능한 url을 가져다 써도 됩니다.
<head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <head> |
그냥 파일로 하면 오류 발생할 경우가 많으니까 CDN 씁시다.
테스트를 해봅시다
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%> <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function(){ $('h3').html("jquery test"); });
</script> <title>Insert title here</title> </head> <body> <script>
</script>
<h3>hello hi</h3> </body> </html> |
이 코드를 이렇게 쓰면 .h3안에 있는 hello hi가 안나오고 jquery test가 나옵니다.
- 기본 사용법
제이쿼리는 CSS처럼 selector를 가집니다.
$(selector).action(); 이 기본 형태입니다.
selector는 시작 부분에 언급한 것 처럼, document.getElementById에서 getElementById를 맡고 있다고 보면 됩니다.
아이디는 #id 클래스는 .class로 html 태그는 p로 표현하면 됩니다. 응용해서 특정 클래스 내의 모든 html태그에 적용시키려면 .className div 이런 식으로 사용하게 됩니다.
간단한 예제
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tutorial test</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function(){ $('#first').css("color","red"); $('.second').css("color","blue"); $('p').css("color","yellow"); }); </script> </head> <body> <div id="first">first is red</div> <div class="second">second is blue</div> <p>this is yellow</p> </body> </html> |
action은 event가 될수도, effect, html이 될 수도 있습니다. 말 그대로 액션을 일어나게 하기 위해 쓰이는 부분입니다. 위의 예시에서 $(funtion(){}); 이라는 구조가 나왔는데 이것은 웹 페이지의 html이 모두 출력되면 바로 실행 된다는 뜻으로, $(document).ready(funtion(){}); 과 같은 의미입니다. 여기서 readt() 역시도 action()의 하나 입니다.
event
마우스로 요소를 옮기는 것, 클릭하는 것 등의 모두가 이벤트라 할 수 있다.
간단한 click 이벤트를 알아보자
$(selector).clock(); 이렇게 사용된다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tutorial test</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function(){ $('#first').css("color","red");
$('.second').css("color","blue"); $('.mybutton').click(function(){ $('.second').css("color","green"); }); $('p').css("color","yellow");
}); </script> </head> <body> <div id="first">first is red</div> <div class="second">second is blue</div> <p>this is yellow</p> <button type="button" class="mybutton"></button>
</body> </html> |
버튼을 누르면 2번째 문장이 초록색으로 바뀐다.
hover
마우스 커서를 요소 위에서 왔다갔다 할 때 발생하는 이벤트이다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tutorial test</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function(){ $('#first').css("color","red");
$('.second').css("color","blue"); $('.mybutton').click(function(){ $('.second').css("color","green"); }); $('p').css("color","yellow");
$('.selector').hover(function(){ $('.second').css("color","blue"); }, function(){ $('.second').css("color","red"); }); }); </script> </head> <body> <div id="first">first is red</div> <div class="second">second is blue</div> <p>this is yellow</p> <button type="button" class="mybutton"></button> <button type="button" class="selector"></button>
</body> </html> |
2번째 버튼에 마우스를 가져대면 2번째 문장의 색이 변하는 것을 확인 할 수 있다.
keypress 이벤트
키보드가 눌리면 발생된다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tutorial test</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function(){ $('#first').css("color","red");
$('.second').css("color","blue"); $('.mybutton').click(function(){ $('.second').css("color","green"); }); $('p').css("color","yellow");
$('.selector').hover(function(){ $('.second').css("color","blue"); }, function(){ $('.second').css("color","red"); }); $('.myinput').keypress(function(){ alert("keypress called"); }); }); </script> </head> <body> <div id="first">first is red</div> <div class="second">second is blue</div> <p>this is yellow</p> <button type="button" class="mybutton"></button> <button type="button" class="selector"></button> <input type="text" class="myinput" ></input> </body> </html> |
입력란에 뭔가 입력하려고 하면 경고창이 뜨게 된다.
display
글의 내용을 숨기거나 표시하거나 드롭다운 메뉴를 만들 수도 있고 등등의 효과를 구현할 수 있다.
show/hide
fadeIn/fadeOut
slideUp/slideDown 등이 잇다.
show/hide
show([duration][,complete]); hide([duration][,complete]); |
duration과 complete는 각각 효과의 지속시간, 효교ㅘ가 완료 되엇을 때 실행될 funtion을 의미하는 것으로 optional한 부분이다. .duration의 경우 단위로는 1000ms가 1초가 되며 따로 지정해주지 않으면 400ms가 default값으로 가지게 된다. slow , fast로 쓸 수도 있는데 각각 600ms, 200ms를 의미한다.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>If you click on the "Hide" button, I will disappear.</p> <button id="hide">Hide</button> <button id="show">Show</button> </body> </html> |
버튼을 눌르면 글자가 사라지고 나타난다.
복잡하게 if문 쓰자면
function toggle_layer() { if($("#layer").css("display") == "none"){ $("#layer").show(); }else{ $("#layer").hide(); } } |
이렇게 쓸 수 있고
toggle을 이용하여 사용하는 방법도 있다
$("#tagID").toggle(); // show -> hide , hide -> show |
더 많은 API는 이곳에서 찾아 볼 수 있다.
https://oscarotero.com/jquery/
'WebDegine > Web' 카테고리의 다른 글
| 자바 서블릿을 사용해보자 (0) | 2019.01.02 |
|---|---|
| jQuery Plugin 사용법 (0) | 2019.01.02 |
| [CSS] 부트스트랩 사용법 (0) | 2018.12.31 |
2. 웹페이지 디자인/기획
- 목표
1. 웹페이지를 디자인 합시다.
구성
홈페이지
ㄴ게임소개
ㄴ개발자소개
ㄴ게임즐기기 (게임을 실제로 실행)
ㄴQnA 보내기
구성은 4개지만 모든 화면은 1개의 화면에서 이루어 질 수 있도록 합니다.
왼편의 흰색 동그라미를 누르면 해당 구성으로 화면이 수직으로 슬라이드 됩니다.
2. 기능 라이브러리 정의
<화면 슬라이드>
Jquery 라이브러리를 이용한 royal slider를 이용합니다.
<이메일 보내기>
https://brunch.co.kr/@andrewyhc/43 이 분의 HTML 코드를 가져와 사용해 봅니다.
<게임 실행부>
언리얼4 HTML5 빌드를 이용하여 해당 화면을 구성합니다.
'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글
| 5. HTML로 이메일 보내는 기능 추가하기 (2) | 2019.01.02 |
|---|---|
| 4. royalslider 슬라이드에 이미지 집어넣기 (0) | 2019.01.02 |
| 3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기 (0) | 2019.01.02 |
| 1.웹 게임 개발 환경을 만드는 법 (0) | 2019.01.01 |
| [개요] Web에서 작동하는 게임을 만들어보자! (0) | 2018.12.31 |
1.웹 게임 개발 환경을 만드는 법
- 장비
PC : GTX 1080 , RAM 16gb , i7 8000번대
OS : 윈도우 10
- 도구
이클립스 : 웹 개발을 위해
아파치/톰켓 : 웹 서버를 퍼블리싱 하기 위해. 아무튼 테스트는 해봐야 하지 않겠습니까.
언리얼4 : 게임을 빌드하기 위해
============================================================
<이클립스 환경 구성>
1. eclipse를 설치합시다.
https://zetawiki.com/wiki/%EC%9C%88%EB%8F%84%EC%9A%B0_%EC%9E%90%EB%B0%94%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD_eclipse_%EC%84%A4%EC%B9%98
위 제타위키에서 설치 방법이 잘 나와 있습니다.
2. EE로 설치합시다. EE버전에 Dynamic Web 프로젝트 만드는 기능이 있어요
<아파치 톰캣 환경 구성>
1. 아파치 톰캣 다운로드를 합시다.
http://withcoding.com/25
이님이 잘 설명 해놨더군요 설치합시다.
2. 이클립스에서 Server로 잡아줍니다.
<Dynamic 프로젝트 생성>
1. 프로젝트 생성에서 Dynamic Web 프로젝트 생성을 해보고 방금 잡은 아파치 톰캣으로 실행을 해봅니다.
잘 되면 끄읏
<언리얼4 빌드 구성>
1. 언리얼4를 설치합니다.
https://www.unrealengine.com/ko/what-is-unreal-engine-4
다운로드는 언제나 쉽습니다.
2. 프로젝트를 만듭니다.
막 어마어마한거 만들거 아니니 스타트팩 없애주시고, Android를 기반으로 만듭시다.
3. HTML5 빌드를 해봅시다.
한 30분 기다리면 완성됩니다.
예쁘게 빌드가 됩니다.
이 파일들을 이제 이클립스로 만든 Dynamic Web프로젝트에 넣고 실행을 해보면 되는겁니다!!!
여기서 js만을 가져가서 사용 하고 싶다면 js파일을 떼가시면 되고
바로 실행해보는 웹 페이지를 보고 싶다면 저기 html파일을 가지고 이용하시면 됩니다.
'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글
| 5. HTML로 이메일 보내는 기능 추가하기 (2) | 2019.01.02 |
|---|---|
| 4. royalslider 슬라이드에 이미지 집어넣기 (0) | 2019.01.02 |
| 3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기 (0) | 2019.01.02 |
| 2. 웹페이지 디자인/기획 (0) | 2019.01.01 |
| [개요] Web에서 작동하는 게임을 만들어보자! (0) | 2018.12.31 |
[CSS] 부트스트랩 사용법
참고 : http://tworab.tistory.com/71
============================================================
'WebDegine > Web' 카테고리의 다른 글
| 자바 서블릿을 사용해보자 (0) | 2019.01.02 |
|---|---|
| jQuery Plugin 사용법 (0) | 2019.01.02 |
| Jquery 기본적인 사용법 (0) | 2019.01.01 |
[개요] Web에서 작동하는 게임을 만들어보자!
- 매우 높은 접근성
- 크로스 플랫폼 (인터넷 브라우저만 돌아가면 실행 가능하다! 버전에 따라 차이점은 있을 지라도....)
- 손 쉬운 게임 환경 구성 (인터넷과 Chrome, Firefox 등만 있다면 실행 가능)
- (학습용)javascript/ 웹 기술을 다양하게 적용 해볼 수 있는 소재이기 때문에
- webgl 등의 기술을 적용해 볼 예정이다
- Javascript를 이용하여 화면을 구성해 볼 예정이다.
- 아파치/톰캣 , Node.js등을 이용하여 웹 어플리케이션 서버를 구성해 볼 예정이다.
- DB 적용을 위하여 Node부류 DB를 이용 해볼 계획이다.
- (학습용)기존의 엔진의 HTML5 적용 가능성을 확인 하기 위해
- 언리얼 4 또는 유니티 5를 이용하여 HTML5의 게임을 만들 수 있는지 확인 할 예정이다.
- 어디까지 표현이 가능한지 확인해 볼 예정이다. (WebGL1, WebGL2의 경우를 놓고 확인 해볼 예정)
- (학습용)웹 서버를 이용하여 대량의 접속을 어떻게 처리 할 것인지 알아보기 위해
- 다른 목표로는 다중 인원 접속 처리를 행하기 비교적 어렵다
(사진) 완성 예시 모습
웹 사이트에서 구동되는 게임이 전면에 나오고 상호 작용을 할 수 있는 버튼 들이 있는 모습과 마우스와 키보드를 이용하여 게임을 진행 할 수 있는 결과가 주 목표이다.
(사진) 게임 소개용 화면 - 엘x드 게임
자바스크립트를 이용하여 동적인 화면을 구성하고 사용자 반응적인 웹 사이트를 만드는 것이 주요한 목적 사용자 반응적인 웹 사이트란, 사용자가 스마트폰에서 볼 경우 그 화면에 맞추어 웹이 출력되는 것이고 pc에서 볼 경우 그 화면에 맞추어 보여지는 사이트, 말하자면 하나의 코드로 2개 이상의 화면에 적용이 가능한 범용적인 웹 페이지를 만드는 것
- 게임
- 이동 기능
- 오브젝트 상호작용 기능
- 멀티플레이 기능
- 채팅 기능
- 웹 사이트
- 메인 게임 출력용 화면
- 버튼을 이용한 상호작용
- 회원가입 처리
- 게임 소개용 화면
- 버튼을 이용한 화면 전환
- 백그라운드 동영상 출력
- 웹 어플리케이션 서버 환경 구성
- 웹 페이지
- 메인 웹 게임 페이지
- 게임 소개 페이지
- 게임
- 이동기능
- 오브젝트 상호작용 기능
- 멀티플레이 기능
- 채팅 기능
웹서버란 무엇인가.docx'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글
| 5. HTML로 이메일 보내는 기능 추가하기 (2) | 2019.01.02 |
|---|---|
| 4. royalslider 슬라이드에 이미지 집어넣기 (0) | 2019.01.02 |
| 3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기 (0) | 2019.01.02 |
| 2. 웹페이지 디자인/기획 (0) | 2019.01.01 |
| 1.웹 게임 개발 환경을 만드는 법 (0) | 2019.01.01 |
