簡単ブラウザゲーム・スマホ・占い・おみくじなど

ブラウゲームズ

今更ながら、CreateJSで万華鏡を作る

 

 

DEMOスクリプトはこちら(custom03.js)

 

今回のポイント

  • 万華鏡を表示する部分は、正三角形ShapeでBitmapオブジェクトをクリッピングマスクして作る
  • マスクしたBitmapをcontainerに入れて回転させることで、画像とマスクを一緒に回転する

 

function maskedBMP(imgsrc) { //imgsrcは、画像ファイル名 var container = new createjs.Container(); //画像 var bmpimg = new createjs.Bitmap(imgsrc); //mask Bitmapのクリッピングマスク処理 var maskShape = new createjs.Shape(); maskShape.graphics.beginFill("#FF0000"); maskShape.graphics.drawPolyStar(0, 0, 100, 3, 0, 0) var hen = (2 * 150) / Math.sqrt(3); maskShape.x = 50; maskShape.y = hen / 2; //Bitmapオブジェクトを正三角形Shapeでクリッピングマスク bmpimg.set({ mask : maskShape }); //コンテナに入れて返す container.addChild(bmpimg); return container; }

 

containerオブジェクトを6つ作り、60度ずつ回転させて、6角形になるように置く。

それぞれを、鏡像になるように反転。

マスクしたBitmapをcontainerに入れて回転させることで、画像とマスクを一緒に回転する。

(以下、無駄なコードの書き方してます。)

 

function create_mangeobj( imgsrc ) { var hen = (2 * 150) / Math.sqrt(3); mb1 = maskedBMP(imgsrc); stage.addChild(mb1); mb1.regX = 150; mb1.regY = hen / 2; mb1.x = 320; mb1.y = 198; mb2 = maskedBMP(imgsrc); stage.addChild(mb2); mb2.regX = 150; mb2.regY = hen / 2; mb2.x = 320; mb2.y = 198; mb2.scaleX = 1; //鏡像 mb2.scaleY = -1; //鏡像 mb2.rotation = 60; mb3 = maskedBMP(imgsrc); stage.addChild(mb3); mb3.regX = 150; mb3.regY = hen / 2; mb3.x = 320; mb3.y = 198; mb3.scaleX = 1; mb3.scaleY = -1; mb3.rotation = -60; mb1b = maskedBMP(imgsrc); stage.addChild(mb1b); mb1b.regX = 150; mb1b.regY = hen / 2; mb1b.x = 320; mb1b.y = 198; mb1b.scaleX = -1; mb1b.scaleY = 1; mb2b = maskedBMP(imgsrc); stage.addChild(mb2b); mb2b.regX = 150; mb2b.regY = hen / 2; mb2b.x = 320; mb2b.y = 198; mb2b.scaleX = -1; mb2b.scaleY = -1; mb2b.rotation = 60; mb3b = maskedBMP(imgsrc); stage.addChild(mb3b); mb3b.regX = 150; mb3b.regY = hen / 2; mb3b.x = 320; mb3b.y = 198; mb3b.scaleX = -1; mb3b.scaleY = -1; mb3b.rotation = -60; }

 

最後に、画像部分を移動させて万華鏡の完成。

 

//画像ファイルは、はじめにpreloadで読んでおく。 //読み込む外部ファイル情報 var manifest = [ {src: "./images/penguins2.jpg"}, {src: "./images/tulips2.jpg"}, {src: "./images/hydrangeas2.jpg"}, ]; // Stageの描画を更新 function handleTick() { if(mb3b.getChildAt(0).x > -298) { //万華鏡内の画像を移動 mb1.getChildAt(0).x -= 1; mb2.getChildAt(0).x -= 1; mb3.getChildAt(0).x -= 1; mb1b.getChildAt(0).x -= 1; mb2b.getChildAt(0).x -= 1; mb3b.getChildAt(0).x -= 1; } else { //万華鏡画像を変更 if ( cnt < 2 ) { cnt++; } else { cnt = 0; } create_mangeobj(imgs[cnt]); } stage.update(); }

 

 

プチゲームトップへもどる