JavaScript – ページ 3

shapez.io

2020-07-15 / 01:05:092020-07-17 / 08:07:56 Hiroshi Takashima

暇つぶしに買ったゲーム「shapez.io」。Factorioみたいなやつ、資源は無尽蔵だしタワーディフェンスな要素もなし、ロジスティクスパズルゲーム？要求されるカタチに資源を分割したり、くっ付けたり、色付けたりして納品するゲームです。

ゲームの中で「納品」とか言われるとテンション下がりますけど。緩い借金と作業をしながら動物たちと無人島生活をするゲームが流行ってるくらいですから、休日に自分は何をやってんねんとかは、まぁ深く考えんとこ…。

なんだかんだでLevel18を終えるまで33時間もかかりました…。大半は放置ですけどね。「ブループリント(設置済み建築物のコピペ)」が手に入ると放置に拍車がかかってする事が無くなってきます。あと現状のラインを最適化するくらいなら、空き地に最適化したものを増築！みたいにどこぞの国みたいな量産の仕方が出来るのでゲーム的には微妙ですが、410円にしては結構遊べます。

このゲーム「electron」をフレームワークとして開発されています。乱暴に言うとHTML+CSS+Javascriptで動いてるという事です。快適には動きますがc++で書かれたFactorioと比べると重たいです。

オープンソースとして開発されており、ソースコードが公開されています。じっくり読んでみたいところです。

p5.js on Electron

2017-10-19 / 21:15:212018-07-28 / 16:07:27 Hiroshi Takashima

ActionScriptの代替としてElectronの勉強をと言いつつ、仕事が忙しくなり全く手を付けていませんでしたが、ちょっと再開。

なにせ「Electronではじめるアプリ開発[Amazon.co.jp]」の敷居が高い！第3章の「チャットアプリケーションを作ろう」からES6(ES2015)のJavascriptで書き始めて、「import?」さっきまでの「require」はどこいったの？からのReactの浅ーい説明と、Webアプリの開発経験が無いと読み進めるのは難しい内容です。

てなことで、横道にそれて(逃げて?)「Electron上でProcessingを動かしてみる」です。

正確にはそのJavascript実装版の「p5.js」を動かしてみた！です。

いままで作ってきたProcessingのスケッチには追加のライブラリが必要なものばかりでしたので使用せず、p5js.orgのFlockingを移植してみました。移植と言っても、p5をインスタンスモードで動かす事とFlockとBoidをモジュール化したってだけです。

モジュール化と読込はnode.jsのrequireで実装しています。ES2016ならimportやclassが使えるので書きやすいんですが、トランスパイルを挟む事になりp5が動かない時に問題の切り分けが今は上手くできそうにないので後回しです。今回書いたのはNode IntegrationなJavascriptという事になります。

つまづいた所が何点か、

いきなりElectromパッケージのインストールができませんでした。セキュリティソフトの「ESET Endpoint Antivirus」が邪魔をしていたらしく一時的にオフにする事で「npm install」を通すことができました。

あと、指定サイズぴったりのコンテンツサイズを用意したかったのですが、

win = new BrowserWindow({"width":800,"height":600,"resizable": false});

とするだけではウィンドウタイトルやウィンドウの枠、いわゆるクロームも含めたサイズのウィンドウが作成されます。

win = new BrowserWindow({"width":800,"height":600,"resizable": false,"useContentSize": true});

とすることでコンテンツサイズが800×600のウィンドウを作ってくれるのですが、Windowsで実行する場合に出るメニューバーを消したい場合、

win = new BrowserWindow({"width":800,"height":600,"resizable": false,"useContentSize": true});
win.setMenu(null);

とするとメニューバーの高さ分隙間が出来てしまいました。これは以下のようにウィンドウを作る前にメニューを消すことで対処しました。

Menu.setApplicationMenu(null);
win = new BrowserWindow({"width":800,"height":600,"resizable": false,"useContentSize": true});

複数のウィンドウを持ったアプリの場合は問題が出るかもしれません。

今回の成果物～electron_test_p5。

展開したフォルダへシェルで移動して、$ npm install で必要なパッケージのインストールし、$ npm run start で実行できます。と思います。

道のり長いなー。

Alt-AIR

2017-08-01 / 23:43:252017-08-01 / 23:08:24 Hiroshi Takashima

Electronでのアプリ開発をかじり始めました。

Flash Playerは2020年末で終わりますが、Abobe AIRは続くんだそうで(AIR Roadmap Update）

まぁ、ホンマか？と。いつまで約束できますん？と。来年には「AIRもやめまーす」なんて事が無いとも限りません。

何件かAIRアプリケーションを納品しており、出来上がったものを別の開発言語で作り直すなんてことは無理としても、AIRの代替のものを探して行きついたところがElectronです。

参考書片手に始めましたが、JavaScriptってこんなんでしたっけ、最近もAfterEffectsのスクリプトを書きましたが、違う。letとかconstとか何？varどこいった?

本当にAIRアプリケーション開発の代替になるかな。

Electronではじめるアプリ開発[Amazon.co.jp]

AfterEffects – レイヤーのPropertyObjectのリスト

2016-09-08 / 22:10:402017-07-12 / 19:07:06 Hiroshi Takashima

ずっーと以前に中途半端に書いた記事の続き(7年越し!!)です。

作った経緯を忘れましたが、とあるプロパティのMatchNameが知りたかっただけで再帰処理の無いスクリプトでした。以下がレイヤーに適用したエフェクトのプロパティも含め全てリストするスクリプトです。ESTKへコピーしAfterEffects側でレイヤーを一つ選択してから実行します。

(function(){
    var activeComp = app.project.activeItem;
    var selected = activeComp.selectedLayers[0];
    $.writeln("Layer Name:" + selected.name);

    function listProperties(obj,depth){
        for(var i=1; i<=obj.numProperties; i++){
            var indent = ""
            for(var j = 1; j <= depth;j++) indent += "\t";
            $.write(indent + i +":"+obj.property(i).name+":"+obj.property(i).matchName+"\n") ;
            listProperties (obj.property(i),depth+1);
        }
    }    

    listProperties (selected,0);
}());

結果は、ESTKのコンソールへ出力されます。

昨日投稿したスクリプトの改良をしていて気付きましたが、レイヤーの親子関係で親を知る事はレイヤーオブジェクトのparentアトリビュートから出来ますが、子のレイヤーへの参照は無いんです。

もしかしてプロパティオブジェクトに入ってるかなと思って上のスクリプトを書きましたが見つからず、、、

いやビックリ。全てのレイヤーのparentアトリビュートを調査して逆からたどるとかするの？
シーングラフ的なもの無いのか、、、

AfterEffects – グリッド状にレイヤーを複製

2016-09-07 / 21:40:292017-07-12 / 15:07:03 Hiroshi Takashima

スクリプトを作成中。

オフセットの数値を入力するのではなく、矩形の始点(左上)と終点(右下)を選択して実行すると、始点として選択したレイヤーが複製される感じ。

ひとまず動くのは出来ましたが、位置アニメーションしているレイヤーへの対応が出来ていない。あと子をもつレイヤーの扱いとか。アニメーション対応は結構大変そう。仕事に必要な部分だけ実装してひとまず満足状態なので、機能を追加しておいおい公開する事にします。探せば似たような機能を持つものはどこかにあるでしょうけどね。

久しぶりにAEのスクリプトを書きましたが、数年前からまったく新しい機能が追加されていない？アイテムの選択変化でコールバックとかいまだに実装されないのは何で？

にしてもJavascriptはなんかとっつきにくい。動的型付けだったり、プロトタイプベースとか、thisのスコープが、とか。TypeScriptのAfterEffects用型定義ファイルが存在するようなので、TypeScriptで開発する方がいいかな。

LeaveBehind

なんぞいろいろ

タグ: JavaScript

shapez.io

p5.js on Electron

Alt-AIR

AfterEffects – レイヤーのPropertyObjectのリスト

AfterEffects – グリッド状にレイヤーを複製

共有:

共有:

共有:

共有:

共有: