HTML5 Canvas, Phaser, Three.js, Babylon.js, CreateJS 

    
 이 라이브러리와 기술은 웹 기반 그래픽과 게임 개발에 주로 사용됩니다. 각각의 특징은 다음과 같습니다:

### HTML5 Canvas
- **언어**: HTML/CSS/JavaScript
- **특징**: HTML5 표준의 일부로, 2D 그래픽을 그리기 위한 API를 제공합니다.
- **용도**: 간단한 그래픽, 애니메이션, 게임 개발.
- **장점**: 브라우저 지원이 넓고, 추가 라이브러리 없이 사용 가능.
- **단점**: 3D 그래픽 지원이 없고, 복잡한 기능은 직접 구현해야 함.

### Phaser
- **언어**: JavaScript
- **특징**: 2D 게임 개발을 위한 프레임워크.
- **용도**: 브라우저 기반 2D 게임.
- **장점**: 풍부한 기능, 활발한 커뮤니티.
- **단점**: 3D 지원이 제한적.

### Three.js
- **언어**: JavaScript
- **특징**: WebGL을 쉽게 사용할 수 있게 해주는 3D 라이브러리.
- **용도**: 3D 모델링, 애니메이션, 게임.
- **장점**: 강력한 3D 기능, 높은 유연성.
- **단점**: 상대적으로 높은 학습 곡선.

### Babylon.js
- **언어**: TypeScript/JavaScript
- **특징**: 3D 그래픽을 위한 라이브러리, WebGL과 WebXR을 지원.
- **용도**: 복잡한 3D 시뮬레이션, 게임, 가상 현실.
- **장점**: 뛰어난 성능, 풍부한 기능.
- **단점**: 학습 곡선이 다소 가파름.

### CreateJS
- **언어**: JavaScript
- **특징**: Adobe Flash와 유사한 경험을 제공하는 2D 그래픽 라이브러리.
- **용도**: 2D 애니메이션, 게임.
- **장점**: Flash에서의 경험을 쉽게 웹으로 옮길 수 있음.
- **단점**: 3D 지원이 없음, Flash의 영향을 받아서 현대적이지 않을 수 있음.

이들 각각은 서로 다른 목적과 필요에 따라 선택할 수 있으며, 특정 프로젝트에 더 적합한 라이브러리나 기술이 있을 수 있습니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

js 스트링에서 요소 갯수 세기

이상하다 https://stackoverflow.com/questions/881085/count-the-number-of-occurrences-of-a-character-in-a-string-in-javascript If you're looking for the commas: (mainStr. split ( "," ). length - 1 ) //3 If you're looking for the str (mainStr. split ( "str" ). length - 1 ) //4   console . log (( "str1,str2,str3,str4" . match ( /,/g ) || []). length ); //logs 3 console . log (( "str1,str2,str3,str4" . match ( new RegExp ( "str" , "g" )) || []). length ); //logs 4
Read more »

STUDY

@GetMapping("/proxy-download") public ResponseEntity<Resource> proxyDownload() {     String sourceUrl = "https://example.com/file-to-download.bin";     ResponseEntity<byte[]> response = restTemplate.exchange(         sourceUrl,         HttpMethod.GET,         null,         byte[].class     );     byte[] fileBytes = response.getBody();     // 👉 원본 Content-Disposition 헤더에서 파일 이름 추출     String disposition = response.getHeaders().getFirst(HttpHeaders.CONTENT_DISPOSITION);     String filename = "default.bin"; // fallback     if (disposition != null && disposition.contains("filename=")) {         // Content-Disposition: attachment; filename="some_file.bin"         filename = disposition.split("filename=")[1].replace("\"", "").trim();     }     HttpHeaders ...
Read more »

javascript cheatsheet

JavaScript 기능들을 정리한 치트시트를 제공합니다. 이 치트시트는 데이터 구조와 알고리즘을 구현하는 데 필요한 기본적인 구문과 기능을 포함하고 있습니다. ## JavaScript Coding Cheat Sheet ### 1. **기본 문법** #### 변수 선언 ```javascript let variable = value;   // 변수 선언 (변경 가능) const constant = value; // 상수 선언 (변경 불가) ``` #### 함수 선언 ```javascript // 함수 선언식 function functionName(params) {   // 함수 내용 } // 함수 표현식 const functionName = function(params) {   // 함수 내용 }; // 화살표 함수 const functionName = (params) => {   // 함수 내용 }; ``` ### 2. **기본 데이터 구조** #### 배열 (Array) ```javascript let arr = [1, 2, 3]; // 배열 길이 console.log(arr.length); // 배열 요소 접근 console.log(arr[0]); // 배열의 끝에 추가 arr.push(4); // 배열의 끝에서 제거 arr.pop(); // 배열의 앞에 추가 arr.unshift(0); // 배열의 앞에서 제거 arr.shift(); ``` #### 객체 (Object) ```javascript let obj = {   key1: 'value1',   key2: 'value2' }; // 속성 접근 console.log(obj.key1); // 속성 추가 또는 변경 obj.key3 = 'value3'; // 속성 제거 delete obj.key2; ``` ### 3. **반복문 및 조건문** #### 반복문 ```javascript // for 반복문 for (let i = 0; i ...
Read more »