鶴岡建二

デジタルコンテンツクリエーター

鶴岡建二

デジタルコンテンツクリエーター

マガジン

  • Blender+Unityで初心者がゲームを開発するまで

    Blender+Unityを使って、3Dソフト、3Dゲーム開発の初心者がゲームを開発できるようになる(!)までを書きます。

  • WEBデザイン基礎 2020

    出雲コアカレッジ、IT、オンライン授業

最近の記事

Unityでゲーム開発中に調べたこと。

フレームレートの設定 参照元 https://blog.unity.com/ja/technology/precise-framerates-in-unity using System.Collections;using System.Threading;using UnityEngine;public class ForceRenderRate : MonoBehaviour{ public float Rate = 50.0f; float current

    • Unity エラーコード

      ' XXX' AnimationEvent has no function name specified! アニメーションに不必要なイベントが追加されている。アニメーションイベントを削除すればよい。

      • Unity 2Dゲーム開発 Photoshopファイルからインポート

        Photoshopでキャラクターアニメをレイヤー分けして描いたら、ファイルを別名で保存。その際に「ビッグドキュメント形式(*psb)」で保存する。 そのファイルをアセットにドラッグ。それだけ。レイヤー別にスプライトとして使えるし、アニメーションのスプライトシートも自動で作られる。 シーンに配置するとこうなる。 1個目と2個目はレイヤー位置を保持した同じもの? なぜ2個? 3個目はスプライトシート。アニメーションとして保存されました。 4個目はレイヤー1の1個の画像。 5個

        • Unity 2Dゲーム開発 ドット絵がぼやける

          アセットに画像を読み込んで、シーンに配置するとドット絵の画像がぼやける。そんな時は、アセット内の画像(シーンに配置した画像ではない)をクリックして、インスペクターの「フィルターモード」を「ポイント(フィルターなし)」にする。 ユニット毎のピクセル数を画像のピクセル数に合わるように書かれている解説ブログを見かけたことがあるが、いじらなくても一応大丈夫だった。 ドット絵がくっきりして、もらもや解消。

        Unityでゲーム開発中に調べたこと。

        マガジン

        • Blender+Unityで初心者がゲームを開発するまで
          6本
        • WEBデザイン基礎 2020
          11本

        記事

          Blender2.8でモデリング

          球をモデリングしよう球、つまり、ボールみたいな物を作りたい。プリミティブな物体、つまり、立方体とか、球とか、簡単な物体は、最初から用意されていて、クリックだけで球は作れるだろう。そう思っていました。 しかし、いきなり大きな壁にぶち当たりました。 UV球、ICO球、NURBS球、メタボール、球だけで4種類もある。 しかも、立方体を丸めるという機能で、球が作れることができるらしい。 面貼りという方法で、球を作っている人もいるぞ。 UV球 セグメント数、リング数を大きくする

          Blender2.8でモデリング

          Blender2.8を始めます。

          はじめにオープンソースの統合型3DCGソフトウェア、Blenderがバージョン2.8になって、使いやすくなったという噂を聞いたので、始めてみることにしました。 目標は、Blenderで3Dのキャラクターをモデリングして、Unityでのゲーム開発です。筆者は、3Dソフト自体初心者で、Unityもダウンロードしただけで、いじっていません。 いろいろなサイトや、Youtubeの動画、本などを参考に学んでいくつもりですが、この記事を読んだ人が、最短距離で目標に辿り着けるように書い

          Blender2.8を始めます。

          WEBデザイン基礎(9)headタグ内には、最低何を書けばいいのか?

          headタグの中は、必要なページのリンクなどがあれば、ページ自体は見ることができるが、重要な情報が抜けていると、見てもらえないページになるかも・・・。 <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap

          WEBデザイン基礎(9)headタグ内には、最低何を書けばいいのか?

          WEBデザイン基礎(8)Bootstrapでテンプレートを作ってみよう。

          Bootstrapのテンプレートは、ネット上にたくさん公開されていますが、英語のテンプレートが多く、日本のサイトにはしっくりこないものが多いように感じます。それでは、自分でテンプレートを作ってみましょう。 まずは、ワイヤーフレームを作ってイメージを固めましょう。例えば、ケーキ屋さんのお店のホームページや、趣味のイラストを紹介するブログなどと具体的に考えるとイメージしやすいです。 下記のページなどを参考にして、またいろいろなホームページを見て、アイディアを練ってみよう。 Bo

          WEBデザイン基礎(8)Bootstrapでテンプレートを作ってみよう。

          WEBデザイン基礎(7)Bootstrap(3)

          カード(Cards)を作ろう。 商品を写真やキャプションを使って紹介したいときに便利なカードを作ってみましょう。 カードには、いろいろなスタイルを選べますが、以下のコードは、上の画像のような、写真、タイトル、説明文、ボタンが入ったものです。 <div class="card" style="width:15rem;"><img src="cake.png" class="img-fluid" alt="チーズケーキ"> <div class="card-body">

          WEBデザイン基礎(7)Bootstrap(3)

          WEBデザイン基礎(6)Bootstrap(2)

          Grid System(グリッドシステム)についてとりあえず、やってみよう。 行、列に箱を作って、レイアウトしていきます。 まず、container内にrow(行)、その中にcol(列、カラム)を作る。 カラムは、12個作ることができる。 col-1 カラム1個分の大きさ col-2 カラム2個分の大きさ col-3 カラム3個分の大きさ    ・    ・ となる。数字を指定しなくてもcolを入れた分だけでも均等に分割される。 (とても簡単で便利) 以下のコードを、前

          WEBデザイン基礎(6)Bootstrap(2)

          WEBデザイン基礎(5)Bootstrap(1)

          Bootstrapを使ったデザイン Bootstrapとは、レスポンシブWEBデザインで制作することを容易にする、コンポーネントライブラリです。つまり、容易されたパーツを組み合わせて、カスタマイズしていけば、ゼロからJavascript、やCSSを書かなくても短時間でWEBページを作ることができます。まずは、ダウンロードしてみましょう。 Bootstrapダウンロードページ ダウンロードしても、意味がわからなかったら、以下のスターターテンプレートをお使いください。ライブ

          WEBデザイン基礎(5)Bootstrap(1)

          WEBデザイン基礎 いろいろなソフトをつかってみよう(2)Adobe Photoshop

          Adobe Photoshopとは?WEBデザインの制作に欠かせないソフトとして、Adobe Photoshopがあります。写真の加工は、もちろん、WEB用の画像(jpeg、gif、png)の書き出しにとても重宝するツールです。画像編集ソフトの業界標準になっているので、ファイルのやりとりもスムーズにできるでしょう。 演習 ドット絵を描いてみよう。新規ドキュメントで、50ピクセルの正方形のアートボードを作ります。 ズームツール、ナビゲーターなどを使って拡大します。マウスでも

          WEBデザイン基礎 いろいろなソフトをつかってみよう(2)Adobe Photoshop

          WEBデザイン基礎(4)レスポンシブWEBデザイン

          レスポンシブWEBデザインってどんなデザイン?レスポンシブWEBデザインとは、パソコン、スマホ、タブレットなど、画面サイズが違っていても、デバイスの大きさに合わせて、最適化して表示させるデザインのことです。 デバイスごとにHTMLを作っていたら、作業が増えます。CSSで表示を切り替えれば、複数のHTMLを作らずに済みます。 レスポンシブWEBデザインの方法headタグ内にviewport設定をします。 <meta name="viewport" content="widt

          WEBデザイン基礎(4)レスポンシブWEBデザイン

          WEBデザイン基礎(3)配色

          WEBの配色色が人に与える心理的な影響は大きいです。WEBデザインにおいても配色について基本的な知識が必要です。「清潔感のあるホームページを作ってほしい」とクライアントから依頼されたとき、要望に基づいた提案をできなければいけません。「清潔感」でイメージする色は、人それぞれかもしれません。ただ、多くの人が清潔だと感じる色はあります。色の持つ共通イメージを学んでいきます。 WEBの色は、モニターが表現できる色になります。カラーモードは、RGBです。HTMLでは、カラーコードを使

          WEBデザイン基礎(3)配色

          WEBデザイン基礎 いろいろなソフトをつかってみよう(1)

          簡単3Dモデリング”MagicaVoxel”で遊ぼう。 MagicaVoxelダウンロードページ MagicaVoxelは、立方体を積み木のように積み上げていくような方法でモデリングできるソフトです。英語のソフトですが、いじっているうちに、いつの間にか夢中になってしまいます。 制作したグラフィックは、WEBデザインに使用することもできますし、モデリングしたキャラクターに、ボーンを入れてアニメーションさせたり、UNITYでゲームにすることもできます。 演習 MagicaV

          WEBデザイン基礎 いろいろなソフトをつかってみよう(1)

          WEBデザイン基礎(2)

          WEBデザインの基本的な考え方WEBデザインは、四角のボックスを組み合わせて作っていきます。 雑誌の表紙やポスターと違い、パソコンやスマホのブラウザで見るという制約があります。必ず上からスクロールして読みますし、ユーザーの環境によっては、フォントも幅のサイズも違う場合があります。さらに大きな違いは、随時更新するということです。一度作ったら終わりではありません。 見やすさ、デバイスの違いによる見た目の違いへの対応、更新のしやすさなど考慮に入れると、四角いボックス(箱)を組み合わ

          WEBデザイン基礎(2)