WildTree Wiki

ユーザ用ツール

サイト用ツール

トレース:
ハイハイスクールアドベンチャー_windows版

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
ハイハイスクールアドベンチャー_windows版 [2025/09/22 00:58] – [遊び方] arakiハイハイスクールアドベンチャー_windows版 [2025/09/27 03:30] (現在) – [リソースファイルのコピー] araki
行 30: 行 30:
 そのうち気が向いたらインストーラを作るかもしれません。</del> そのうち気が向いたらインストーラを作るかもしれません。</del>
  
-[[https://www.wildtree.jp/~araki/HHSAdvWinSetup.zip|インストーラ]]をダウンロードして展開したら、Setup.exe を実行してください。+[[https://www.wildtree.jp/~araki/HHSAdvWin110.zip|インストーラ]]をダウンロードして展開したら、Setup.exe を実行してください。
  
 もし古いバージョンがインストールされていましたら、**お手数ですが、必ず、まず古いバージョンをアンインストールしてください**。 もし古いバージョンがインストールされていましたら、**お手数ですが、必ず、まず古いバージョンをアンインストールしてください**。
行 53: 行 53:
 そう思ったので、Windowsのビットマップイメージに対して、ダブルバッファでの読み書きが可能かどうか AIに尋ねたら、できるよ、というので、実験コードを作って、思ったように動くことを確認し、一気に移植しました。 そう思ったので、Windowsのビットマップイメージに対して、ダブルバッファでの読み書きが可能かどうか AIに尋ねたら、できるよ、というので、実験コードを作って、思ったように動くことを確認し、一気に移植しました。
  
-そもそも、SDL1番も C#で開発しており、SDL2にべったり依存している部分以外はそのまま流用可能なので、移植にかかった時間は非常に短かったといえます。+そもそも、SDL2版も C#で開発しており、SDL2にべったり依存している部分以外はそのまま流用可能なので、移植にかかった時間は非常に短かったといえます。
  
 SDL2に依存していた描画、サウンド機能、そしてイベントループはすべてWPFのそれで置き換わっています。 SDL2に依存していた描画、サウンド機能、そしてイベントループはすべてWPFのそれで置き換わっています。
行 219: 行 219:
 Androidだと、ライトテーマだけ全部書いておいて、ダークは色情報だけを上書きする、というような感じで作れますが、Windowsはよくわかりません。 Androidだと、ライトテーマだけ全部書いておいて、ダークは色情報だけを上書きする、というような感じで作れますが、Windowsはよくわかりません。
 とりあえず、ウィジェットまわりは同じ内容を書いておいて、頭の方に集めた色情報の変更でライトとダークを分ける感じでテーマファイルを作っています。 とりあえず、ウィジェットまわりは同じ内容を書いておいて、頭の方に集めた色情報の変更でライトとダークを分ける感じでテーマファイルを作っています。
 +
 +<file XML LightTheme.xaml>
 +<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 +                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 +
 +    <!-- 色定義 -->
 +    <Color x:Key="BackgroundColor">#FFFFFFFF</Color>
 +    <Color x:Key="ForegroundColor">#FF000000</Color>
 +        <!-- コントロールスタイル例 -->
 +    <Style TargetType="Window">
 +        <Setter Property="Background" Value="{StaticResource BackgroundBrush}" />
 +        <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
 +    </Style>
 +
 +    <Style TargetType="TextBlock">
 +        <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
 +    </Style>
 +
 +    <!-- TextBox -->
 +    <Style TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">
 +        <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
 +        <Setter Property="Background" Value="{StaticResource BackgroundBrush}" />
 +        <Setter Property="BorderBrush" Value="{StaticResource ForegroundBrush}" />
 +        <Setter Property="CaretBrush" Value="{StaticResource ForegroundBrush}" />
 +    </Style>   
 +</ResourceDictionary>
 +</file>
 +
 +<file XML DarkTheme.xaml>
 +<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 +                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 +
 +    <!-- 色定義 -->
 +    <Color x:Key="BackgroundColor">#FF1E1E1E</Color>
 +    <Color x:Key="ForegroundColor">#FFFFFFFF</Color>
 +        <!-- コントロールスタイル例 -->
 +    <Style TargetType="Window">
 +        <Setter Property="Background" Value="{StaticResource BackgroundBrush}" />
 +        <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
 +    </Style>
 +
 +    <Style TargetType="TextBlock">
 +        <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
 +    </Style>
 +
 +    <!-- TextBox -->
 +    <Style TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">
 +        <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
 +        <Setter Property="Background" Value="{StaticResource BackgroundBrush}" />
 +        <Setter Property="BorderBrush" Value="{StaticResource ForegroundBrush}" />
 +        <Setter Property="CaretBrush" Value="{StaticResource ForegroundBrush}" />
 +    </Style>   
 +</ResourceDictionary>
 +</file>
 +
 +ダークとライトの違いは最初の色の定義だけなのがわかると思います。((もちろんもっと複雑にライトだけの処理、ダークだけの処理を入れていくこともできますが。))
 +
 +こんな感じで、メニューがアクティブの時の色とか、必要なだけ色を作って、必要なウィジェットに色を割り当てていきます。
  
 静的なウィジェットはまあ問題ないんですが、メニューのドロップダウンとか、スクロールビューにおけるスクロールバーなど、フローティングなウィジェットはテーマの割り当て方が何通りかあるようで、理解しきれません。 静的なウィジェットはまあ問題ないんですが、メニューのドロップダウンとか、スクロールビューにおけるスクロールバーなど、フローティングなウィジェットはテーマの割り当て方が何通りかあるようで、理解しきれません。
行 564: 行 622:
 </code> </code>
  
 +==== スライドスイッチ風にしたい ====
 +
 +チェックボックスはいまどきつまらないよね。
 +見栄えを考えたらスライドスイッチ。
 +
 +AIに聞いたらスタイルでできるというのでやってみました。
 +
 +{{::hhsadvwin:prefs.png?400|}}
 +
 +まず、XAMLファイルで、スタイルを定義します。
 +
 +<code xml>
 +    <!-- スライドスイッチ風 ToggleButton スタイル -->
 +    <Style x:Key="SlideSwitchStyle" TargetType="ToggleButton">
 +        <Setter Property="Width" Value="40"/>
 +        <Setter Property="Height" Value="20"/>
 +        <Setter Property="Template">
 +            <Setter.Value>
 +                <ControlTemplate TargetType="ToggleButton">
 +                    <Grid>
 +                        <!-- 背景 -->
 +                        <Border x:Name="SwitchTrack"
 +                                CornerRadius="10"
 +                                Background="{DynamicResource ButtonBorderBrush}"
 +                                Height="20" Width="40"/>
 +                        <!-- ノブ -->
 +                        <Ellipse x:Name="SwitchThumb"
 +                                 Fill="{DynamicResource ButtonBackgroundBrush}"
 +                                 Width="18" Height="18"
 +                                 Margin="1"
 +                                 HorizontalAlignment="Left"/>
 +                    </Grid>
 +                    <ControlTemplate.Triggers>
 +                        <Trigger Property="IsChecked" Value="True">
 +                            <Setter TargetName="SwitchTrack" Property="Background" Value="{DynamicResource ButtonPressedBackgroundBrush}"/>
 +                            <Setter TargetName="SwitchThumb" Property="HorizontalAlignment" Value="Right"/>
 +                        </Trigger>
 +                        <Trigger Property="IsEnabled" Value="False">
 +                            <Setter TargetName="SwitchTrack" Property="Opacity" Value="0.5"/>
 +                            <Setter TargetName="SwitchThumb" Property="Opacity" Value="0.5"/>
 +                        </Trigger>
 +                    </ControlTemplate.Triggers>
 +                </ControlTemplate>
 +            </Setter.Value>
 +        </Setter>
 +    </Style>
 +</code>
 +
 +そして、レイアウト用のXAMLファイルでこのスタイルを持つ ToggleButtonを作ります。
 +
 +<code xml>
 +<Grid Margin="16,8,16,8">
 +     <Grid.ColumnDefinitions>
 +         <ColumnDefinition Width="*"/>
 +             <ColumnDefinition Width="Auto"/>
 +         </Grid.ColumnDefinitions>
 +         <TextBlock Grid.Column="0" Text="音を鳴らします" VerticalAlignment="Center" Margin="0,0,8,0"/>
 +         <ToggleButton Grid.Column="1" x:Name="playSound" Style="{StaticResource SlideSwitchStyle}" IsChecked="{Binding PlaySound}" VerticalAlignment="Center"/>
 +     </Grid>
 +</Grid>
 +</code>
 +
 +スタイルだけでできるので簡単といえば簡単ですが、この程度のウィジェットは今どきデフォルトで用意してほしいですよね？
 +
 +==== リソースファイルのコピー ====
 +
 +リソースファイルのコピーをするには、ソリューションエクスプローラから、リソースファイルを一個一個選んで、ビルド時にコピーする設定をいれるといいのですが、実はこの方法だと、リソースディレクトリに階層がある場合にはうまくいきません。
 +勝手に一階層に改変されてしまうのです。
 +
 +ハイハイスクールアドベンチャーの場合は、data/themes と data の下に themesのフォルダーがある二階層になっているのですが、これを勝手に、data と themesという二つの別々のフォルダーとしてビルドディレクトリにコピーしてしまいます。
 +
 +これを避けようと思ったら、プロジェクトファイル((.csproj))を直接いじって、下のような設定を入れることでディレクトリ構造丸ごとコピーしてくれるようになります。
 +
 +<code xml>
 +<ItemGroup>
 + <!-- data 以下のすべてのファイルを対象にする -->
 + <Content Include="data\**\*.*">
 + <!-- 出力先にコピーするルール -->
 + <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
 + <!-- フォルダ構造を保持する -->
 + <Link>data\%(RecursiveDir)%(Filename)%(Extension)</Link>
 + </Content>
 +</ItemGroup>
 +</code>
ハイハイスクールアドベンチャー_windows版.1758502712.txt.gz · 最終更新: by araki