CreateJS로 이미지 표시, 파티클 발생 및 마우스 추적
이런 식으로 ...
개구리가 가지고 있는 마츠아키를 ParticleJS로 매끄럽게 태우고 있습니다.
마우스 클릭하여 이미지 표시 -> 마우스를 누른 상태에서 드래그하여 멜라멜라 -> 놓으면 진화 (?)
합니다.
마지막에 기재하고 있는 코드에 따른 설명을 기재하므로, 그쪽을 근거로 하면서 보실 수 있으면이라고 생각합니다.
개구리 이미지는 다조수 희화 소재를 빌렸습니다.
stage 만들기
html에 id를 설정한 캔버스를 넣어 구현합니다.
html<canvas id="myCanvas"></canvas>
javascript // Stageオブジェクトを作成。
stage = new createjs.Stage("myCanvas");
스마트폰 터치 대응
createjs는 아래와 같이 쓰는 것만으로, 터치 대응 디바이스시에 mouse의 XY 좌표가 터치한 XY 좌표가 됩니다.
javascript // タッチ操作をサポートしているブラウザーならタッチ操作を有効
if(createjs.Touch.isSupported() == true){
createjs.Touch.enable(stage)
}
Mouse 대응
MouseOver 와 MouseOut 는 부하가 높고 디폴트에서는 정지되고 있으므로, stage.enableMouseOver() 메소드로 유효하게 합니다.
javascriptstage.enableMouseOver()
이미지 정보
ParticleJS는 CreateJS를 사용하므로 이미지 로드도 CreateJS에서 구현합니다.
(처음 Canvas의 drawImage 메서드와 함께 사용해도 레이어가 겹쳐서 표시되는지 그려지지 않았습니다.)
이미지 로드 및 표시
이미지를 로드하려면 Bitmap 객체를 만듭니다.var img = new createjs.Bitmap('testImage.png'); 같은 느낌으로, 인수에 이미지 파일명을 지정할 수 있습니다.
그러나 이미지가 표시되기 전에 프로그램이 벗겨져 이미지가 표시되지 않는 경우가 있습니다.
그래서, 읽고 싶은 이미지를 queue.loadManifest() 로 설정해, 이미지가 완전히 로드된 후에는 한다.
javascript //キューオブジェクトを作成
queue = new createjs.LoadQueue();
//画像の読み込み
queue.loadManifest([
{id: "image_1", src: "img/frog.png"}
]);
//画像が読みこまれた後の処理
queue.addEventListener("complete", function(e){
imageEmitter = new createjs.Bitmap(queue.getResult("image_1"));
//stageに表示
stage.addChild(imageEmitter);
});
※ queue를 쓰는 방법으로 하면 서버에 up하지 않으면 표시되지 않으므로 XAMPP가 MAMP가 gulp가 ... 로컬 환경에서 확인해야 할 것 같습니다.
여러 이미지를 표시하려면 CreateJS에서 canvas에 여러 이미지를로드하고 표시하는 방법을 참조하십시오.
이미지의 기준점
이미지의 왼쪽 위가 (0.0)을 가리킵니다.
이번에는 mouse의 XY와 particleEmitter의 XY 좌표가 좋은 느낌의 위치에 오도록 showImage 함수 내에서 위치 조정을 하고 있습니다.
이미지의 오른쪽 상단에서 파티클을 생성하고 싶다면 이미지의 너비를 얻고 위치를 조정하십시오.queue.addEventListener("complete", function(e){}
틱 이벤트
tick 이벤트를 사용하면 정기적으로 함수를 호출할 수 있습니다.
javascriptcreatejs.Ticker.addEventListener("tick", handleTick);
라고 쓰면 handleTick 함수가 주기적으로 호출됩니다.
일단 부르면 계속 불리므로 그리기를 중지하고 싶을 때
javascriptcreatejs.Ticker.removeEventListener('tick');
라고 설명합니다.
프레임 속도
틱 이벤트는 기본적으로 24f로 불리며 변경도 가능합니다.
javascriptcreatejs.Ticker.setFPS(30);
60f로 하고 싶으면 브라우저의 화면 갱신 빈도(거의 60f)를 사용하면 매끄럽게 애니메이션을 할 수 있는 것 같습니다.
javascriptcreatejs.Ticker.timingMode = createjs.Ticker.RAF;
RAF는 RequstAnimationFrame의 약자.
particle 처리
particleDevelop 의 사이트에 가서 paticle을 만듭니다.
마찰의 파라미터라고 하면 particle가 같은 위치에 머물게 해 주기 때문에, 촉촉한 움직임이 됩니다.
오른쪽 상단의 "매개 변수 저장"아이콘을 클릭하여 JSON을 복사하고//매개 변수 JSON 복사 및 붙여 넣기로 작성한 곳에 복사합니다.
전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>松明</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<canvas id="myCanvas"></canvas>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<!-- パーティクルシステムのライブラリー読み込み -->
<script src="https://cdn.rawgit.com/ics-creative/ParticleJS/release/0.1.3/libs/particlejs.min.js"></script>
<script>
var particleSystem;
var stage;
var imageEmitter;
//var pibotX;
var queue;
var isMouseDown = false;
// ウィンドウのロードが終わり次第、初期化コードを呼び出す
window.addEventListener("load", function () {
// Stageオブジェクトの作成
stage = new createjs.Stage("myCanvas");
//キューオブジェクトを作成
queue = new createjs.LoadQueue();
// タッチ操作をサポートしているブラウザーならタッチ操作を有効
// if(createjs.Touch.isSupported() == true){
// createjs.Touch.enable(stage)
// }
stage.enableMouseOver();
//画像の読み込み
queue.loadManifest([
{id: "image_1", src: "img/frog.png"}
]);
//画像が読みこまれた後の処理
queue.addEventListener("complete", function(e){
imageEmitter = new createjs.Bitmap(queue.getResult("image_1"));
//スケールの調整
imageEmitter.scaleX = 0.3
imageEmitter.scaleY = 0.3
//画像の右上からparticleを発生させたい場合は画像の幅を取得
//pibotX = imageEmitter.image.width*imageEmitter.scaleX;
//stageに表示
stage.addChild(imageEmitter);
// フレームレートの設定
createjs.Ticker.timingMode = createjs.Ticker.RAF;
//マウスダウンした時の処理
stage.addEventListener('stagemousedown', function(e){
isMouseDown = true;
// パーティクルシステムのオブジェクトを作成
createParticle();
//画像の表示
showImage();
stage.update();
})
//マウスムーブしている時
stage.addEventListener('stagemousemove', function(e){
if(isMouseDown === true){
//マウス位置に従って、パーティクル発生位置とカエルの位置を更新する
//一度呼び出されたら呼ばれ続ける
createjs.Ticker.addEventListener("tick", handleTick);
}
})
//マウスアップした時
stage.addEventListener('stagemouseup', function(e){
stage.removeChild(particleSystem.container);
//tickイベントを停止
createjs.Ticker.removeEventListener('tick');
})
});
});
// パーティクルシステム作成
function createParticle(){
particleSystem = new particlejs.ParticleSystem();
// パーティクルシステムの描画コンテナーを表示リストに登録
stage.addChild(particleSystem.container);
// Particle Develop から書きだしたパーティクルの設定を読み込む
particleSystem.importFromJson(
// パラメーターJSONのコピー＆ペースト ここから--
{
"bgColor": "#00000",
"width": 693,
"height": 397,
"emitFrequency": 195,
"startX": 352,
"startXVariance": 30,
"startY": 306,
"startYVariance": 0,
"initialDirection": 27.5,
"initialDirectionVariance": 250,
"initialSpeed": "3.8",
"initialSpeedVariance": "7.4",
"friction": 0.1065,
"accelerationSpeed": "0.142",
"accelerationDirection": "275.8",
"startScale": 0.44,
"startScaleVariance": 0.5,
"finishScale": "0",
"finishScaleVariance": "0",
"lifeSpan": 87,
"lifeSpanVariance": 10,
"startAlpha": "1",
"startAlphaVariance": "0",
"finishAlpha": "0",
"finishAlphaVariance": 0.5,
"shapeIdList": [
"blur_circle"
],
"startColor": {
"hue": "17",
"hueVariance": 54,
"saturation": "91",
"saturationVariance": 0,
"luminance": "56",
"luminanceVariance": "16"
},
"blendMode": true,
"alphaCurveType": "1",
"VERSION": "0.1.3"
}
// パラメーターJSONのコピー＆ペースト ここまで---
);
}
function showImage(){
//カエルの位置
imageEmitter.x = stage.mouseX-10;
imageEmitter.y = stage.mouseY-50;
}
function handleTick() {
//マウス位置に従って、パーティクル発生位置とカエルの位置を更新する
//パーティクルの位置を調節する
particleSystem.startX = stage.mouseX;
particleSystem.startY = stage.mouseY;
//カエルの位置
showImage();
// パーティクルの発生・更新
particleSystem.update();
// 描画を更新する
stage.update();
}
</script>
<script type="text/javascript">
//canvasのサイズ指定
var w = $('.wrapper').width();
var h = w * 1.32;
$('#myCanvas').attr('width', w);
$('#myCanvas').attr('height', h);
</script>
</body>
</html>
참고 사이트
CreateJS에서 canvas로 이미지를로드하고 표시하는 방법
CreateJS의 마우스 오버 / 마우스 아웃을 구현하는 방법
CreateJS Ticker 사용 - ICS MEDIA
createjs (0.7.1)의 TimerFired를 완전히 멈추는 방법
웹사이트에 화려한 표현을! HTML5용 파티클 라이브러리 'ParticleJS' 공개
캔버스 크기 지정
Reference
이 문제에 관하여(CreateJS로 이미지 표시, 파티클 발생 및 마우스 추적), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/akspect/items/dc096cca469bc9e9793a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<canvas id="myCanvas"></canvas>
// Stageオブジェクトを作成。
stage = new createjs.Stage("myCanvas");
createjs는 아래와 같이 쓰는 것만으로, 터치 대응 디바이스시에 mouse의 XY 좌표가 터치한 XY 좌표가 됩니다.
javascript
// タッチ操作をサポートしているブラウザーならタッチ操作を有効
if(createjs.Touch.isSupported() == true){
createjs.Touch.enable(stage)
}
Mouse 대응
MouseOver 와 MouseOut 는 부하가 높고 디폴트에서는 정지되고 있으므로, stage.enableMouseOver() 메소드로 유효하게 합니다.
javascriptstage.enableMouseOver()
이미지 정보
ParticleJS는 CreateJS를 사용하므로 이미지 로드도 CreateJS에서 구현합니다.
(처음 Canvas의 drawImage 메서드와 함께 사용해도 레이어가 겹쳐서 표시되는지 그려지지 않았습니다.)
이미지 로드 및 표시
이미지를 로드하려면 Bitmap 객체를 만듭니다.var img = new createjs.Bitmap('testImage.png'); 같은 느낌으로, 인수에 이미지 파일명을 지정할 수 있습니다.
그러나 이미지가 표시되기 전에 프로그램이 벗겨져 이미지가 표시되지 않는 경우가 있습니다.
그래서, 읽고 싶은 이미지를 queue.loadManifest() 로 설정해, 이미지가 완전히 로드된 후에는 한다.
javascript //キューオブジェクトを作成
queue = new createjs.LoadQueue();
//画像の読み込み
queue.loadManifest([
{id: "image_1", src: "img/frog.png"}
]);
//画像が読みこまれた後の処理
queue.addEventListener("complete", function(e){
imageEmitter = new createjs.Bitmap(queue.getResult("image_1"));
//stageに表示
stage.addChild(imageEmitter);
});
※ queue를 쓰는 방법으로 하면 서버에 up하지 않으면 표시되지 않으므로 XAMPP가 MAMP가 gulp가 ... 로컬 환경에서 확인해야 할 것 같습니다.
여러 이미지를 표시하려면 CreateJS에서 canvas에 여러 이미지를로드하고 표시하는 방법을 참조하십시오.
이미지의 기준점
이미지의 왼쪽 위가 (0.0)을 가리킵니다.
이번에는 mouse의 XY와 particleEmitter의 XY 좌표가 좋은 느낌의 위치에 오도록 showImage 함수 내에서 위치 조정을 하고 있습니다.
이미지의 오른쪽 상단에서 파티클을 생성하고 싶다면 이미지의 너비를 얻고 위치를 조정하십시오.queue.addEventListener("complete", function(e){}
틱 이벤트
tick 이벤트를 사용하면 정기적으로 함수를 호출할 수 있습니다.
javascriptcreatejs.Ticker.addEventListener("tick", handleTick);
라고 쓰면 handleTick 함수가 주기적으로 호출됩니다.
일단 부르면 계속 불리므로 그리기를 중지하고 싶을 때
javascriptcreatejs.Ticker.removeEventListener('tick');
라고 설명합니다.
프레임 속도
틱 이벤트는 기본적으로 24f로 불리며 변경도 가능합니다.
javascriptcreatejs.Ticker.setFPS(30);
60f로 하고 싶으면 브라우저의 화면 갱신 빈도(거의 60f)를 사용하면 매끄럽게 애니메이션을 할 수 있는 것 같습니다.
javascriptcreatejs.Ticker.timingMode = createjs.Ticker.RAF;
RAF는 RequstAnimationFrame의 약자.
particle 처리
particleDevelop 의 사이트에 가서 paticle을 만듭니다.
마찰의 파라미터라고 하면 particle가 같은 위치에 머물게 해 주기 때문에, 촉촉한 움직임이 됩니다.
오른쪽 상단의 "매개 변수 저장"아이콘을 클릭하여 JSON을 복사하고//매개 변수 JSON 복사 및 붙여 넣기로 작성한 곳에 복사합니다.
전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>松明</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<canvas id="myCanvas"></canvas>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<!-- パーティクルシステムのライブラリー読み込み -->
<script src="https://cdn.rawgit.com/ics-creative/ParticleJS/release/0.1.3/libs/particlejs.min.js"></script>
<script>
var particleSystem;
var stage;
var imageEmitter;
//var pibotX;
var queue;
var isMouseDown = false;
// ウィンドウのロードが終わり次第、初期化コードを呼び出す
window.addEventListener("load", function () {
// Stageオブジェクトの作成
stage = new createjs.Stage("myCanvas");
//キューオブジェクトを作成
queue = new createjs.LoadQueue();
// タッチ操作をサポートしているブラウザーならタッチ操作を有効
// if(createjs.Touch.isSupported() == true){
// createjs.Touch.enable(stage)
// }
stage.enableMouseOver();
//画像の読み込み
queue.loadManifest([
{id: "image_1", src: "img/frog.png"}
]);
//画像が読みこまれた後の処理
queue.addEventListener("complete", function(e){
imageEmitter = new createjs.Bitmap(queue.getResult("image_1"));
//スケールの調整
imageEmitter.scaleX = 0.3
imageEmitter.scaleY = 0.3
//画像の右上からparticleを発生させたい場合は画像の幅を取得
//pibotX = imageEmitter.image.width*imageEmitter.scaleX;
//stageに表示
stage.addChild(imageEmitter);
// フレームレートの設定
createjs.Ticker.timingMode = createjs.Ticker.RAF;
//マウスダウンした時の処理
stage.addEventListener('stagemousedown', function(e){
isMouseDown = true;
// パーティクルシステムのオブジェクトを作成
createParticle();
//画像の表示
showImage();
stage.update();
})
//マウスムーブしている時
stage.addEventListener('stagemousemove', function(e){
if(isMouseDown === true){
//マウス位置に従って、パーティクル発生位置とカエルの位置を更新する
//一度呼び出されたら呼ばれ続ける
createjs.Ticker.addEventListener("tick", handleTick);
}
})
//マウスアップした時
stage.addEventListener('stagemouseup', function(e){
stage.removeChild(particleSystem.container);
//tickイベントを停止
createjs.Ticker.removeEventListener('tick');
})
});
});
// パーティクルシステム作成
function createParticle(){
particleSystem = new particlejs.ParticleSystem();
// パーティクルシステムの描画コンテナーを表示リストに登録
stage.addChild(particleSystem.container);
// Particle Develop から書きだしたパーティクルの設定を読み込む
particleSystem.importFromJson(
// パラメーターJSONのコピー＆ペースト ここから--
{
"bgColor": "#00000",
"width": 693,
"height": 397,
"emitFrequency": 195,
"startX": 352,
"startXVariance": 30,
"startY": 306,
"startYVariance": 0,
"initialDirection": 27.5,
"initialDirectionVariance": 250,
"initialSpeed": "3.8",
"initialSpeedVariance": "7.4",
"friction": 0.1065,
"accelerationSpeed": "0.142",
"accelerationDirection": "275.8",
"startScale": 0.44,
"startScaleVariance": 0.5,
"finishScale": "0",
"finishScaleVariance": "0",
"lifeSpan": 87,
"lifeSpanVariance": 10,
"startAlpha": "1",
"startAlphaVariance": "0",
"finishAlpha": "0",
"finishAlphaVariance": 0.5,
"shapeIdList": [
"blur_circle"
],
"startColor": {
"hue": "17",
"hueVariance": 54,
"saturation": "91",
"saturationVariance": 0,
"luminance": "56",
"luminanceVariance": "16"
},
"blendMode": true,
"alphaCurveType": "1",
"VERSION": "0.1.3"
}
// パラメーターJSONのコピー＆ペースト ここまで---
);
}
function showImage(){
//カエルの位置
imageEmitter.x = stage.mouseX-10;
imageEmitter.y = stage.mouseY-50;
}
function handleTick() {
//マウス位置に従って、パーティクル発生位置とカエルの位置を更新する
//パーティクルの位置を調節する
particleSystem.startX = stage.mouseX;
particleSystem.startY = stage.mouseY;
//カエルの位置
showImage();
// パーティクルの発生・更新
particleSystem.update();
// 描画を更新する
stage.update();
}
</script>
<script type="text/javascript">
//canvasのサイズ指定
var w = $('.wrapper').width();
var h = w * 1.32;
$('#myCanvas').attr('width', w);
$('#myCanvas').attr('height', h);
</script>
</body>
</html>
참고 사이트
CreateJS에서 canvas로 이미지를로드하고 표시하는 방법
CreateJS의 마우스 오버 / 마우스 아웃을 구현하는 방법
CreateJS Ticker 사용 - ICS MEDIA
createjs (0.7.1)의 TimerFired를 완전히 멈추는 방법
웹사이트에 화려한 표현을! HTML5용 파티클 라이브러리 'ParticleJS' 공개
캔버스 크기 지정
Reference
이 문제에 관하여(CreateJS로 이미지 표시, 파티클 발생 및 마우스 추적), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/akspect/items/dc096cca469bc9e9793a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
stage.enableMouseOver()
ParticleJS는 CreateJS를 사용하므로 이미지 로드도 CreateJS에서 구현합니다.
(처음 Canvas의 drawImage 메서드와 함께 사용해도 레이어가 겹쳐서 표시되는지 그려지지 않았습니다.)
이미지 로드 및 표시
이미지를 로드하려면 Bitmap 객체를 만듭니다.
var img = new createjs.Bitmap('testImage.png'); 같은 느낌으로, 인수에 이미지 파일명을 지정할 수 있습니다.그러나 이미지가 표시되기 전에 프로그램이 벗겨져 이미지가 표시되지 않는 경우가 있습니다.
그래서, 읽고 싶은 이미지를
queue.loadManifest() 로 설정해, 이미지가 완전히 로드된 후에는 한다.javascript
//キューオブジェクトを作成
queue = new createjs.LoadQueue();
//画像の読み込み
queue.loadManifest([
{id: "image_1", src: "img/frog.png"}
]);
//画像が読みこまれた後の処理
queue.addEventListener("complete", function(e){
imageEmitter = new createjs.Bitmap(queue.getResult("image_1"));
//stageに表示
stage.addChild(imageEmitter);
});
※ queue를 쓰는 방법으로 하면 서버에 up하지 않으면 표시되지 않으므로 XAMPP가 MAMP가 gulp가 ... 로컬 환경에서 확인해야 할 것 같습니다.
여러 이미지를 표시하려면 CreateJS에서 canvas에 여러 이미지를로드하고 표시하는 방법을 참조하십시오.
이미지의 기준점
이미지의 왼쪽 위가 (0.0)을 가리킵니다.
이번에는 mouse의 XY와 particleEmitter의 XY 좌표가 좋은 느낌의 위치에 오도록 showImage 함수 내에서 위치 조정을 하고 있습니다.
이미지의 오른쪽 상단에서 파티클을 생성하고 싶다면 이미지의 너비를 얻고 위치를 조정하십시오.
queue.addEventListener("complete", function(e){}틱 이벤트
tick 이벤트를 사용하면 정기적으로 함수를 호출할 수 있습니다.
javascriptcreatejs.Ticker.addEventListener("tick", handleTick);
라고 쓰면 handleTick 함수가 주기적으로 호출됩니다.
일단 부르면 계속 불리므로 그리기를 중지하고 싶을 때
javascriptcreatejs.Ticker.removeEventListener('tick');
라고 설명합니다.
프레임 속도
틱 이벤트는 기본적으로 24f로 불리며 변경도 가능합니다.
javascriptcreatejs.Ticker.setFPS(30);
60f로 하고 싶으면 브라우저의 화면 갱신 빈도(거의 60f)를 사용하면 매끄럽게 애니메이션을 할 수 있는 것 같습니다.
javascriptcreatejs.Ticker.timingMode = createjs.Ticker.RAF;
RAF는 RequstAnimationFrame의 약자.
particle 처리
particleDevelop 의 사이트에 가서 paticle을 만듭니다.
마찰의 파라미터라고 하면 particle가 같은 위치에 머물게 해 주기 때문에, 촉촉한 움직임이 됩니다.
오른쪽 상단의 "매개 변수 저장"아이콘을 클릭하여 JSON을 복사하고//매개 변수 JSON 복사 및 붙여 넣기로 작성한 곳에 복사합니다.
전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>松明</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<canvas id="myCanvas"></canvas>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<!-- パーティクルシステムのライブラリー読み込み -->
<script src="https://cdn.rawgit.com/ics-creative/ParticleJS/release/0.1.3/libs/particlejs.min.js"></script>
<script>
var particleSystem;
var stage;
var imageEmitter;
//var pibotX;
var queue;
var isMouseDown = false;
// ウィンドウのロードが終わり次第、初期化コードを呼び出す
window.addEventListener("load", function () {
// Stageオブジェクトの作成
stage = new createjs.Stage("myCanvas");
//キューオブジェクトを作成
queue = new createjs.LoadQueue();
// タッチ操作をサポートしているブラウザーならタッチ操作を有効
// if(createjs.Touch.isSupported() == true){
// createjs.Touch.enable(stage)
// }
stage.enableMouseOver();
//画像の読み込み
queue.loadManifest([
{id: "image_1", src: "img/frog.png"}
]);
//画像が読みこまれた後の処理
queue.addEventListener("complete", function(e){
imageEmitter = new createjs.Bitmap(queue.getResult("image_1"));
//スケールの調整
imageEmitter.scaleX = 0.3
imageEmitter.scaleY = 0.3
//画像の右上からparticleを発生させたい場合は画像の幅を取得
//pibotX = imageEmitter.image.width*imageEmitter.scaleX;
//stageに表示
stage.addChild(imageEmitter);
// フレームレートの設定
createjs.Ticker.timingMode = createjs.Ticker.RAF;
//マウスダウンした時の処理
stage.addEventListener('stagemousedown', function(e){
isMouseDown = true;
// パーティクルシステムのオブジェクトを作成
createParticle();
//画像の表示
showImage();
stage.update();
})
//マウスムーブしている時
stage.addEventListener('stagemousemove', function(e){
if(isMouseDown === true){
//マウス位置に従って、パーティクル発生位置とカエルの位置を更新する
//一度呼び出されたら呼ばれ続ける
createjs.Ticker.addEventListener("tick", handleTick);
}
})
//マウスアップした時
stage.addEventListener('stagemouseup', function(e){
stage.removeChild(particleSystem.container);
//tickイベントを停止
createjs.Ticker.removeEventListener('tick');
})
});
});
// パーティクルシステム作成
function createParticle(){
particleSystem = new particlejs.ParticleSystem();
// パーティクルシステムの描画コンテナーを表示リストに登録
stage.addChild(particleSystem.container);
// Particle Develop から書きだしたパーティクルの設定を読み込む
particleSystem.importFromJson(
// パラメーターJSONのコピー＆ペースト ここから--
{
"bgColor": "#00000",
"width": 693,
"height": 397,
"emitFrequency": 195,
"startX": 352,
"startXVariance": 30,
"startY": 306,
"startYVariance": 0,
"initialDirection": 27.5,
"initialDirectionVariance": 250,
"initialSpeed": "3.8",
"initialSpeedVariance": "7.4",
"friction": 0.1065,
"accelerationSpeed": "0.142",
"accelerationDirection": "275.8",
"startScale": 0.44,
"startScaleVariance": 0.5,
"finishScale": "0",
"finishScaleVariance": "0",
"lifeSpan": 87,
"lifeSpanVariance": 10,
"startAlpha": "1",
"startAlphaVariance": "0",
"finishAlpha": "0",
"finishAlphaVariance": 0.5,
"shapeIdList": [
"blur_circle"
],
"startColor": {
"hue": "17",
"hueVariance": 54,
"saturation": "91",
"saturationVariance": 0,
"luminance": "56",
"luminanceVariance": "16"
},
"blendMode": true,
"alphaCurveType": "1",
"VERSION": "0.1.3"
}
// パラメーターJSONのコピー＆ペースト ここまで---
);
}
function showImage(){
//カエルの位置
imageEmitter.x = stage.mouseX-10;
imageEmitter.y = stage.mouseY-50;
}
function handleTick() {
//マウス位置に従って、パーティクル発生位置とカエルの位置を更新する
//パーティクルの位置を調節する
particleSystem.startX = stage.mouseX;
particleSystem.startY = stage.mouseY;
//カエルの位置
showImage();
// パーティクルの発生・更新
particleSystem.update();
// 描画を更新する
stage.update();
}
</script>
<script type="text/javascript">
//canvasのサイズ指定
var w = $('.wrapper').width();
var h = w * 1.32;
$('#myCanvas').attr('width', w);
$('#myCanvas').attr('height', h);
</script>
</body>
</html>
참고 사이트
CreateJS에서 canvas로 이미지를로드하고 표시하는 방법
CreateJS의 마우스 오버 / 마우스 아웃을 구현하는 방법
CreateJS Ticker 사용 - ICS MEDIA
createjs (0.7.1)의 TimerFired를 완전히 멈추는 방법
웹사이트에 화려한 표현을! HTML5용 파티클 라이브러리 'ParticleJS' 공개
캔버스 크기 지정
Reference
이 문제에 관하여(CreateJS로 이미지 표시, 파티클 발생 및 마우스 추적), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/akspect/items/dc096cca469bc9e9793a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.removeEventListener('tick');
createjs.Ticker.setFPS(30);
createjs.Ticker.timingMode = createjs.Ticker.RAF;
particleDevelop 의 사이트에 가서 paticle을 만듭니다.
마찰의 파라미터라고 하면 particle가 같은 위치에 머물게 해 주기 때문에, 촉촉한 움직임이 됩니다.
오른쪽 상단의 "매개 변수 저장"아이콘을 클릭하여 JSON을 복사하고//매개 변수 JSON 복사 및 붙여 넣기로 작성한 곳에 복사합니다.
전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>松明</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<canvas id="myCanvas"></canvas>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<!-- パーティクルシステムのライブラリー読み込み -->
<script src="https://cdn.rawgit.com/ics-creative/ParticleJS/release/0.1.3/libs/particlejs.min.js"></script>
<script>
var particleSystem;
var stage;
var imageEmitter;
//var pibotX;
var queue;
var isMouseDown = false;
// ウィンドウのロードが終わり次第、初期化コードを呼び出す
window.addEventListener("load", function () {
// Stageオブジェクトの作成
stage = new createjs.Stage("myCanvas");
//キューオブジェクトを作成
queue = new createjs.LoadQueue();
// タッチ操作をサポートしているブラウザーならタッチ操作を有効
// if(createjs.Touch.isSupported() == true){
// createjs.Touch.enable(stage)
// }
stage.enableMouseOver();
//画像の読み込み
queue.loadManifest([
{id: "image_1", src: "img/frog.png"}
]);
//画像が読みこまれた後の処理
queue.addEventListener("complete", function(e){
imageEmitter = new createjs.Bitmap(queue.getResult("image_1"));
//スケールの調整
imageEmitter.scaleX = 0.3
imageEmitter.scaleY = 0.3
//画像の右上からparticleを発生させたい場合は画像の幅を取得
//pibotX = imageEmitter.image.width*imageEmitter.scaleX;
//stageに表示
stage.addChild(imageEmitter);
// フレームレートの設定
createjs.Ticker.timingMode = createjs.Ticker.RAF;
//マウスダウンした時の処理
stage.addEventListener('stagemousedown', function(e){
isMouseDown = true;
// パーティクルシステムのオブジェクトを作成
createParticle();
//画像の表示
showImage();
stage.update();
})
//マウスムーブしている時
stage.addEventListener('stagemousemove', function(e){
if(isMouseDown === true){
//マウス位置に従って、パーティクル発生位置とカエルの位置を更新する
//一度呼び出されたら呼ばれ続ける
createjs.Ticker.addEventListener("tick", handleTick);
}
})
//マウスアップした時
stage.addEventListener('stagemouseup', function(e){
stage.removeChild(particleSystem.container);
//tickイベントを停止
createjs.Ticker.removeEventListener('tick');
})
});
});
// パーティクルシステム作成
function createParticle(){
particleSystem = new particlejs.ParticleSystem();
// パーティクルシステムの描画コンテナーを表示リストに登録
stage.addChild(particleSystem.container);
// Particle Develop から書きだしたパーティクルの設定を読み込む
particleSystem.importFromJson(
// パラメーターJSONのコピー＆ペースト ここから--
{
"bgColor": "#00000",
"width": 693,
"height": 397,
"emitFrequency": 195,
"startX": 352,
"startXVariance": 30,
"startY": 306,
"startYVariance": 0,
"initialDirection": 27.5,
"initialDirectionVariance": 250,
"initialSpeed": "3.8",
"initialSpeedVariance": "7.4",
"friction": 0.1065,
"accelerationSpeed": "0.142",
"accelerationDirection": "275.8",
"startScale": 0.44,
"startScaleVariance": 0.5,
"finishScale": "0",
"finishScaleVariance": "0",
"lifeSpan": 87,
"lifeSpanVariance": 10,
"startAlpha": "1",
"startAlphaVariance": "0",
"finishAlpha": "0",
"finishAlphaVariance": 0.5,
"shapeIdList": [
"blur_circle"
],
"startColor": {
"hue": "17",
"hueVariance": 54,
"saturation": "91",
"saturationVariance": 0,
"luminance": "56",
"luminanceVariance": "16"
},
"blendMode": true,
"alphaCurveType": "1",
"VERSION": "0.1.3"
}
// パラメーターJSONのコピー＆ペースト ここまで---
);
}
function showImage(){
//カエルの位置
imageEmitter.x = stage.mouseX-10;
imageEmitter.y = stage.mouseY-50;
}
function handleTick() {
//マウス位置に従って、パーティクル発生位置とカエルの位置を更新する
//パーティクルの位置を調節する
particleSystem.startX = stage.mouseX;
particleSystem.startY = stage.mouseY;
//カエルの位置
showImage();
// パーティクルの発生・更新
particleSystem.update();
// 描画を更新する
stage.update();
}
</script>
<script type="text/javascript">
//canvasのサイズ指定
var w = $('.wrapper').width();
var h = w * 1.32;
$('#myCanvas').attr('width', w);
$('#myCanvas').attr('height', h);
</script>
</body>
</html>
참고 사이트
CreateJS에서 canvas로 이미지를로드하고 표시하는 방법
CreateJS의 마우스 오버 / 마우스 아웃을 구현하는 방법
CreateJS Ticker 사용 - ICS MEDIA
createjs (0.7.1)의 TimerFired를 완전히 멈추는 방법
웹사이트에 화려한 표현을! HTML5용 파티클 라이브러리 'ParticleJS' 공개
캔버스 크기 지정
Reference
이 문제에 관하여(CreateJS로 이미지 표시, 파티클 발생 및 마우스 추적), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/akspect/items/dc096cca469bc9e9793a
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>松明</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<canvas id="myCanvas"></canvas>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<!-- パーティクルシステムのライブラリー読み込み -->
<script src="https://cdn.rawgit.com/ics-creative/ParticleJS/release/0.1.3/libs/particlejs.min.js"></script>
<script>
var particleSystem;
var stage;
var imageEmitter;
//var pibotX;
var queue;
var isMouseDown = false;
// ウィンドウのロードが終わり次第、初期化コードを呼び出す
window.addEventListener("load", function () {
// Stageオブジェクトの作成
stage = new createjs.Stage("myCanvas");
//キューオブジェクトを作成
queue = new createjs.LoadQueue();
// タッチ操作をサポートしているブラウザーならタッチ操作を有効
// if(createjs.Touch.isSupported() == true){
// createjs.Touch.enable(stage)
// }
stage.enableMouseOver();
//画像の読み込み
queue.loadManifest([
{id: "image_1", src: "img/frog.png"}
]);
//画像が読みこまれた後の処理
queue.addEventListener("complete", function(e){
imageEmitter = new createjs.Bitmap(queue.getResult("image_1"));
//スケールの調整
imageEmitter.scaleX = 0.3
imageEmitter.scaleY = 0.3
//画像の右上からparticleを発生させたい場合は画像の幅を取得
//pibotX = imageEmitter.image.width*imageEmitter.scaleX;
//stageに表示
stage.addChild(imageEmitter);
// フレームレートの設定
createjs.Ticker.timingMode = createjs.Ticker.RAF;
//マウスダウンした時の処理
stage.addEventListener('stagemousedown', function(e){
isMouseDown = true;
// パーティクルシステムのオブジェクトを作成
createParticle();
//画像の表示
showImage();
stage.update();
})
//マウスムーブしている時
stage.addEventListener('stagemousemove', function(e){
if(isMouseDown === true){
//マウス位置に従って、パーティクル発生位置とカエルの位置を更新する
//一度呼び出されたら呼ばれ続ける
createjs.Ticker.addEventListener("tick", handleTick);
}
})
//マウスアップした時
stage.addEventListener('stagemouseup', function(e){
stage.removeChild(particleSystem.container);
//tickイベントを停止
createjs.Ticker.removeEventListener('tick');
})
});
});
// パーティクルシステム作成
function createParticle(){
particleSystem = new particlejs.ParticleSystem();
// パーティクルシステムの描画コンテナーを表示リストに登録
stage.addChild(particleSystem.container);
// Particle Develop から書きだしたパーティクルの設定を読み込む
particleSystem.importFromJson(
// パラメーターJSONのコピー＆ペースト ここから--
{
"bgColor": "#00000",
"width": 693,
"height": 397,
"emitFrequency": 195,
"startX": 352,
"startXVariance": 30,
"startY": 306,
"startYVariance": 0,
"initialDirection": 27.5,
"initialDirectionVariance": 250,
"initialSpeed": "3.8",
"initialSpeedVariance": "7.4",
"friction": 0.1065,
"accelerationSpeed": "0.142",
"accelerationDirection": "275.8",
"startScale": 0.44,
"startScaleVariance": 0.5,
"finishScale": "0",
"finishScaleVariance": "0",
"lifeSpan": 87,
"lifeSpanVariance": 10,
"startAlpha": "1",
"startAlphaVariance": "0",
"finishAlpha": "0",
"finishAlphaVariance": 0.5,
"shapeIdList": [
"blur_circle"
],
"startColor": {
"hue": "17",
"hueVariance": 54,
"saturation": "91",
"saturationVariance": 0,
"luminance": "56",
"luminanceVariance": "16"
},
"blendMode": true,
"alphaCurveType": "1",
"VERSION": "0.1.3"
}
// パラメーターJSONのコピー＆ペースト ここまで---
);
}
function showImage(){
//カエルの位置
imageEmitter.x = stage.mouseX-10;
imageEmitter.y = stage.mouseY-50;
}
function handleTick() {
//マウス位置に従って、パーティクル発生位置とカエルの位置を更新する
//パーティクルの位置を調節する
particleSystem.startX = stage.mouseX;
particleSystem.startY = stage.mouseY;
//カエルの位置
showImage();
// パーティクルの発生・更新
particleSystem.update();
// 描画を更新する
stage.update();
}
</script>
<script type="text/javascript">
//canvasのサイズ指定
var w = $('.wrapper').width();
var h = w * 1.32;
$('#myCanvas').attr('width', w);
$('#myCanvas').attr('height', h);
</script>
</body>
</html>
CreateJS에서 canvas로 이미지를로드하고 표시하는 방법
CreateJS의 마우스 오버 / 마우스 아웃을 구현하는 방법
CreateJS Ticker 사용 - ICS MEDIA
createjs (0.7.1)의 TimerFired를 완전히 멈추는 방법
웹사이트에 화려한 표현을! HTML5용 파티클 라이브러리 'ParticleJS' 공개
캔버스 크기 지정
Reference
이 문제에 관하여(CreateJS로 이미지 표시, 파티클 발생 및 마우스 추적), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/akspect/items/dc096cca469bc9e9793a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
