├── SpawnDev.BlazorJS.PixiJS ├── _Imports.razor ├── icon-128.png ├── _publish.bat ├── Scene │ ├── Container │ │ ├── Bounds │ │ │ ├── Bounds.cs │ │ │ └── BoundsData.cs │ │ ├── Effect.cs │ │ ├── ViewContainer.cs │ │ └── Container.cs │ ├── Sprite │ │ ├── SpriteOptions.cs │ │ └── Sprite.cs │ ├── Graphics │ │ └── Shared │ │ │ ├── RoundedPoint.cs │ │ │ ├── IStrokeStyle.cs │ │ │ ├── Fill │ │ │ ├── FillPattern.cs │ │ │ ├── FillGradient.cs │ │ │ └── IFillStyle.cs │ │ │ ├── GraphicsPath.cs │ │ │ ├── StrokeAttributes.cs │ │ │ └── StrokeStyle.cs │ └── Text │ │ └── Text.cs ├── Rendering │ ├── RendererOptions.cs │ └── Renderers │ │ ├── Shared │ │ ├── System │ │ │ └── Utils │ │ │ │ └── ExtractRendererOptions.cs │ │ ├── Texture │ │ │ └── Texture.cs │ │ ├── SharedRendererOptions.cs │ │ └── View │ │ │ ├── View.cs │ │ │ └── IView.cs │ │ ├── GL │ │ └── WebGLOptions.cs │ │ ├── GpuPowerPreference.cs │ │ └── GPU │ │ └── WebGPUOptions.cs ├── Maths │ ├── Point │ │ ├── PointDataNet.cs │ │ ├── IPointData.cs │ │ ├── PointData.cs │ │ ├── Observer.cs │ │ ├── PointLike.cs │ │ ├── IPointLike.cs │ │ ├── Point.cs │ │ └── ObservablePoint.cs │ ├── Misc │ │ └── ISize.cs │ ├── Shapes │ │ └── Rectangle.cs │ └── Matrix │ │ └── Matrix.cs ├── Text │ ├── TextOptions.cs │ ├── AbstractText.cs │ ├── TextDropShadow.cs │ ├── TextStyleOptions.cs │ └── TextStyle.cs ├── Assets │ ├── AssetsBundle.cs │ ├── UnresolvedAsset.cs │ └── Assets.cs ├── PIXI.cs ├── System │ └── AbstractRenderer.cs ├── TextBitmap │ ├── AbstractBitmapFont.cs │ └── BitmapText.cs ├── Color │ ├── Color.cs │ └── ColorSource.cs ├── SpawnDev.BlazorJS.PixiJS.csproj ├── wwwroot │ └── math-extras.min.js ├── App │ ├── ApplicationOptions.cs │ └── Application.cs └── Ticker │ └── Ticker.cs ├── SpawnDev.BlazorJS.PixiJS.Demo ├── wwwroot │ ├── favicon.png │ ├── icon-192.png │ ├── index.html │ └── css │ │ └── app.css ├── Pages │ ├── Playground.razor.css │ ├── ExamplesHome.razor │ ├── Playground.razor │ ├── Examples │ │ ├── Text │ │ │ ├── BitmapTextExample.razor │ │ │ ├── BitmapTextExample2.razor │ │ │ ├── FromFontExample.razor │ │ │ └── PixiTextExample.razor │ │ ├── Basic │ │ │ ├── ContainerExample.razor │ │ │ └── BlendModesExample.razor │ │ └── Graphics │ │ │ └── SimpleExample.razor │ └── Playground.razor.cs ├── Layout │ ├── RadzenThemeContainer.razor │ ├── AppTray │ │ ├── AppTrayArea.razor │ │ ├── AppTrayIcon.cs │ │ ├── AppTrayArea.razor.cs │ │ ├── AppTrayArea.razor.css │ │ ├── AppTrayService.cs │ │ └── ThemeTrayIconService.cs │ ├── MainLayoutService.cs │ ├── MainLayout.razor.css │ ├── MainLayout.razor.cs │ ├── MainLayout.razor │ └── RadzenThemeContainer.razor.cs ├── App.razor ├── _Imports.razor ├── Program.cs ├── SpawnDev.BlazorJS.PixiJS.Demo.csproj └── Properties │ └── launchSettings.json ├── LICENSE.txt ├── SpawnDev.BlazorJS.PixiJS.sln ├── .github └── workflows │ └── main.yml ├── .gitattributes ├── README.md └── .gitignore /SpawnDev.BlazorJS.PixiJS/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components.Web 2 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/icon-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LostBeard/SpawnDev.BlazorJS.PixiJS/main/SpawnDev.BlazorJS.PixiJS/icon-128.png -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/wwwroot/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LostBeard/SpawnDev.BlazorJS.PixiJS/main/SpawnDev.BlazorJS.PixiJS.Demo/wwwroot/favicon.png -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/wwwroot/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LostBeard/SpawnDev.BlazorJS.PixiJS/main/SpawnDev.BlazorJS.PixiJS.Demo/wwwroot/icon-192.png -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/_publish.bat: -------------------------------------------------------------------------------- 1 | 2 | rmdir /Q /S "%~dp0bin\Publish\web" 3 | dotnet publish --nologo--configuration Release --output "%~dp0bin\Publish\web" 4 | pause 5 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Pages/Playground.razor.css: -------------------------------------------------------------------------------- 1 | ::deep .razor-editor { 2 | width: 100%; 3 | height: 100%; 4 | } 5 | .razor-editor { 6 | width: 100%; 7 | height: 100%; 8 | } 9 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Container/Bounds/Bounds.cs: -------------------------------------------------------------------------------- 1 | namespace SpawnDev.BlazorJS.PixiJS 2 | { 3 | public static partial class PIXI 4 | { 5 | public class Bounds 6 | { 7 | 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Rendering/RendererOptions.cs: -------------------------------------------------------------------------------- 1 | namespace SpawnDev.BlazorJS.PixiJS 2 | { 3 | public static partial class PIXI 4 | { 5 | public class RendererOptions 6 | { 7 | 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Container/Bounds/BoundsData.cs: -------------------------------------------------------------------------------- 1 | namespace SpawnDev.BlazorJS.PixiJS 2 | { 3 | public static partial class PIXI 4 | { 5 | public class BoundsData 6 | { 7 | 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Sprite/SpriteOptions.cs: -------------------------------------------------------------------------------- 1 | namespace SpawnDev.BlazorJS.PixiJS 2 | { 3 | public static partial class PIXI 4 | { 5 | public class SpriteOptions 6 | { 7 | 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Graphics/Shared/RoundedPoint.cs: -------------------------------------------------------------------------------- 1 | namespace SpawnDev.BlazorJS.PixiJS 2 | { 3 | public static partial class PIXI 4 | { 5 | public class RoundedPoint 6 | { 7 | 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Layout/RadzenThemeContainer.razor: -------------------------------------------------------------------------------- 1 | @inject ThemeService ThemeService 2 | @inject PersistentComponentState PersistentComponentState 3 | 4 | @if (wcag) 5 | { 6 | 7 | } 8 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Graphics/Shared/IStrokeStyle.cs: -------------------------------------------------------------------------------- 1 | namespace SpawnDev.BlazorJS.PixiJS 2 | { 3 | public static partial class PIXI 4 | { 5 | public interface IStrokeStyle : IFillStyle, StrokeAttributes 6 | { 7 | 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Rendering/Renderers/Shared/System/Utils/ExtractRendererOptions.cs: -------------------------------------------------------------------------------- 1 | namespace SpawnDev.BlazorJS.PixiJS 2 | { 3 | public static partial class PIXI 4 | { 5 | public class ExtractRendererOptions : RendererOptions 6 | { 7 | 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Graphics/Shared/Fill/FillPattern.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | public class FillPattern : JSObject 8 | { 9 | /// 10 | public FillPattern(IJSInProcessObjectReference _ref) : base(_ref) { } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Graphics/Shared/GraphicsPath.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | public class GraphicsPath : JSObject 8 | { 9 | 10 | /// 11 | public GraphicsPath(IJSInProcessObjectReference _ref) : base(_ref) { } 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Maths/Point/PointDataNet.cs: -------------------------------------------------------------------------------- 1 | namespace SpawnDev.BlazorJS.PixiJS 2 | { 3 | public static partial class PIXI 4 | { 5 | /// 6 | /// Implements IPointData. 7 | /// 8 | public class PointDataNet : IPointData 9 | { 10 | /// 11 | public float X { get; set; } 12 | /// 13 | public float Y { get; set; } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/App.razor: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Not found 8 | 9 |

Sorry, there's nothing at this address.

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Text/TextOptions.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | public class TextOptions 8 | { 9 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 10 | public string? Text { get; set; } 11 | 12 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 13 | public Union? Style { get; set; } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using System.Net.Http.Json 3 | @using Microsoft.AspNetCore.Components.Forms 4 | @using Microsoft.AspNetCore.Components.Routing 5 | @using Microsoft.AspNetCore.Components.Web 6 | @using Microsoft.AspNetCore.Components.Web.Virtualization 7 | @using Microsoft.AspNetCore.Components.WebAssembly.Http 8 | @using Microsoft.JSInterop 9 | @using SpawnDev.BlazorJS.PixiJS.Demo 10 | @using SpawnDev.BlazorJS.PixiJS.Demo.Layout 11 | @using SpawnDev.BlazorJS.PixiJS.Demo.Layout.AppTray 12 | @using Radzen 13 | @using Radzen.Blazor 14 | @using BlazorMonaco 15 | @using BlazorMonaco.Editor 16 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Container/Effect.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Text; 5 | using System.Threading.Tasks; 6 | 7 | namespace SpawnDev.BlazorJS.PixiJS 8 | { 9 | /// 10 | /// An effect that can be applied to a container. This is used to create effects such as filters/masks etc. 11 | /// 12 | public static partial class PIXI 13 | { 14 | public interface Effect 15 | { 16 | string Pipe { get; set; } 17 | float Priority { get; set; } 18 | void Destroy(); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Maths/Misc/ISize.cs: -------------------------------------------------------------------------------- 1 | namespace SpawnDev.BlazorJS.PixiJS.Maths.Misc 2 | { 3 | public static partial class PIXI 4 | { 5 | /// 6 | /// Defines a size with a width and a height.
7 | /// https://pixijs.download/release/docs/maths.Size.html 8 | /// 9 | public interface ISize 10 | { 11 | /// 12 | /// The width 13 | /// 14 | float Width { get; set; } 15 | /// 16 | /// The height 17 | /// 18 | float Height { get; set; } 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Layout/AppTray/AppTrayArea.razor: -------------------------------------------------------------------------------- 1 |
2 | @foreach (var trayIcon in TrayIconService.TrayIcons) 3 | { 4 | if (!trayIcon.Visible) continue; 5 | var style = $"{trayIcon.Style}"; 6 |
7 | 8 |
@trayIcon.TLText
9 |
10 | } 11 |
12 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Maths/Point/IPointData.cs: -------------------------------------------------------------------------------- 1 | namespace SpawnDev.BlazorJS.PixiJS 2 | { 3 | public static partial class PIXI 4 | { 5 | /// 6 | /// Common interface for points. Both Point and ObservablePoint implement it
7 | /// https://pixijs.download/release/docs/maths.PointData.html 8 | /// 9 | public interface IPointData 10 | { 11 | /// 12 | /// X coord 13 | /// 14 | float X { get; set; } 15 | /// 16 | /// Y coord 17 | /// 18 | float Y { get; set; } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Pages/ExamplesHome.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | @page "/examples" 3 | 4 |
5 |

Examples

6 | 7 |

8 | Welcome to the PixiJS Examples page! Here you can find a variety of demos and code snippets to help you get started with PixiJS. 9 |

10 | 11 |

Check out some of our featured examples below:

12 | 13 |
14 |
    15 |
  • Container
    • 16 |
  • Blend Modes
    • 17 |
  • Bitmap Text
    • 18 |
19 |
20 |
21 | 22 | @code { 23 | 24 | } 25 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Rendering/Renderers/Shared/Texture/Texture.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | public class Texture : JSObject 8 | { 9 | #region Constructors 10 | /// 11 | /// Deserialization constructor 12 | /// 13 | /// 14 | public Texture(IJSInProcessObjectReference _ref) : base(_ref) { } 15 | #endregion 16 | #region Properties 17 | 18 | #endregion 19 | #region Methods 20 | 21 | #endregion 22 | #region Events 23 | 24 | #endregion 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Layout/AppTray/AppTrayIcon.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components.Web; 2 | using Radzen; 3 | 4 | namespace SpawnDev.BlazorJS.PixiJS.Demo.Layout.AppTray 5 | { 6 | public class AppTrayIcon 7 | { 8 | public string TLText { get; set; } = ""; 9 | public string Title { get; set; } = ""; 10 | public string Style { get; set; } = ""; 11 | public string Icon { get; set; } = ""; 12 | public Action ClickCallback { get; set; } = new Action((args) => { }); 13 | public Action ContextCallback { get; set; } = new Action((args) => { }); 14 | public IconStyle? IconStyle { get; set; } 15 | public bool Visible { get; set; } = true; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Assets/AssetsBundle.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// Structure of a bundle found in a {@link assets.AssetsManifest Manifest} file 9 | /// 10 | public class AssetsBundle 11 | { 12 | /// 13 | /// The name of the bundle 14 | /// 15 | public string Name { get; set; } 16 | /// 17 | /// The assets in the bundle 18 | /// 19 | public Union, IEnumerable, UnresolvedAsset, string> Assets { get; set; } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Rendering/Renderers/GL/WebGLOptions.cs: -------------------------------------------------------------------------------- 1 | using SpawnDev.BlazorJS.JsonConverters; 2 | using System.Text.Json.Serialization; 3 | 4 | namespace SpawnDev.BlazorJS.PixiJS 5 | { 6 | public static partial class PIXI 7 | { 8 | /// 9 | /// Options for WebGLRenderer.
10 | /// https://pixijs.download/release/docs/rendering.WebGLOptions.html 11 | /// 12 | public class WebGLOptions : SharedRendererOptions 13 | { 14 | /// 15 | /// if true will use the back buffer where required 16 | /// 17 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 18 | public bool? UseBackBuffer { get; set; } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/PIXI.cs: -------------------------------------------------------------------------------- 1 | namespace SpawnDev.BlazorJS.PixiJS 2 | { 3 | // https://cdn.jsdelivr.net/npm/pixi.js@8.x/dist/pixi.min.js 4 | // https://cdn.jsdelivr.net/npm/pixijs@7.1.4/browser/index.min.js 5 | // https://cdn.jsdelivr.net/npm/pixijs/browser/index.min.js 6 | // https://pixijs.download/release/docs/index.html 7 | /// 8 | /// https://api.pixijs.io/@pixi/core/PIXI.html 9 | /// 10 | public static partial class PIXI 11 | { 12 | static BlazorJSRuntime JS => BlazorJSRuntime.JS; 13 | static Task? _Init = null; 14 | public static Task Init() 15 | { 16 | _Init ??= JS.LoadScript("_content/SpawnDev.BlazorJS.PixiJS/pixi.min.js", "PIXI"); 17 | return _Init; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Text/AbstractText.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// https://pixijs.download/release/docs/scene.AbstractText.html 9 | /// 10 | public class AbstractText : ViewContainer 11 | { 12 | /// 13 | public AbstractText(IJSInProcessObjectReference _ref) : base(_ref) { } 14 | /// 15 | /// The anchor sets the origin point of the text. The default is (0,0), this means the text's origin is the top left. 16 | /// 17 | public ObservablePoint Anchor { get => JSRef!.Get("anchor"); set => JSRef!.Set("anchor", value); } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Maths/Point/PointData.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// Common interface for points. Both Point and ObservablePoint implement it
9 | /// https://pixijs.download/release/docs/maths.PointData.html 10 | /// 11 | public class PointData : JSObject, IPointData 12 | { 13 | /// 14 | public PointData(IJSInProcessObjectReference _ref) : base(_ref) { } 15 | /// 16 | public float X { get => JSRef!.Get("x"); set => JSRef!.Set("x", value); } 17 | /// 18 | public float Y { get => JSRef!.Get("y"); set => JSRef!.Set("y", value); } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Layout/AppTray/AppTrayArea.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS.Demo.Layout.AppTray 4 | { 5 | public partial class AppTrayArea : IDisposable 6 | { 7 | [Inject] 8 | AppTrayService TrayIconService { get; set; } 9 | 10 | protected override void OnInitialized() 11 | { 12 | TrayIconService.OnStateHasChanged += TrayIconService_OnStateHasChanged; 13 | 14 | } 15 | protected override void OnAfterRender(bool firstRender) 16 | { 17 | 18 | } 19 | public void Dispose() 20 | { 21 | TrayIconService.OnStateHasChanged -= TrayIconService_OnStateHasChanged; 22 | } 23 | private void TrayIconService_OnStateHasChanged() 24 | { 25 | StateHasChanged(); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Layout/AppTray/AppTrayArea.razor.css: -------------------------------------------------------------------------------- 1 | 2 | .app-tray-area { 3 | border-radius: 0.5rem; 4 | border: 1px solid grey; 5 | display: flex; 6 | flex-direction: row; 7 | } 8 | 9 | .app-tray-icon { 10 | position: relative; 11 | height: 36px; 12 | min-width: 36px; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | cursor: pointer; 17 | margin: 0 0; 18 | } 19 | 20 | .app-tray-icon:hover { 21 | background-color: #ffffff12; 22 | } 23 | 24 | .app-tray-icon-tltext { 25 | top: 0; 26 | right: 0; 27 | min-width: 1.2rem; 28 | position: absolute; 29 | padding: 0 0.2px; 30 | background-color: #770000cc; 31 | border: 1px solid #808080; 32 | border-radius: 10px; 33 | text-align: center; 34 | } 35 | 36 | .app-tray-icon-tltext:empty { 37 | display: none; 38 | } 39 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/System/AbstractRenderer.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using System.Text; 6 | using System.Threading.Tasks; 7 | 8 | namespace SpawnDev.BlazorJS.PixiJS 9 | { 10 | public static partial class PIXI 11 | { 12 | public class AbstractRenderer : JSObject 13 | { 14 | #region Constructors 15 | /// 16 | /// Deserialization constructor 17 | /// 18 | /// 19 | public AbstractRenderer(IJSInProcessObjectReference _ref) : base(_ref) { } 20 | #endregion 21 | #region Properties 22 | 23 | #endregion 24 | #region Methods 25 | 26 | #endregion 27 | #region Events 28 | 29 | #endregion 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Rendering/Renderers/GpuPowerPreference.cs: -------------------------------------------------------------------------------- 1 | using SpawnDev.BlazorJS.JsonConverters; 2 | using System.Text.Json.Serialization; 3 | 4 | namespace SpawnDev.BlazorJS.PixiJS 5 | { 6 | public static partial class PIXI 7 | { 8 | /// 9 | /// Used in WebGPUOptions 10 | /// 11 | [JsonConverter(typeof(EnumStringConverterFactory))] 12 | public enum GpuPowerPreference 13 | { 14 | /// 15 | /// Will prioritize rendering performance over power consumption 16 | /// 17 | [JsonPropertyName("high-performance")] 18 | HighPerformance, 19 | /// 20 | /// Will prioritize power saving over rendering performance 21 | /// 22 | [JsonPropertyName("low-power")] 23 | LowPower, 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/TextBitmap/AbstractBitmapFont.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using System.Text; 6 | using System.Threading.Tasks; 7 | 8 | namespace SpawnDev.BlazorJS.PixiJS 9 | { 10 | public static partial class PIXI 11 | { 12 | public class AbstractBitmapFont : JSObject 13 | { 14 | #region Constructors 15 | /// 16 | /// Deserialization constructor 17 | /// 18 | /// 19 | public AbstractBitmapFont(IJSInProcessObjectReference _ref) : base(_ref) { } 20 | #endregion 21 | #region Properties 22 | 23 | #endregion 24 | #region Methods 25 | 26 | #endregion 27 | #region Events 28 | 29 | #endregion 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Assets/UnresolvedAsset.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// An asset that has not been resolved yet. 9 | /// 10 | public class UnresolvedAsset 11 | { 12 | /// 13 | /// Asset id 14 | /// 15 | public string Key { get; set; } 16 | /// 17 | /// The URL or relative path to the asset 18 | /// 19 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 20 | public string? Src { get; set; } 21 | /// 22 | /// Aliases associated with asset 23 | /// 24 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 25 | public Union, string>? Alias { get; set; } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Layout/AppTray/AppTrayService.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.ObjectModel; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS.Demo.Layout.AppTray 4 | { 5 | public class AppTrayService 6 | { 7 | List _TrayIcons { get; } = new List(); 8 | public IEnumerable TrayIcons => ReverseOrder ? _TrayIcons.AsReadOnly().Reverse() : _TrayIcons.AsReadOnly(); 9 | public event Action OnStateHasChanged; 10 | public bool ReverseOrder { get; set; } = true; 11 | public AppTrayService() 12 | { 13 | 14 | } 15 | public void Add(AppTrayIcon trayIcon) 16 | { 17 | _TrayIcons.Add(trayIcon); 18 | StateHasChanged(); 19 | } 20 | public void Remove(AppTrayIcon trayIcon) 21 | { 22 | _TrayIcons.Remove(trayIcon); 23 | StateHasChanged(); 24 | } 25 | public void StateHasChanged() 26 | { 27 | OnStateHasChanged?.Invoke(); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Layout/MainLayoutService.cs: -------------------------------------------------------------------------------- 1 | using System.Reflection; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS.Demo.Layout 4 | { 5 | public class MainLayoutService 6 | { 7 | public string DefaultTitle { get; set; } = Assembly.GetExecutingAssembly().GetName().Name!; 8 | public string Title 9 | { 10 | get => string.IsNullOrEmpty(_Title) ? DefaultTitle : _Title; 11 | set 12 | { 13 | if (_Title == value) return; 14 | _Title = value; 15 | OnTitleChanged?.Invoke(); 16 | } 17 | } 18 | string _Title { get; set; } = "SpawnDev.BlazorJS.PixiJS"; 19 | public delegate void AfterRender(MainLayout mainLayout, bool firstRender); 20 | public event AfterRender OnAfterRender; 21 | public event Action OnTitleChanged; 22 | public void TriggerOnAfterRender(MainLayout mainLayout, bool firstRender) 23 | { 24 | OnAfterRender?.Invoke(mainLayout, firstRender); 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Program.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components.Web; 2 | using Microsoft.AspNetCore.Components.WebAssembly.Hosting; 3 | using Radzen; 4 | using SpawnDev.BlazorJS; 5 | using SpawnDev.BlazorJS.CodeRunner; 6 | using SpawnDev.BlazorJS.PixiJS; 7 | using SpawnDev.BlazorJS.PixiJS.Demo; 8 | using SpawnDev.BlazorJS.PixiJS.Demo.Layout; 9 | using SpawnDev.BlazorJS.PixiJS.Demo.Layout.AppTray; 10 | 11 | var builder = WebAssemblyHostBuilder.CreateDefault(args); 12 | builder.Services.AddBlazorJSRuntime(out var JS); 13 | 14 | builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); 15 | 16 | if (JS.IsWindow) 17 | { 18 | await PIXI.Init(); 19 | builder.RootComponents.Add("#app"); 20 | builder.RootComponents.Add("head::after"); 21 | } 22 | 23 | builder.Services.AddRadzenComponents(); 24 | builder.Services.AddScoped(); 25 | builder.Services.AddScoped(); 26 | builder.Services.AddScoped(); 27 | 28 | builder.Services.AddCompilerService(); 29 | 30 | await builder.Build().BlazorJSRunAsync(); 31 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [year] [fullname] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Rendering/Renderers/Shared/SharedRendererOptions.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | // https://pixijs.download/release/docs/rendering.SharedRendererOptions.html 8 | public class SharedRendererOptions 9 | { 10 | 11 | /// 12 | /// Whether to enable anti-aliasing. This may affect performance. 13 | /// 14 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 15 | public bool? Antialias { get; set; } 16 | /// 17 | /// Resizes renderer view in CSS pixels to allow for resolutions other than 1. 18 | /// 19 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 20 | public bool? AutoDensity { get; set; } 21 | /// 22 | /// Alias for backgroundColor 23 | /// 24 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 25 | public string? Background { get; set; } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Color/Color.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | using SpawnDev.BlazorJS.JSObjects; 3 | 4 | namespace SpawnDev.BlazorJS.PixiJS 5 | { 6 | public static partial class PIXI 7 | { 8 | /// 9 | /// A view is something that is able to be rendered by the renderer. 10 | /// 11 | public class Color : JSObject 12 | { 13 | /// 14 | public Color(IJSInProcessObjectReference _ref) : base(_ref) { } 15 | /// 16 | /// Default Color object for static uses 17 | /// 18 | public static Color Shared => JS.Get("PIXI.Color.shared"); 19 | /// 20 | /// Set the color value 21 | /// 22 | /// 23 | /// 24 | public Color SetValue(ColorSource value) => JSRef!.Call("setValue", value); 25 | /// 26 | /// Returns the color as an integer 27 | /// 28 | /// 29 | public int ToNumber() => JSRef!.Call("toNumber"); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Rendering/Renderers/Shared/View/View.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// A view is something that is able to be rendered by the renderer. 9 | /// 10 | public class View : JSObject, IView 11 | { 12 | /// 13 | public View(IJSInProcessObjectReference _ref) : base(_ref) { } 14 | /// 15 | public long Uid => JSRef!.Get("uid"); 16 | /// 17 | public bool Batched { get => JSRef!.Get("batched"); set => JSRef!.Set("batched", value); } 18 | /// 19 | public string RenderPipeId => JSRef!.Get("renderPipeId"); 20 | /// 21 | public bool RoundPixels { get => JSRef!.Get("roundPixels"); set => JSRef!.Set("roundPixels", value); } 22 | /// 23 | public BoundsData Bounds { get => JSRef!.Get("bounds"); set => JSRef!.Set("bounds", value); } 24 | /// 25 | public bool ContainsPoint(Point point) => JSRef!.Call("containsPoint"); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Rendering/Renderers/GPU/WebGPUOptions.cs: -------------------------------------------------------------------------------- 1 | using SpawnDev.BlazorJS.JsonConverters; 2 | using System.Text.Json.Serialization; 3 | 4 | namespace SpawnDev.BlazorJS.PixiJS 5 | { 6 | public static partial class PIXI 7 | { 8 | /// 9 | /// Options for WebGPURenderer.
10 | /// https://pixijs.download/release/docs/rendering.WebGPUOptions.html 11 | /// 12 | public class WebGPUOptions : SharedRendererOptions 13 | { 14 | /// 15 | /// Force the use of the fallback adapter 16 | /// 17 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 18 | public bool? ForceFallbackAdapter { get; set; } 19 | /// 20 | /// An optional hint indicating what configuration of GPU is suitable for the WebGPU context, can be:
21 | /// 'high-performance' - will prioritize rendering performance over power consumption
22 | /// 'low-power' - will prioritize power saving over rendering performance
23 | /// 24 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 25 | public EnumString? PowerPreference{ get; set; } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Text/Text.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | using System; 3 | using System.Collections.Generic; 4 | using System.Linq; 5 | using System.Text; 6 | using System.Threading.Tasks; 7 | 8 | namespace SpawnDev.BlazorJS.PixiJS 9 | { 10 | public static partial class PIXI 11 | { 12 | public class Text : AbstractText, IView 13 | { 14 | /// 15 | public Text(IJSInProcessObjectReference _ref) : base(_ref) { } 16 | /// 17 | /// Creates a new instance 18 | /// 19 | /// 20 | /// 21 | public Text(string text, TextStyle style) : base(JS.New("PIXI.BitmapText", text, style)) { } 22 | /// 23 | /// Creates a new instance 24 | /// 25 | /// 26 | /// 27 | public Text(string text, TextStyleOptions style) : base(JS.New("PIXI.BitmapText", text, style)) { } 28 | /// 29 | /// Creates a new instance 30 | /// 31 | public Text(TextOptions textOptions) : base(JS.New("PIXI.BitmapText", textOptions)) { } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/SpawnDev.BlazorJS.PixiJS.Demo.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net8.0 5 | enable 6 | enable 7 | false 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet-tools/nuget/v3/index.json; 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Graphics/Shared/StrokeAttributes.cs: -------------------------------------------------------------------------------- 1 | namespace SpawnDev.BlazorJS.PixiJS 2 | { 3 | public static partial class PIXI 4 | { 5 | /// 6 | /// A stroke attribute object, used to define properties for a stroke. 7 | /// 8 | public interface StrokeAttributes 9 | { 10 | /// 11 | /// The width of the stroke. 12 | /// 13 | float? Width { get; set; } 14 | /// 15 | /// The alignment of the stroke. 16 | /// 17 | float? Alignment { get; set; } 18 | /// 19 | /// The line cap style to use.
20 | /// 'butt' | 'round' | 'square' 21 | /// 22 | string? Cap { get; set; } 23 | /// 24 | /// The line join style to use.
25 | /// 'round' | 'bevel' | 'miter' 26 | /// 27 | string? Join { get; set; } 28 | /// 29 | /// The miter limit to use. 30 | /// 31 | float? MiterLimit { get; set; } 32 | /// 33 | /// If the stroke is a pixel line. NOTE: this is only available for Graphic fills 34 | /// 35 | bool? PixelLine { get; set; } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/wwwroot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | SpawnDev.BlazorJS.PixiJS.Demo 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 |
22 |
23 | 24 |
25 | An unhandled error has occurred. 26 | Reload 27 | 🗙 28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Container/ViewContainer.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// A ViewContainer is a type of container that represents a view. This view can be a Sprite, a Graphics object, or any other object that can be rendered. This class is abstract and should not be used directly.
9 | /// https://pixijs.download/v8.7.1/docs/scene.ViewContainer.html 10 | /// 11 | public class ViewContainer : Container, IView 12 | { 13 | /// 14 | public ViewContainer(IJSInProcessObjectReference _ref) : base(_ref) { } 15 | /// 16 | public long Uid => JSRef!.Get("uid"); 17 | /// 18 | public bool Batched { get => JSRef!.Get("batched"); set => JSRef!.Set("batched", value); } 19 | /// 20 | public string RenderPipeId => JSRef!.Get("renderPipeId"); 21 | /// 22 | public bool RoundPixels { get => JSRef!.Get("roundPixels"); set => JSRef!.Set("roundPixels", value); } 23 | /// 24 | public BoundsData Bounds { get => JSRef!.Get("bounds"); set => JSRef!.Set("bounds", value); } 25 | /// 26 | public bool ContainsPoint(Point point) => JSRef!.Call("containsPoint"); 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Maths/Point/Observer.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// Observer used to listen for observable point changes.
9 | /// https://pixijs.download/release/docs/maths.Observer.html 10 | /// 11 | /// 12 | public class Observer : IDisposable 13 | { 14 | /// 15 | /// Callback to call when the point has updated. 16 | /// 17 | [JsonPropertyName("_onUpdate")] 18 | public ActionCallback OnUpdate { get; private set; } 19 | /// 20 | /// Create instance 21 | /// 22 | /// 23 | public Observer(Action callback) 24 | { 25 | OnUpdate = new ActionCallback(callback); 26 | } 27 | /// 28 | /// Create instance 29 | /// 30 | /// 31 | public Observer(ActionCallback callback) 32 | { 33 | OnUpdate = callback; 34 | } 35 | /// 36 | public void Dispose() 37 | { 38 | OnUpdate.Dispose(); 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json.schemastore.org/launchsettings.json", 3 | "iisSettings": { 4 | "windowsAuthentication": false, 5 | "anonymousAuthentication": true, 6 | "iisExpress": { 7 | "applicationUrl": "http://localhost:53155", 8 | "sslPort": 44371 9 | } 10 | }, 11 | "profiles": { 12 | "http": { 13 | "commandName": "Project", 14 | "dotnetRunMessages": true, 15 | "launchBrowser": true, 16 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 17 | "applicationUrl": "http://localhost:5101", 18 | "environmentVariables": { 19 | "ASPNETCORE_ENVIRONMENT": "Development" 20 | } 21 | }, 22 | "https": { 23 | "commandName": "Project", 24 | "dotnetRunMessages": true, 25 | "launchBrowser": true, 26 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 27 | "applicationUrl": "https://localhost:7000;http://localhost:5101", 28 | "environmentVariables": { 29 | "ASPNETCORE_ENVIRONMENT": "Development" 30 | } 31 | }, 32 | "IIS Express": { 33 | "commandName": "IISExpress", 34 | "launchBrowser": true, 35 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 36 | "environmentVariables": { 37 | "ASPNETCORE_ENVIRONMENT": "Development" 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Text/TextDropShadow.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// A drop shadow effect. 9 | /// 10 | public class TextDropShadow 11 | { 12 | /// 13 | /// Set alpha for the drop shadow 14 | /// 15 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 16 | public float? Alpha { get; set; } 17 | /// 18 | /// Set a angle of the drop shadow 19 | /// 20 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 21 | public float? Angle { get; set; } 22 | /// 23 | /// Set a shadow blur radius 24 | /// 25 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 26 | public float? Blur { get; set; } 27 | /// 28 | /// A fill style to be used on the e.g., 'red', '#00FF00' 29 | /// 30 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 31 | public ColorSource? Color { get; set; } 32 | /// 33 | /// Set a distance of the drop shadow 34 | /// 35 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 36 | public float? Distance { get; set; } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Maths/Point/PointLike.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// Common interface for points. Both Point and ObservablePoint implement it
9 | /// https://pixijs.download/release/docs/maths.PointLike.html 10 | /// 11 | public class PointLike : PointData, IPointLike 12 | { 13 | /// 14 | public PointLike(IJSInProcessObjectReference _ref) : base(_ref) { } 15 | /// 16 | public void Set(float x, float y) => JSRef!.CallVoid("set", x, y); 17 | /// 18 | public void Set(float xy) => JSRef!.CallVoid("set", xy); 19 | /// 20 | public void Set() => JSRef!.CallVoid("set"); 21 | /// 22 | public bool Equals(IPointData p) => JSRef!.Call("equals", p); 23 | /// 24 | public TPointLike CopyFrom(IPointLike p) where TPointLike : IPointLike => JSRef!.Call("copyFrom", p); 25 | /// 26 | public void CopyFrom(IPointLike p) => JSRef!.CallVoid("copyFrom", p); 27 | /// 28 | public TPointLike CopyTo(TPointLike p) where TPointLike : IPointLike => JSRef!.Call("copyTo", p); 29 | /// 30 | public void CopyTo(IPointLike p) => JSRef!.CallVoid("copyTo", p); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Maths/Shapes/Rectangle.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// The `Rectangle` object is an area defined by its position, as indicated by its top-left corner point(`x`, `y`) and by its `width` and its `height`.
9 | /// implements ShapePrimitive 10 | /// 11 | public class Rectangle : JSObject 12 | { 13 | /// 14 | /// Deserialization constructor 15 | /// 16 | /// 17 | public Rectangle(IJSInProcessObjectReference _ref) : base(_ref) { } 18 | /// 19 | /// Creates a new instance 20 | /// 21 | public Rectangle(float x, float y, float width, float height) : base(JS.New("PIXI.Rectangle", x, y, width, height)) { } 22 | /// 23 | /// Creates a new instance 24 | /// 25 | public Rectangle() : base(JS.New("PIXI.Rectangle")) { } 26 | #region Properties 27 | public float X { get => JSRef!.Get("x"); set => JSRef!.Set("x", value); } 28 | public float Y { get => JSRef!.Get("y"); set => JSRef!.Set("y", value); } 29 | public float Width { get => JSRef!.Get("width"); set => JSRef!.Set("width", value); } 30 | public float Height { get => JSRef!.Get("height"); set => JSRef!.Set("height", value); } 31 | #endregion 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Rendering/Renderers/Shared/View/IView.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// A view is something that is able to be rendered by the renderer. 9 | /// 10 | public interface IView 11 | { 12 | /// 13 | /// a unique id for this view 14 | /// 15 | long Uid { get; } 16 | /// 17 | /// whether or not this view should be batched 18 | /// 19 | bool Batched { get; set; } 20 | /// 21 | /// an identifier that is used to identify the type of system that will be used to render this renderable
22 | /// eg, 'sprite' will use the sprite system(based on the systems name 23 | /// 24 | string RenderPipeId { get; } 25 | /// 26 | /// Whether or not to round the x/y position of the object. 27 | /// 28 | bool RoundPixels { get; set; } 29 | /// 30 | /// this is the AABB rectangle bounds of the view in local untransformed space. 31 | /// 32 | BoundsData Bounds { get; set; } 33 | /// 34 | /// Checks if the point is within the view 35 | /// 36 | /// 37 | /// 38 | bool ContainsPoint(Point point); 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Layout/MainLayout.razor.css: -------------------------------------------------------------------------------- 1 | .page { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | main { 8 | flex: 1; 9 | } 10 | 11 | .sidebar { 12 | background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); 13 | } 14 | 15 | .top-row { 16 | background-color: #f7f7f7; 17 | border-bottom: 1px solid #d6d5d5; 18 | justify-content: flex-end; 19 | height: 3.5rem; 20 | display: flex; 21 | align-items: center; 22 | } 23 | 24 | .top-row ::deep a, .top-row ::deep .btn-link { 25 | white-space: nowrap; 26 | margin-left: 1.5rem; 27 | text-decoration: none; 28 | } 29 | 30 | .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { 31 | text-decoration: underline; 32 | } 33 | 34 | .top-row ::deep a:first-child { 35 | overflow: hidden; 36 | text-overflow: ellipsis; 37 | } 38 | 39 | @media (max-width: 640.98px) { 40 | .top-row { 41 | justify-content: space-between; 42 | } 43 | 44 | .top-row ::deep a, .top-row ::deep .btn-link { 45 | margin-left: 0; 46 | } 47 | } 48 | 49 | @media (min-width: 641px) { 50 | .page { 51 | flex-direction: row; 52 | } 53 | 54 | .sidebar { 55 | width: 250px; 56 | height: 100vh; 57 | position: sticky; 58 | top: 0; 59 | } 60 | 61 | .top-row { 62 | position: sticky; 63 | top: 0; 64 | z-index: 1; 65 | } 66 | 67 | .top-row.auth ::deep a:first-child { 68 | flex: 1; 69 | text-align: right; 70 | width: 0; 71 | } 72 | 73 | .top-row, article { 74 | padding-left: 2rem !important; 75 | padding-right: 1.5rem !important; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Pages/Playground.razor: -------------------------------------------------------------------------------- 1 | @page "/playground" 2 | 3 |
4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | @if (CompiledType != null) 21 | { 22 | 23 | } 24 | else if (_busy && CompileLog.Count == 0) 25 | { 26 | Compiling... 27 | } 28 | else if (CompileLog.Count > 0) 29 | { 30 | 
31 |                     @string.Join("\r\n", CompileLog)
32 |
33 | } 34 | else 35 | { 36 | Click to Run 37 | } 38 | 39 | 40 |
41 | 42 | @code { 43 | 44 | } 45 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.sln: -------------------------------------------------------------------------------- 1 | 2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 17 4 | VisualStudioVersion = 17.11.35103.136 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SpawnDev.BlazorJS.PixiJS", "SpawnDev.BlazorJS.PixiJS\SpawnDev.BlazorJS.PixiJS.csproj", "{CC46A3DB-7968-4A0E-B116-D9AA32ECF390}" 7 | EndProject 8 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SpawnDev.BlazorJS.PixiJS.Demo", "SpawnDev.BlazorJS.PixiJS.Demo\SpawnDev.BlazorJS.PixiJS.Demo.csproj", "{7138F6E5-E30B-4454-991C-9011E74BC294}" 9 | EndProject 10 | Global 11 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 12 | Debug|Any CPU = Debug|Any CPU 13 | Release|Any CPU = Release|Any CPU 14 | EndGlobalSection 15 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 16 | {CC46A3DB-7968-4A0E-B116-D9AA32ECF390}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 17 | {CC46A3DB-7968-4A0E-B116-D9AA32ECF390}.Debug|Any CPU.Build.0 = Debug|Any CPU 18 | {CC46A3DB-7968-4A0E-B116-D9AA32ECF390}.Release|Any CPU.ActiveCfg = Release|Any CPU 19 | {CC46A3DB-7968-4A0E-B116-D9AA32ECF390}.Release|Any CPU.Build.0 = Release|Any CPU 20 | {7138F6E5-E30B-4454-991C-9011E74BC294}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 21 | {7138F6E5-E30B-4454-991C-9011E74BC294}.Debug|Any CPU.Build.0 = Debug|Any CPU 22 | {7138F6E5-E30B-4454-991C-9011E74BC294}.Release|Any CPU.ActiveCfg = Release|Any CPU 23 | {7138F6E5-E30B-4454-991C-9011E74BC294}.Release|Any CPU.Build.0 = Release|Any CPU 24 | EndGlobalSection 25 | GlobalSection(SolutionProperties) = preSolution 26 | HideSolutionNode = FALSE 27 | EndGlobalSection 28 | GlobalSection(ExtensibilityGlobals) = postSolution 29 | SolutionGuid = {E04B364F-224D-4CE8-AF60-6C94645538BF} 30 | EndGlobalSection 31 | EndGlobal 32 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | # Run workflow on every push to the master branch 4 | on: workflow_dispatch 5 | 6 | jobs: 7 | deploy-to-github-pages: 8 | permissions: 9 | contents: write 10 | # use ubuntu-latest image to run steps on 11 | runs-on: ubuntu-latest 12 | steps: 13 | # uses GitHub's checkout action to checkout code form the master branch 14 | - uses: actions/checkout@v2 15 | 16 | # sets up .NET Core SDK 17 | - name: Setup .NET Core SDK 18 | uses: actions/setup-dotnet@v3.0.3 19 | with: 20 | dotnet-version: 8 21 | 22 | # Install dotnet wasm buildtools workload 23 | - name: Install .NET WASM Build Tools 24 | run: dotnet workload install wasm-tools 25 | 26 | # publishes Blazor project to the publish-folder 27 | - name: Publish .NET Core Project 28 | run: dotnet publish ./SpawnDev.BlazorJS.PixiJS.Demo/ --nologo -c:Release --output publish 29 | 30 | # changes the base-tag in index.html from '/' to '/SpawnDev.BlazorJS.PixiJS/' to match GitHub Pages repository subdirectory 31 | - name: Change base-tag in index.html from / to /SpawnDev.BlazorJS.PixiJS/ 32 | run: sed -i 's/ 11 |

12 | Source: Bitmap Text Example 13 |

14 |
15 | 16 | @code { 17 | [Inject] 18 | BlazorJSRuntime JS { get; set; } 19 | ElementReference containerElRef; 20 | Application? app = null; 21 | protected override async Task OnAfterRenderAsync(bool firstRender) 22 | { 23 | if (firstRender) 24 | { 25 | await Init(); 26 | } 27 | } 28 | async Task Init() 29 | { 30 | using var document = JS.GetDocument(); 31 | 32 | // Create a new application 33 | app = new Application(); 34 | 35 | // Initialize the application 36 | await app.Init(new ApplicationOptions { Background = "#1099bb", ResizeTo = containerElRef }); 37 | 38 | // Append the application canvas to the document body 39 | using var htmlElement = new HTMLElement(containerElRef); 40 | htmlElement!.AppendChild(app.Canvas); 41 | 42 | await Assets.Load("https://pixijs.com/assets/bitmap-font/desyrel.xml"); 43 | 44 | var bitmapFontText = new BitmapText(new TextOptions 45 | { 46 | Text = "bitmap fonts are supported!\nWoo yay!", 47 | Style = new PIXI.TextStyleOptions 48 | { 49 | FontFamily = "Desyrel", 50 | FontSize = 55, 51 | Align = "left", 52 | }, 53 | }); 54 | 55 | bitmapFontText.X = 50; 56 | bitmapFontText.Y = 200; 57 | 58 | app.Stage!.AddChild(bitmapFontText); 59 | } 60 | public void Dispose() 61 | { 62 | if (app != null) 63 | { 64 | app.Dispose(); 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/SpawnDev.BlazorJS.PixiJS.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net8.0;net7.0;net6.0 5 | enable 6 | enable 7 | 1.0.0-preview.1 8 | True 9 | true 10 | true 11 | Embedded 12 | SpawnDev.BlazorJS.PixiJS 13 | LostBeard 14 | PixiJS Creation Engine. A beautiful, fast, and flexible 2D WebGL renderer for Blazor WebAssembly. 15 | https://github.com/LostBeard/SpawnDev.BlazorJS.PixiJS 16 | README.md 17 | LICENSE.txt 18 | icon-128.png 19 | https://github.com/LostBeard/SpawnDev.BlazorJS.PixiJS.git 20 | git 21 | Blazor;BlazorWebAssembly;PixiJS;WebGL;WebGPU;Graphics 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Maths/Matrix/Matrix.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | using SpawnDev.BlazorJS.JSObjects; 3 | 4 | namespace SpawnDev.BlazorJS.PixiJS 5 | { 6 | public static partial class PIXI 7 | { 8 | /// 9 | /// A fast matrix for 2D transformations.
10 | /// https://pixijs.download/v8.7.1/docs/maths.Matrix.html 11 | /// 12 | public class Matrix : JSObject 13 | { 14 | /// 15 | public Matrix(IJSInProcessObjectReference _ref) : base(_ref) { } 16 | /// 17 | /// Create new instance 18 | /// 19 | /// x scale 20 | /// y skew 21 | /// x skew 22 | /// y scale 23 | /// x translation 24 | /// y translation 25 | public Matrix(float a = 1, float b = 0, float c = 0, float d = 1, float tx = 0, float ty = 0) : base(JS.New("PIXI.Matrix", a, b, c, d, tx, ty)) { } 26 | /// 27 | /// A default (identity) matrix.
28 | /// This is a shared object, if you want to modify it consider creating a new Matrix 29 | /// 30 | public static Matrix IDENTITY => JS.Get("PIXI.Matrix.IDENTITY"); 31 | public float A { get => JSRef!.Get("a"); set => JSRef!.Set("a", value); } 32 | public float B { get => JSRef!.Get("b"); set => JSRef!.Set("b", value); } 33 | public float C { get => JSRef!.Get("c"); set => JSRef!.Set("c", value); } 34 | public float D { get => JSRef!.Get("d"); set => JSRef!.Set("d", value); } 35 | public float TX { get => JSRef!.Get("tx"); set => JSRef!.Set("tx", value); } 36 | public float TY { get => JSRef!.Get("ty"); set => JSRef!.Set("ty", value); } 37 | /// 38 | /// An array of the current matrix. Only populated when toArray is called 39 | /// 40 | public Float32Array? Array => JSRef!.Get("array"); 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Graphics/Shared/Fill/FillGradient.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | using SpawnDev.BlazorJS.JSObjects; 3 | using System.Xml.Linq; 4 | 5 | namespace SpawnDev.BlazorJS.PixiJS 6 | { 7 | public static partial class PIXI 8 | { 9 | public class TextureSpace 10 | { 11 | 12 | } 13 | public class GradientOptions 14 | { 15 | 16 | 17 | } 18 | public class RadialGradientOptions 19 | { 20 | 21 | 22 | } 23 | public class LinearGradientOptions 24 | { 25 | 26 | 27 | } 28 | public class FillGradient : CanvasGradient 29 | { 30 | /// 31 | public FillGradient(IJSInProcessObjectReference _ref) : base(_ref) { } 32 | /// 33 | /// Creates a new instance 34 | /// 35 | public FillGradient(RadialGradientOptions options) : base(JS.New("PIXI.FillGradient", options)) { } 36 | /// 37 | /// Creates a new instance 38 | /// 39 | public FillGradient(LinearGradientOptions options) : base(JS.New("PIXI.FillGradient", options)) { } 40 | /// 41 | /// Creates a new instance 42 | /// 43 | public FillGradient(float x0, float y0, float x1, float y1, TextureSpace textureSpace, float textureSize) : base(JS.New("PIXI.FillGradient", x0, y0, x1, y1, textureSpace, textureSize)) { } 44 | /// 45 | /// Creates a new instance 46 | /// 47 | public FillGradient(float x0, float y0, float x1, float y1, TextureSpace textureSpace) : base(JS.New("PIXI.FillGradient", x0, y0, x1, y1, textureSpace)) { } 48 | /// 49 | /// Creates a new instance 50 | /// 51 | public FillGradient(float x0, float y0, float x1, float y1) : base(JS.New("PIXI.FillGradient", x0, y0, x1, y1)) { } 52 | 53 | /// 54 | /// Adds a color stop to the gradient 55 | /// 56 | public void AddColorStop(float offset, ColorSource color) => JSRef!.CallVoid("addColorStop", offset, color); 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Graphics/Shared/StrokeStyle.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// A stroke style object. 9 | /// 10 | public class StrokeStyle : IStrokeStyle 11 | { 12 | /// 13 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 14 | public ColorSource? Color { get; set; } 15 | /// 16 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 17 | public float? Alpha { get; set; } 18 | /// 19 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 20 | public Texture? Texture { get; set; } 21 | /// 22 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 23 | public Matrix? Matrix { get; set; } 24 | /// 25 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 26 | public Union? Fill { get; set; } 27 | /// 28 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 29 | public TextureSpace? TextureSpace { get; set; } 30 | /// 31 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 32 | public float? Width { get; set; } 33 | /// 34 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 35 | public float? Alignment { get; set; } 36 | /// 37 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 38 | public string? Cap { get; set; } 39 | /// 40 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 41 | public string? Join { get; set; } 42 | /// 43 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 44 | public float? MiterLimit { get; set; } 45 | /// 46 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 47 | public bool? PixelLine { get; set; } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Graphics/Shared/Fill/IFillStyle.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | using System.Text.Json.Serialization; 3 | 4 | namespace SpawnDev.BlazorJS.PixiJS 5 | { 6 | public static partial class PIXI 7 | { 8 | /// 9 | /// A fill style object. 10 | /// 11 | public interface IFillStyle 12 | { 13 | /// 14 | /// The color to use for the fill. 15 | /// 16 | ColorSource? Color { get; set; } 17 | /// 18 | /// The alpha value to use for the fill. 19 | /// 20 | float? Alpha { get; set; } 21 | /// 22 | /// The texture to use for the fill. 23 | /// 24 | Texture? Texture { get; set; } 25 | /// 26 | /// The matrix to apply. 27 | /// 28 | Matrix? Matrix{ get; set; } 29 | /// 30 | /// The fill pattern to use. 31 | /// 32 | Union? Fill { get; set; } 33 | /// 34 | /// The fill units to use. 35 | /// 36 | TextureSpace? TextureSpace { get; set; } 37 | } 38 | /// 39 | /// A stroke style object. 40 | /// 41 | public class FillStyle : IFillStyle 42 | { 43 | /// 44 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 45 | public ColorSource? Color { get; set; } 46 | /// 47 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 48 | public float? Alpha { get; set; } 49 | /// 50 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 51 | public Texture? Texture { get; set; } 52 | /// 53 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 54 | public Matrix? Matrix { get; set; } 55 | /// 56 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 57 | public Union? Fill { get; set; } 58 | /// 59 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 60 | public TextureSpace? TextureSpace { get; set; } 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/wwwroot/math-extras.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * PixiJS - v8.6.6 3 | * Compiled Wed, 18 Dec 2024 12:46:36 UTC 4 | * 5 | * PixiJS is licensed under the MIT License. 6 | * http://www.opensource.org/licenses/mit-license 7 | */this.PIXI=this.PIXI||{};var math_extras_js=function(x){"use strict";"use strict";const s={add(t,i){return i||(i=new PIXI.Point),i.x=this.x+t.x,i.y=this.y+t.y,i},subtract(t,i){return i||(i=new PIXI.Point),i.x=this.x-t.x,i.y=this.y-t.y,i},multiply(t,i){return i||(i=new PIXI.Point),i.x=this.x*t.x,i.y=this.y*t.y,i},multiplyScalar(t,i){return i||(i=new PIXI.Point),i.x=this.x*t,i.y=this.y*t,i},dot(t){return this.x*t.x+this.y*t.y},cross(t){return this.x*t.y-this.y*t.x},normalize(t){t||(t=new PIXI.Point);const i=Math.sqrt(this.x*this.x+this.y*this.y);return t.x=this.x/i,t.y=this.y/i,t},magnitude(){return Math.sqrt(this.x*this.x+this.y*this.y)},magnitudeSquared(){return this.x*this.x+this.y*this.y},project(t,i){i||(i=new PIXI.Point);const h=(this.x*t.x+this.y*t.y)/(t.x*t.x+t.y*t.y);return i.x=t.x*h,i.y=t.y*h,i},reflect(t,i){i||(i=new PIXI.Point);const h=this.x*t.x+this.y*t.y;return i.x=this.x-2*h*t.x,i.y=this.y-2*h*t.y,i}},g={containsRect(t){return t.width<=0||t.height<=0?t.x>this.x&&t.y>this.y&&t.right=this.x&&t.y>=this.y&&t.right<=this.right&&t.bottom<=this.bottom},equals(t){return t===this?!0:t&&this.x===t.x&&this.y===t.y&&this.width===t.width&&this.height===t.height},intersection(t,i){i||(i=new PIXI.Rectangle);const h=this.xt.right?t.right:this.right;if(r<=h)return i.x=i.y=i.width=i.height=0,i;const e=this.yt.bottom?t.bottom:this.bottom;return n<=e?(i.x=i.y=i.width=i.height=0,i):(i.x=h,i.y=e,i.width=r-h,i.height=n-e,i)},union(t,i){i||(i=new PIXI.Rectangle);const h=Math.min(this.x,t.x),r=Math.max(this.x+this.width,t.x+t.width),e=Math.min(this.y,t.y),n=Math.max(this.y+this.height,t.y+t.height);return i.x=h,i.y=e,i.width=r-h,i.height=n-e,i}};Object.assign(PIXI.Point.prototype,s),Object.assign(PIXI.ObservablePoint.prototype,s),Object.assign(PIXI.Rectangle.prototype,g);function P(t,i,h=Number.EPSILON){return t===i?!0:Math.abs(t-i)1||I<0||I>1)?(n.x=NaN,n.y=NaN,n):(n.x=t.x+c*y,n.y=h.y+I*o,n)}function b(t,i,h,r,e){return m(t,i,h,r,!0,e)}function X(t,i,h,r,e){return m(t,i,h,r,!1,e)}return x.floatEqual=P,x.lineIntersection=b,x.pointExtraMixins=s,x.rectangleExtraMixins=g,x.segmentIntersection=X,x}({});Object.assign(this.PIXI,math_extras_js); 8 | //# sourceMappingURL=math-extras.min.js.map 9 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | ############################################################################### 2 | # Set default behavior to automatically normalize line endings. 3 | ############################################################################### 4 | * text=auto 5 | 6 | ############################################################################### 7 | # Set default behavior for command prompt diff. 8 | # 9 | # This is need for earlier builds of msysgit that does not have it on by 10 | # default for csharp files. 11 | # Note: This is only used by command line 12 | ############################################################################### 13 | #*.cs diff=csharp 14 | 15 | ############################################################################### 16 | # Set the merge driver for project and solution files 17 | # 18 | # Merging from the command prompt will add diff markers to the files if there 19 | # are conflicts (Merging from VS is not affected by the settings below, in VS 20 | # the diff markers are never inserted). Diff markers may cause the following 21 | # file extensions to fail to load in VS. An alternative would be to treat 22 | # these files as binary and thus will always conflict and require user 23 | # intervention with every merge. To do so, just uncomment the entries below 24 | ############################################################################### 25 | #*.sln merge=binary 26 | #*.csproj merge=binary 27 | #*.vbproj merge=binary 28 | #*.vcxproj merge=binary 29 | #*.vcproj merge=binary 30 | #*.dbproj merge=binary 31 | #*.fsproj merge=binary 32 | #*.lsproj merge=binary 33 | #*.wixproj merge=binary 34 | #*.modelproj merge=binary 35 | #*.sqlproj merge=binary 36 | #*.wwaproj merge=binary 37 | 38 | ############################################################################### 39 | # behavior for image files 40 | # 41 | # image files are treated as binary by default. 42 | ############################################################################### 43 | #*.jpg binary 44 | #*.png binary 45 | #*.gif binary 46 | 47 | ############################################################################### 48 | # diff behavior for common document formats 49 | # 50 | # Convert binary document formats to text before diffing them. This feature 51 | # is only available from the command line. Turn it on by uncommenting the 52 | # entries below. 53 | ############################################################################### 54 | #*.doc diff=astextplain 55 | #*.DOC diff=astextplain 56 | #*.docx diff=astextplain 57 | #*.DOCX diff=astextplain 58 | #*.dot diff=astextplain 59 | #*.DOT diff=astextplain 60 | #*.pdf diff=astextplain 61 | #*.PDF diff=astextplain 62 | #*.rtf diff=astextplain 63 | #*.RTF diff=astextplain 64 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Pages/Examples/Text/BitmapTextExample2.razor: -------------------------------------------------------------------------------- 1 | @page "/examples/basic/bitmap-text2" 2 | 3 | @using SpawnDev.BlazorJS 4 | @using SpawnDev.BlazorJS.JSObjects 5 | @using static SpawnDev.BlazorJS.PixiJS.PIXI 6 | @using SpawnDev.BlazorJS.PixiJS 7 | @using SpawnDev.BlazorJS.JsonConverters 8 | @implements IDisposable 9 | 10 |
11 | 12 |
13 |
14 | @code { 15 | [Inject] 16 | BlazorJSRuntime JS { get; set; } 17 | ElementReference? containerElRef = null; 18 | Application? app = null; 19 | Container? container = null; 20 | protected override async Task OnAfterRenderAsync(bool firstRender) 21 | { 22 | if (firstRender) 23 | { 24 | await Init(); 25 | } 26 | } 27 | async Task Init() 28 | { 29 | using var document = JS.GetDocument(); 30 | 31 | // Create a new application 32 | app = new Application(); 33 | 34 | // Initialize the application 35 | await app.Init(new ApplicationOptions { Background = "#1099bb", ResizeTo = containerElRef }); 36 | 37 | // Append the application canvas to the document body 38 | using var htmlElement = new HTMLElement(containerElRef!.Value); 39 | htmlElement!.AppendChild(app.Canvas); 40 | 41 | // Create and add a container to the stage 42 | container = new Container(); 43 | using var stage = app.Stage; 44 | stage!.AddChild(container); 45 | 46 | // Create and add text to the container 47 | var textStyle = new PIXI.TextStyleOptions 48 | { 49 | FontFamily = "Arial", 50 | FontSize = 16, 51 | Fill = "#ddd" 52 | }; 53 | var displayText = new BitmapText("Hello, PixiJS!", textStyle); 54 | 55 | displayText.X = 100; 56 | displayText.Y = 100; 57 | displayText.Anchor.Set(0.5f); 58 | 59 | container.AddChild(displayText); 60 | 61 | // Move the container to the center 62 | container.X = app.Screen.Width / 2; 63 | container.Y = app.Screen.Height / 2; 64 | 65 | // Center the text in local container coordinates 66 | container.Pivot.X = container.Width / 2; 67 | container.Pivot.Y = container.Height / 2; 68 | 69 | // Listen for animate update 70 | using var ticker = app.Ticker; 71 | ticker.Add(Tick); 72 | } 73 | void Tick(Ticker time) 74 | { 75 | // Continuously rotate the container! 76 | // * use delta to create frame-independent transform * 77 | container!.Rotation -= 0.01f * time.DeltaTime; 78 | } 79 | public void Dispose() 80 | { 81 | if (app != null) 82 | { 83 | using var ticker = app.Ticker; 84 | ticker.Remove(Tick); 85 | app.Dispose(); 86 | } 87 | container?.Dispose(); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Color/ColorSource.cs: -------------------------------------------------------------------------------- 1 | using SpawnDev.BlazorJS.JSObjects; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// Color source 9 | /// 10 | public class ColorSource : Union 11 | { 12 | public static implicit operator ColorSource(int? instance) => instance == null ? null : new ColorSource(instance.Value); 13 | public static implicit operator ColorSource(int instance) => instance == null ? null : new ColorSource(instance); 14 | public static implicit operator ColorSource(string instance) => instance == null ? null : new ColorSource(instance); 15 | public static implicit operator ColorSource(float instance) => instance == null ? null : new ColorSource(instance); 16 | public static implicit operator ColorSource(float[] instance) => instance == null ? null : new ColorSource(instance); 17 | public static implicit operator ColorSource(byte[] instance) => instance == null ? null : new ColorSource(instance); 18 | public static implicit operator string(ColorSource instance) => instance == null ? null : instance.Value as string; 19 | public static implicit operator float?(ColorSource instance) => instance == null || !(instance.Value is float) ? null : (float)instance.Value; 20 | public static implicit operator float[](ColorSource instance) => instance == null ? null : instance.Value as float[]; 21 | public static implicit operator byte[](ColorSource instance) => instance == null ? null : instance.Value as byte[]; 22 | public static implicit operator int?(ColorSource instance) => instance == null ? null : instance.Value as int?; 23 | 24 | /// 25 | /// Creates a new instance 26 | /// 27 | /// 28 | public ColorSource(string color) : base(color) { } 29 | /// 30 | /// Creates a new instance 31 | /// 32 | /// 33 | public ColorSource(int color) : base(color) { } 34 | /// 35 | /// Creates a new instance 36 | /// 37 | /// 38 | public ColorSource(float color) : base(color) { } 39 | /// 40 | /// Creates a new instance 41 | /// 42 | /// 43 | public ColorSource(float[] color) : base(color) { } 44 | /// 45 | /// Creates a new instance 46 | /// 47 | /// 48 | public ColorSource(byte[] color) : base(color) { } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Maths/Point/IPointLike.cs: -------------------------------------------------------------------------------- 1 | namespace SpawnDev.BlazorJS.PixiJS 2 | { 3 | public static partial class PIXI 4 | { 5 | /// 6 | /// Common interface for points. Both Point and ObservablePoint implement it
7 | /// https://pixijs.download/release/docs/maths.PointLike.html 8 | /// 9 | public interface IPointLike : IPointData 10 | { 11 | /// 12 | /// Copies x and y from the given point 13 | /// 14 | /// The point to copy from 15 | /// Returns itself. 16 | TPointLike CopyFrom(IPointLike p) where TPointLike : IPointLike; 17 | /// 18 | /// Copies x and y from the given point 19 | /// 20 | /// The point to copy from 21 | void CopyFrom(IPointLike p); 22 | /// 23 | /// Copies x and y into the given point 24 | /// 25 | /// The point to copy. 26 | /// Given point with values updated 27 | TPointLike CopyTo(TPointLike p) where TPointLike : IPointLike; 28 | /// 29 | /// Copies x and y into the given point 30 | /// 31 | /// The point to copy. 32 | void CopyTo(IPointLike p); 33 | /// 34 | /// Returns true if the given point is equal to this point 35 | /// 36 | /// The point to check 37 | /// Whether the given point equal to this point 38 | bool Equals(IPointData p); 39 | /// 40 | /// Sets the point to a new x and y position. If y is omitted, both x and y will be set to x.
41 | /// If x is also omitted both values will be set to 0. 42 | /// 43 | /// position of the point on the x axis 44 | /// position of the point on the y axis 45 | void Set(float x, float y); 46 | /// 47 | /// Sets the point to a new x and y position. If y is omitted, both x and y will be set to x.
48 | /// If x is also omitted both values will be set to 0. 49 | /// 50 | /// position of the point on the x axis 51 | void Set(float x); 52 | /// 53 | /// Sets the point to a new x and y position. If y is omitted, both x and y will be set to x.
54 | /// If x is also omitted both values will be set to 0. 55 | /// 56 | void Set(); 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Pages/Examples/Basic/ContainerExample.razor: -------------------------------------------------------------------------------- 1 | @page "/examples/basic/container" 2 | 3 | @using SpawnDev.BlazorJS.JSObjects 4 | @using static SpawnDev.BlazorJS.PixiJS.PIXI 5 | @using SpawnDev.BlazorJS.JsonConverters 6 | @implements IDisposable 7 | 8 |
9 |

10 | Source: Basic Container Example 11 |

12 |
13 |
14 | @code { 15 | [Inject] 16 | BlazorJSRuntime JS { get; set; } 17 | ElementReference? containerElRef = null; 18 | Application? app = null; 19 | Container? container = null; 20 | protected override async Task OnAfterRenderAsync(bool firstRender) 21 | { 22 | if (firstRender) 23 | { 24 | await Init(); 25 | } 26 | } 27 | async Task Init() 28 | { 29 | using var document = JS.GetDocument(); 30 | 31 | // Create a new application 32 | app = new Application(); 33 | 34 | // Initialize the application 35 | await app.Init(new ApplicationOptions { Background = "#1099bb", ResizeTo = containerElRef }); 36 | 37 | // Append the application canvas to the document body 38 | using var htmlElement = new HTMLElement(containerElRef!.Value); 39 | htmlElement!.AppendChild(app.Canvas); 40 | 41 | // Create and add a container to the stage 42 | container = new Container(); 43 | using var stage = app.Stage; 44 | stage!.AddChild(container); 45 | 46 | // Load the bunny texture 47 | using var texture = await Assets.Load("https://pixijs.com/assets/bunny.png"); 48 | 49 | // Create a 5x5 grid of bunnies in the container 50 | for (var i = 0; i < 25; i++) 51 | { 52 | using var bunny = new Sprite(texture); 53 | 54 | bunny.X = (i % 5f) * 40f; 55 | bunny.Y = (float)Math.Floor(i / 5f) * 40f; 56 | container.AddChild(bunny); 57 | } 58 | 59 | // Move the container to the center 60 | container.X = app.Screen.Width / 2; 61 | container.Y = app.Screen.Height / 2; 62 | 63 | // Center the bunny sprites in local container coordinates 64 | container.Pivot.X = container.Width / 2; 65 | container.Pivot.Y = container.Height / 2; 66 | 67 | // Listen for animate update 68 | using var ticker = app.Ticker; 69 | ticker.Add(Tick); 70 | } 71 | void Tick(Ticker time) 72 | { 73 | // Continuously rotate the container! 74 | // * use delta to create frame-independent transform * 75 | container!.Rotation -= 0.01f * time.DeltaTime; 76 | } 77 | public void Dispose() 78 | { 79 | if (app != null) 80 | { 81 | using var ticker = app.Ticker; 82 | ticker.Remove(Tick); 83 | app.Dispose(); 84 | } 85 | container?.Dispose(); 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Layout/MainLayout.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using Radzen; 3 | using SpawnDev.BlazorJS.PixiJS.Demo.Layout.AppTray; 4 | 5 | namespace SpawnDev.BlazorJS.PixiJS.Demo.Layout 6 | { 7 | public partial class MainLayout 8 | { 9 | [Inject] 10 | BlazorJSRuntime JS { get; set; } 11 | [Inject] 12 | NotificationService NotificationService { get; set; } 13 | [Inject] 14 | DialogService DialogService { get; set; } 15 | [Inject] 16 | AppTrayService TrayIconService { get; set; } 17 | [Inject] 18 | protected NavigationManager NavigationManager { get; set; } 19 | [Inject] 20 | MainLayoutService MainLayoutService { get; set; } 21 | [Inject] 22 | ThemeService ThemeService { get; set; } 23 | 24 | string Title => MainLayoutService.Title; 25 | bool leftSidebarExpanded = false; 26 | bool rightSidebarExpanded = false; 27 | bool rightSidebarEnabled = false; 28 | public Type? PageType { get; private set; } 29 | public string PageTypeName => PageType?.Name ?? ""; 30 | public string Location { get; private set; } = ""; 31 | public string? HistoryEntryState { get; private set; } 32 | public DateTime LocationUpdated { get; private set; } = DateTime.MinValue; 33 | protected override void OnInitialized() 34 | { 35 | NavigationManager.LocationChanged += NavigationManager_LocationChanged; 36 | MainLayoutService.OnTitleChanged += MainLayoutService_OnTitleChanged; 37 | } 38 | private void MainLayoutService_OnTitleChanged() 39 | { 40 | StateHasChanged(); 41 | } 42 | private void NavigationManager_LocationChanged(object? sender, Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs e) 43 | { 44 | AfterLocationChanged(e.HistoryEntryState); 45 | } 46 | protected override void OnAfterRender(bool firstRender) 47 | { 48 | MainLayoutService.TriggerOnAfterRender(this, firstRender); 49 | if (firstRender) 50 | { 51 | AfterLocationChanged(); 52 | } 53 | } 54 | void AfterLocationChanged(string? historyEntryState = null) 55 | { 56 | var pageType = Body != null && Body.Target != null && Body.Target is RouteView routeView ? routeView.RouteData.PageType : null; 57 | var location = NavigationManager.Uri; 58 | if (PageType == pageType && Location == location) 59 | { 60 | #if DEBUG 61 | Console.WriteLine($"SendLocationChanged: false"); 62 | #endif 63 | return; 64 | } 65 | LocationUpdated = DateTime.Now; 66 | PageType = pageType; 67 | Location = location; 68 | HistoryEntryState = historyEntryState; 69 | #if DEBUG 70 | Console.WriteLine($"LocationChanged: {PageTypeName} [{HistoryEntryState ?? ""}] {Location}"); 71 | #endif 72 | } 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Pages/Examples/Basic/BlendModesExample.razor: -------------------------------------------------------------------------------- 1 | @page "/examples/basic/blendmodes" 2 | 3 | @using SpawnDev.BlazorJS.JSObjects 4 | @using static SpawnDev.BlazorJS.PixiJS.PIXI 5 | @using SpawnDev.BlazorJS.JsonConverters 6 | @implements IDisposable 7 | 8 |
9 |

10 | Source: Blend Modes Example 11 |

12 |
13 |
14 | @code { 15 | [Inject] 16 | BlazorJSRuntime JS { get; set; } 17 | ElementReference? containerElRef = null; 18 | Application? app = null; 19 | Container? container = null; 20 | protected override async Task OnAfterRenderAsync(bool firstRender) 21 | { 22 | if (firstRender) 23 | { 24 | await Init(); 25 | } 26 | } 27 | async Task Init() 28 | { 29 | using var document = JS.GetDocument(); 30 | 31 | // Create a new application 32 | app = new Application(); 33 | 34 | // Initialize the application 35 | await app.Init(new ApplicationOptions 36 | { 37 | Antialias = true, 38 | BackgroundColor = "white", 39 | ResizeTo = containerElRef 40 | }); 41 | 42 | // Append the application canvas to the document body 43 | using var htmlElement = new HTMLElement(containerElRef!.Value); 44 | htmlElement!.AppendChild(app.Canvas); 45 | 46 | // Create and add a container to the stage 47 | container = new Container(); 48 | using var stage = app.Stage; 49 | stage!.AddChild(container); 50 | 51 | // Load the bunny texture 52 | using var texture = await Assets.Load("https://pixijs.com/assets/bunny.png"); 53 | 54 | // Create a 5x5 grid of bunnies in the container 55 | for (var i = 0; i < 25; i++) 56 | { 57 | using var bunny = new Sprite(texture); 58 | 59 | bunny.X = (i % 5f) * 40f; 60 | bunny.Y = (float)Math.Floor(i / 5f) * 40f; 61 | container.AddChild(bunny); 62 | } 63 | 64 | // Move the container to the center 65 | container.X = app.Screen.Width / 2; 66 | container.Y = app.Screen.Height / 2; 67 | 68 | // Center the bunny sprites in local container coordinates 69 | container.Pivot.X = container.Width / 2; 70 | container.Pivot.Y = container.Height / 2; 71 | 72 | // Listen for animate update 73 | using var ticker = app.Ticker; 74 | ticker.Add(Tick); 75 | } 76 | void Tick(Ticker time) 77 | { 78 | // Continuously rotate the container! 79 | // * use delta to create frame-independent transform * 80 | container!.Rotation -= 0.01f * time.DeltaTime; 81 | } 82 | public void Dispose() 83 | { 84 | if (app != null) 85 | { 86 | using var ticker = app.Ticker; 87 | ticker.Remove(Tick); 88 | app.Dispose(); 89 | } 90 | container?.Dispose(); 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Pages/Examples/Text/FromFontExample.razor: -------------------------------------------------------------------------------- 1 | @page "/examples/basic/from-font" 2 | 3 | @using SpawnDev.BlazorJS 4 | @using SpawnDev.BlazorJS.JSObjects 5 | @using static SpawnDev.BlazorJS.PixiJS.PIXI 6 | @using SpawnDev.BlazorJS.PixiJS 7 | @using SpawnDev.BlazorJS.JsonConverters 8 | @implements IDisposable 9 | 10 |
11 |

12 | Source: From Font Example 13 |

14 |
15 |
16 | @code { 17 | [Inject] 18 | BlazorJSRuntime JS { get; set; } 19 | ElementReference containerElRef; 20 | Application? app = null; 21 | Container? container = null; 22 | protected override async Task OnAfterRenderAsync(bool firstRender) 23 | { 24 | if (firstRender) 25 | { 26 | await Init(); 27 | } 28 | } 29 | async Task Init() 30 | { 31 | using var document = JS.GetDocument(); 32 | 33 | // Create a new application 34 | app = new Application(); 35 | 36 | // Initialize the application 37 | await app.Init(new ApplicationOptions { Background = "#1099bb", ResizeTo = containerElRef }); 38 | 39 | // Append the application canvas to the document body 40 | using var htmlElement = new HTMLElement(containerElRef); 41 | htmlElement!.AppendChild(app.Canvas); 42 | 43 | // Add font files to the bundle 44 | Assets.AddBundle("fonts", new UnresolvedAsset[]{ 45 | new UnresolvedAsset{ Alias = "ChaChicle", Src = "https://pixijs.com/assets/webfont-loader/ChaChicle.ttf" }, 46 | new UnresolvedAsset{ Alias = "Lineal", Src = "https://pixijs.com/assets/webfont-loader/Lineal.otf" }, 47 | new UnresolvedAsset{ Alias = "Dotrice Regular", Src = "https://pixijs.com/assets/webfont-loader/Dotrice-Regular.woff" }, 48 | new UnresolvedAsset{ Alias = "Crosterian", Src = "https://pixijs.com/assets/webfont-loader/Crosterian.woff2" }, 49 | }); 50 | 51 | // Load the font bundle 52 | await Assets.LoadBundle("fonts"); 53 | 54 | var text1 = new PIXI.Text(new TextOptions { Text = "ChaChicle.ttf", Style = new TextStyleOptions { FontFamily = "ChaChicle", FontSize = 50 } }); 55 | var text2 = new PIXI.Text(new TextOptions { Text = "Lineal.otf", Style = new TextStyleOptions { FontFamily = "Lineal", FontSize = 50 } }); 56 | var text3 = new PIXI.Text(new TextOptions { Text = "Dotrice Regular.woff", Style = new TextStyleOptions { FontFamily = "Dotrice Regular", FontSize = 50 } }); 57 | var text4 = new PIXI.Text(new TextOptions { Text = "Crosterian.woff2", Style = new TextStyleOptions { FontFamily = "Crosterian", FontSize = 50 } }); 58 | 59 | text2.Y = 150; 60 | text3.Y = 300; 61 | text4.Y = 450; 62 | 63 | app.Stage.AddChild(text1); 64 | app.Stage.AddChild(text2); 65 | app.Stage.AddChild(text3); 66 | app.Stage.AddChild(text4); 67 | } 68 | public void Dispose() 69 | { 70 | if (app != null) 71 | { 72 | app.Dispose(); 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Maths/Point/Point.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// * The Point object represents a location in a two-dimensional coordinate system, where `x` represents the position on the 9 | /// horizontal axis and `y` represents the position on the vertical axis. Many Pixi functions accept the `PointData` type as 10 | /// an alternative to `Point`, which only requires `x` and `y` properties.
11 | /// https://pixijs.download/release/docs/maths.Point.html 12 | /// 13 | public class Point : PointLike 14 | { 15 | /// 16 | public Point(IJSInProcessObjectReference _ref) : base(_ref) { } 17 | /// 18 | /// Creates a new Point 19 | /// 20 | /// 21 | /// 22 | public Point(float x = 0, float y = 0) : base(JS.New("PIXI.Point", x, y)) { } 23 | /// 24 | /// Creates a clone of this point 25 | /// 26 | /// 27 | public Point Clone() => JSRef!.Call("clone"); 28 | #region Math Extras 29 | /// 30 | /// Adds other to this point and outputs into outPoint or a new Point.
31 | /// Note: Only available with pixi.js/math-extras. 32 | /// 33 | /// 34 | /// 35 | /// 36 | /// 37 | public TPointData Add(IPointData other, TPointData outPoint) where TPointData : IPointData => JSRef!.Call("add", other, outPoint); 38 | /// 39 | /// Adds other to this point and outputs into outPoint or a new Point.
40 | /// Note: Only available with pixi.js/math-extras. 41 | /// 42 | /// 43 | /// 44 | /// 45 | public void Add(IPointData other, IPointData outPoint) => JSRef!.CallVoid("add", other, outPoint); 46 | /// 47 | /// Adds other to this point and outputs into outPoint or a new Point.
48 | /// Note: Only available with pixi.js/math-extras. 49 | /// 50 | /// 51 | /// 52 | public Point Add(IPointData other) => JSRef!.Call("add", other); 53 | /// 54 | /// Adds other to this point and outputs into outPoint or a new Point.
55 | /// Note: Only available with pixi.js/math-extras. 56 | /// 57 | /// 58 | /// 59 | /// 60 | public TPointData Add(IPointData other) where TPointData : IPointData => JSRef!.Call("add", other); 61 | 62 | // TODO 63 | #endregion 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Scene/Sprite/Sprite.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | 3 | namespace SpawnDev.BlazorJS.PixiJS 4 | { 5 | public static partial class PIXI 6 | { 7 | /// 8 | /// The Sprite object is one of the most important objects in PixiJS. It is a drawing item that can be added to a scene and rendered to the screen. 9 | /// 10 | public class Sprite : Container, IView 11 | { 12 | #region Constructors 13 | /// 14 | /// Deserialization constructor 15 | /// 16 | /// 17 | public Sprite(IJSInProcessObjectReference _ref) : base(_ref) { } 18 | /// 19 | /// Creates a new instance 20 | /// 21 | /// 22 | public Sprite(Texture texture) : base(JS.New("PIXI.Sprite", texture)) { } 23 | /// 24 | /// Creates a new instance 25 | /// 26 | /// 27 | public Sprite(SpriteOptions options) : base(JS.New("PIXI.Sprite", options)) { } 28 | #endregion 29 | #region Properties 30 | /// 31 | /// a unique id for this view 32 | /// 33 | public long Uid => JSRef!.Get("uid"); 34 | /// 35 | /// whether or not this view should be batched 36 | /// 37 | public bool Batched { get => JSRef!.Get("batched"); set => JSRef!.Set("batched", value); } 38 | /// 39 | /// an identifier that is used to identify the type of system that will be used to render this renderable
40 | /// eg, 'sprite' will use the sprite system(based on the systems name 41 | /// 42 | public string? RenderPipeId { get => JSRef!.Get("renderPipeId"); set => JSRef!.Set("renderPipeId", value); } 43 | /// 44 | /// Whether or not to round the x/y position of the object. 45 | /// 46 | public bool RoundPixels { get => JSRef!.Get("roundPixels"); set => JSRef!.Set("roundPixels", value); } 47 | /// 48 | /// this is the AABB rectangle bounds of the view in local untransformed space. 49 | /// 50 | public BoundsData? Bounds { get => JSRef!.Get("bounds"); set => JSRef!.Set("bounds", value); } 51 | #endregion 52 | #region Methods 53 | /// 54 | /// Adds the current bounds of this view to the supplied bounds 55 | /// 56 | /// 57 | /// 58 | public void AddBounds(Bounds bounds) => JSRef!.CallVoid("addBounds", bounds); 59 | /// 60 | /// Checks if the point is within the view 61 | /// 62 | /// 63 | /// 64 | public bool ContainsPoint(Point point) => JSRef!.Call("containsPoint", point); 65 | #endregion 66 | #region Events 67 | 68 | #endregion 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Layout/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | 3 | @Title 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 |
45 | 46 | 47 |
48 | @Body 49 |
50 | 51 | 52 |
53 | 54 |
55 | 56 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/App/ApplicationOptions.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using SpawnDev.BlazorJS.JSObjects; 3 | using System.Text.Json.Serialization; 4 | 5 | namespace SpawnDev.BlazorJS.PixiJS 6 | { 7 | public static partial class PIXI 8 | { 9 | /// 10 | /// Application options supplied to the init method.
11 | /// https://api.pixijs.io/@pixi/app/PIXI/Application.html
12 | /// 13 | public class ApplicationOptions : AutoDetectOptions 14 | { 15 | /// 16 | /// The background color used to clear the canvas. See {@link ColorSource} for accepted color values. 17 | /// interface BackgroundSystemOptions 18 | /// 19 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 20 | public ColorSource? BackgroundColor { get; set; } 21 | /// 22 | /// Alias for backgroundColor 23 | /// interface BackgroundSystemOptions 24 | /// 25 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 26 | public ColorSource? Background { get; set; } 27 | /// 28 | /// Transparency of the background color, value from `0` (fully transparent) to `1` (fully opaque).
29 | /// default 1
30 | /// interface BackgroundSystemOptions 31 | /// 32 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 33 | public float? BackgroundAlpha { get; set; } 34 | /// 35 | /// Whether to clear the canvas before new render passes.
36 | /// default true
37 | /// interface BackgroundSystemOptions 38 | /// 39 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 40 | public bool? ClearBeforeRender { get; set; } 41 | /// 42 | /// Sets antialias 43 | /// 44 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 45 | public bool? Antialias { get; set; } 46 | /// 47 | /// Element to automatically resize the renderer to. 48 | /// interface ResizePluginOptions 49 | /// 50 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 51 | public Union? ResizeTo { get; set; } 52 | /// 53 | /// Automatically starts the rendering after the construction. Note: Setting this parameter to false does NOT stop the shared ticker even if you set options.sharedTicker to true in case that it is already started. Stop it by your own.
54 | /// default true
55 | /// interface TickerPluginOptions 56 | /// 57 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 58 | public bool? AutoStart { get; set; } 59 | /// 60 | /// Set true to use Ticker.shared, false to create new ticker. If set to false, you cannot register a handler to occur before anything that runs on the shared ticker. The system ticker will always run before both the shared ticker and the app ticker.
61 | /// default false
62 | /// interface TickerPluginOptions 63 | /// 64 | [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 65 | public bool? SharedTicker { get; set; } 66 | 67 | 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Layout/RadzenThemeContainer.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using Radzen; 3 | using Radzen.Blazor; 4 | 5 | namespace SpawnDev.BlazorJS.PixiJS.Demo.Layout 6 | { 7 | /// 8 | /// Registers and manages the current theme. Requires to be registered in the DI container. 9 | /// 10 | public partial class RadzenThemeContainer : IDisposable 11 | { 12 | /// 13 | /// Gets or sets the theme. 14 | /// 15 | [Parameter] 16 | public string Theme { get; set; } 17 | 18 | /// 19 | /// Enables WCAG contrast requirements. If set to true additional CSS file will be loaded. 20 | /// 21 | [Parameter] 22 | public bool Wcag { get; set; } 23 | 24 | private string theme; 25 | 26 | private bool wcag; 27 | 28 | private static readonly string Version = typeof(RadzenTheme).Assembly.GetName().Version!.ToString(); 29 | 30 | private string Href => $"{Path}/{theme}-base.css?v={Version}"; 31 | 32 | private string WcagHref => $"{Path}/{theme}-wcag.css?v={Version}"; 33 | 34 | private string Path => Embedded ? $"_content/Radzen.Blazor/css" : "css"; 35 | 36 | private bool Embedded => theme switch 37 | { 38 | "material" => true, 39 | "material-dark" => true, 40 | "standard" => true, 41 | "standard-dark" => true, 42 | "humanistic" => true, 43 | "humanistic-dark" => true, 44 | "software" => true, 45 | "software-dark" => true, 46 | "default" => true, 47 | "dark" => true, 48 | _ => false 49 | }; 50 | 51 | private PersistingComponentStateSubscription persistingSubscription; 52 | 53 | /// 54 | protected override void OnInitialized() 55 | { 56 | theme = ThemeService.Theme ?? GetCurrentTheme(); 57 | wcag = ThemeService.Wcag ?? Wcag; 58 | 59 | ThemeService.SetTheme(theme, true); 60 | 61 | theme = theme.ToLowerInvariant(); 62 | 63 | ThemeService.ThemeChanged += OnThemeChanged; 64 | 65 | persistingSubscription = PersistentComponentState.RegisterOnPersisting(PersistTheme); 66 | 67 | base.OnInitialized(); 68 | } 69 | 70 | private string GetCurrentTheme() 71 | { 72 | if (PersistentComponentState.TryTakeFromJson(nameof(Theme), out string theme)) 73 | { 74 | return theme; 75 | } 76 | 77 | return Theme; 78 | } 79 | 80 | private Task PersistTheme() 81 | { 82 | PersistentComponentState.PersistAsJson(nameof(Theme), theme); 83 | 84 | return Task.CompletedTask; 85 | } 86 | 87 | private void OnThemeChanged() 88 | { 89 | var requiresChange = false; 90 | 91 | var newTheme = ThemeService.Theme.ToLowerInvariant(); 92 | 93 | if (theme != newTheme) 94 | { 95 | theme = newTheme; 96 | requiresChange = true; 97 | } 98 | 99 | var newWcag = ThemeService.Wcag ?? Wcag; 100 | 101 | if (wcag != newWcag) 102 | { 103 | wcag = newWcag; 104 | requiresChange = true; 105 | } 106 | 107 | if (requiresChange) 108 | { 109 | StateHasChanged(); 110 | } 111 | } 112 | 113 | /// 114 | /// Releases all resources used by the component. 115 | /// 116 | public void Dispose() 117 | { 118 | ThemeService.ThemeChanged -= OnThemeChanged; 119 | persistingSubscription.Dispose(); 120 | } 121 | } 122 | } -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/wwwroot/css/app.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 3 | } 4 | 5 | h1:focus { 6 | outline: none; 7 | } 8 | 9 | a, .btn-link { 10 | color: #0071c1; 11 | } 12 | 13 | .btn-primary { 14 | color: #fff; 15 | background-color: #1b6ec2; 16 | border-color: #1861ac; 17 | } 18 | 19 | .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { 20 | box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; 21 | } 22 | 23 | .content { 24 | padding-top: 1.1rem; 25 | } 26 | 27 | .valid.modified:not([type=checkbox]) { 28 | outline: 1px solid #26b050; 29 | } 30 | 31 | .invalid { 32 | outline: 1px solid red; 33 | } 34 | 35 | .validation-message { 36 | color: red; 37 | } 38 | 39 | #blazor-error-ui { 40 | background: lightyellow; 41 | bottom: 0; 42 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 43 | display: none; 44 | left: 0; 45 | padding: 0.6rem 1.25rem 0.7rem 1.25rem; 46 | position: fixed; 47 | width: 100%; 48 | z-index: 1000; 49 | } 50 | 51 | #blazor-error-ui .dismiss { 52 | cursor: pointer; 53 | position: absolute; 54 | right: 0.75rem; 55 | top: 0.5rem; 56 | } 57 | 58 | .blazor-error-boundary { 59 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; 60 | padding: 1rem 1rem 1rem 3.7rem; 61 | color: white; 62 | } 63 | 64 | .blazor-error-boundary::after { 65 | content: "An error has occurred." 66 | } 67 | 68 | .loading-progress { 69 | position: relative; 70 | display: block; 71 | width: 8rem; 72 | height: 8rem; 73 | margin: 20vh auto 1rem auto; 74 | } 75 | 76 | .loading-progress circle { 77 | fill: none; 78 | stroke: #e0e0e0; 79 | stroke-width: 0.6rem; 80 | transform-origin: 50% 50%; 81 | transform: rotate(-90deg); 82 | } 83 | 84 | .loading-progress circle:last-child { 85 | stroke: #1b6ec2; 86 | stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; 87 | transition: stroke-dasharray 0.05s ease-in-out; 88 | } 89 | 90 | .loading-progress-text { 91 | position: absolute; 92 | text-align: center; 93 | font-weight: bold; 94 | inset: calc(20vh + 3.25rem) 0 auto 0.2rem; 95 | } 96 | 97 | .loading-progress-text:after { 98 | content: var(--blazor-load-percentage-text, "Loading"); 99 | } 100 | 101 | code { 102 | color: #c02d76; 103 | } 104 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS/Maths/Point/ObservablePoint.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.JSInterop; 2 | using SpawnDev.BlazorJS.JSObjects; 3 | using System.Text.Json.Serialization; 4 | 5 | namespace SpawnDev.BlazorJS.PixiJS 6 | { 7 | public static partial class PIXI 8 | { 9 | /// 10 | /// The ObservablePoint object represents a location in a two-dimensional coordinate system, where x represents the position on the horizontal axis and y represents the position on the vertical axis.
11 | /// An ObservablePoint is a point that triggers a callback when the point's position is changed.
12 | /// https://api.pixijs.io/@pixi/math/PIXI/ObservablePoint.html
13 | /// https://pixijs.download/release/docs/maths.ObservablePoint.html 14 | /// 15 | public class ObservablePoint : PointLike 16 | { 17 | 18 | #region Constructors 19 | /// 20 | public ObservablePoint(IJSInProcessObjectReference _ref) : base(_ref) { } 21 | /// 22 | /// Creates a new instance 23 | /// 24 | public ObservablePoint() : base(JS.New("PIXI.ObservablePoint")) { } 25 | /// 26 | /// Creates a new instance 27 | /// 28 | /// Observer to pass to listen for change events. 29 | /// position of the point on the x axis 30 | /// position of the point on the y axis 31 | public ObservablePoint(Observer observer, float x = 0, float y = 0) : base(JS.New("PIXI.ObservablePoint", observer, x, y)) { } 32 | #endregion 33 | 34 | /// 35 | /// Creates a clone of this point 36 | /// 37 | /// 38 | public Point Clone() => JSRef!.Call("clone"); 39 | /// 40 | /// Creates a clone of this point 41 | /// 42 | /// 43 | public Point Clone(Observer observer) => JSRef!.Call("clone", observer); 44 | #region Math Extras 45 | /// 46 | /// Adds other to this point and outputs into outPoint or a new Point.
47 | /// Note: Only available with pixi.js/math-extras. 48 | /// 49 | /// 50 | /// 51 | /// 52 | /// 53 | public TPointData Add(IPointData other, TPointData outPoint) where TPointData : IPointData => JSRef!.Call("add", other, outPoint); 54 | /// 55 | /// Adds other to this point and outputs into outPoint or a new Point.
56 | /// Note: Only available with pixi.js/math-extras. 57 | /// 58 | /// 59 | /// 60 | /// 61 | public void Add(IPointData other, IPointData outPoint) => JSRef!.CallVoid("add", other, outPoint); 62 | /// 63 | /// Adds other to this point and outputs into outPoint or a new Point.
64 | /// Note: Only available with pixi.js/math-extras. 65 | /// 66 | /// 67 | /// 68 | public Point Add(IPointData other) => JSRef!.Call("add", other); 69 | /// 70 | /// Adds other to this point and outputs into outPoint or a new Point.
71 | /// Note: Only available with pixi.js/math-extras. 72 | /// 73 | /// 74 | /// 75 | /// 76 | public TPointData Add(IPointData other) where TPointData : IPointData => JSRef!.Call("add", other); 77 | 78 | // TODO 79 | #endregion 80 | 81 | } 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Pages/Examples/Text/PixiTextExample.razor: -------------------------------------------------------------------------------- 1 | @page "/examples/basic/pixi-text" 2 | 3 | @using SpawnDev.BlazorJS 4 | @using SpawnDev.BlazorJS.JSObjects 5 | @using static SpawnDev.BlazorJS.PixiJS.PIXI 6 | @using SpawnDev.BlazorJS.PixiJS 7 | @using SpawnDev.BlazorJS.JsonConverters 8 | @implements IDisposable 9 | 10 |
11 |

12 | Source: Bitmap Text Example 13 |

14 |
15 |
16 | @code { 17 | [Inject] 18 | BlazorJSRuntime JS { get; set; } 19 | ElementReference containerElRef; 20 | Application? app = null; 21 | Container? container = null; 22 | protected override async Task OnAfterRenderAsync(bool firstRender) 23 | { 24 | if (firstRender) 25 | { 26 | await Init(); 27 | } 28 | } 29 | async Task Init() 30 | { 31 | using var document = JS.GetDocument(); 32 | 33 | // Create a new application 34 | app = new Application(); 35 | 36 | // Initialize the application 37 | await app.Init(new ApplicationOptions { Background = "#1099bb", ResizeTo = containerElRef }); 38 | 39 | // Append the application canvas to the document body 40 | using var htmlElement = new HTMLElement(containerElRef); 41 | htmlElement!.AppendChild(app.Canvas); 42 | 43 | var basicText = new PIXI.Text(new TextOptions { Text = "Basic text in pixi" }); 44 | 45 | basicText.X = 50; 46 | basicText.Y = 100; 47 | 48 | app.Stage!.AddChild(basicText); 49 | 50 | // Create gradient fill 51 | var fill = new FillGradient(0, 0, 0, 36f * 1.7f * 7f); 52 | 53 | var colors = new int[] { 0xffffff, 0x00ff99 }.ToList().Select((color) => Color.Shared.SetValue(color).ToNumber()).ToArray(); 54 | 55 | for (var i = 0; i < colors.Length; i++) 56 | { 57 | var number = colors[i]; 58 | var ratio = i / colors.Length; 59 | fill.AddColorStop(ratio, number); 60 | } 61 | 62 | var style = new PIXI.TextStyle(new TextStyleOptions 63 | { 64 | FontFamily = "Arial", 65 | FontSize = 36, 66 | FontStyle = "italic", 67 | FontWeight = "bold", 68 | Fill = fill, 69 | Stroke = new StrokeStyle { Color = "#4a1850", Width = 5, Join = "round" }, 70 | DropShadow = new TextDropShadow 71 | { 72 | Color = "#000000", 73 | Blur = 4, 74 | Angle = (float)(Math.PI / 6d), 75 | Distance = 6, 76 | }, 77 | WordWrap = true, 78 | WordWrapWidth = 440, 79 | }); 80 | 81 | var richText = new PIXI.Text(new TextOptions 82 | { 83 | Text = "Rich text with a lot of options and across multiple lines", 84 | Style = style, 85 | }); 86 | 87 | richText.X = 50; 88 | richText.Y = 220; 89 | 90 | app.Stage!.AddChild(richText); 91 | 92 | var skewStyle = new PIXI.TextStyle(new TextStyleOptions 93 | { 94 | FontFamily = "Arial", 95 | DropShadow = new TextDropShadow 96 | { 97 | Alpha = 0.8f, 98 | Angle = 2.1f, 99 | Blur = 4f, 100 | Color = "0x111111", 101 | Distance = 10, 102 | }, 103 | Fill = "#ffffff", 104 | Stroke = new StrokeStyle { Color = "#004620", Width = 12, Join = "round" }, 105 | FontSize = 60, 106 | FontWeight = "lighter", 107 | }); 108 | 109 | var skewText = new PIXI.Text(new TextOptions 110 | { 111 | Text = "SKEW IS COOL", 112 | Style = skewStyle, 113 | }); 114 | 115 | skewText.Skew.Set(0.65f, -0.3f); 116 | skewText.Anchor.Set(0.5f, 0.5f); 117 | skewText.X = 300; 118 | skewText.Y = 480; 119 | 120 | app.Stage.AddChild(skewText); 121 | } 122 | public void Dispose() 123 | { 124 | if (app != null) 125 | { 126 | app.Dispose(); 127 | } 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /SpawnDev.BlazorJS.PixiJS.Demo/Pages/Examples/Graphics/SimpleExample.razor: -------------------------------------------------------------------------------- 1 | @page "/examples/graphics/simple" 2 | 3 | @using SpawnDev.BlazorJS 4 | @using SpawnDev.BlazorJS.JSObjects 5 | @using static SpawnDev.BlazorJS.PixiJS.PIXI 6 | @using SpawnDev.BlazorJS.PixiJS 7 | @using SpawnDev.BlazorJS.JsonConverters 8 | @implements IDisposable 9 | 10 |
11 |

12 | Source: From Font Example 13 |

14 |
15 |
16 | @code { 17 | [Inject] 18 | BlazorJSRuntime JS { get; set; } 19 | ElementReference containerElRef; 20 | Application? app = null; 21 | Container? container = null; 22 | protected override async Task OnAfterRenderAsync(bool firstRender) 23 | { 24 | if (firstRender) 25 | { 26 | await Init(); 27 | } 28 | } 29 | async Task Init() 30 | { 31 | using var document = JS.GetDocument(); 32 | 33 | // Create a new application 34 | app = new Application(); 35 | 36 | // Initialize the application 37 | await app.Init(new ApplicationOptions { Background = "#1099bb", ResizeTo = containerElRef }); 38 | 39 | // Append the application canvas to the document body 40 | using var htmlElement = new HTMLElement(containerElRef); 41 | htmlElement!.AppendChild(app.Canvas); 42 | 43 | var graphics = new Graphics(); 44 | 45 | // Rectangle 46 | graphics.Rect(50, 50, 100, 100); 47 | graphics.Fill(0xde3249); 48 | 49 | // Rectangle + line style 1 50 | graphics.Rect(200, 50, 100, 100); 51 | graphics.Fill(0x650a5a); 52 | graphics.Stroke(new StrokeStyle { Width = 2, Color = 0xfeeb77 }); 53 | 54 | // Rectangle + line style 2 55 | graphics.Rect(350, 50, 100, 100); 56 | graphics.Fill(0xc34288); 57 | graphics.Stroke(new StrokeStyle { Width = 10, Color = 0xffbd01 }); 58 | 59 | // Rectangle 2 60 | graphics.Rect(530, 50, 140, 100); 61 | graphics.Fill(0xaa4f08); 62 | graphics.Stroke(new StrokeStyle { Width = 2, Color = 0xffffff }); 63 | 64 | // Circle 65 | graphics.Circle(100, 250, 50); 66 | graphics.Fill(0xde3249, 1); 67 | 68 | // Circle + line style 1 69 | graphics.Circle(250, 250, 50); 70 | graphics.Fill(0x650a5a, 1); 71 | graphics.Stroke(new StrokeStyle { Width = 2, Color = 0xfeeb77 }); 72 | 73 | // Circle + line style 2 74 | graphics.Circle(400, 250, 50); 75 | graphics.Fill(0xc34288, 1); 76 | graphics.Stroke(new StrokeStyle { Width = 10, Color = 0xffbd01 }); 77 | 78 | // Ellipse + line style 2 79 | graphics.Ellipse(600, 250, 80, 50); 80 | graphics.Fill(0xaa4f08, 1); 81 | graphics.Stroke(new StrokeStyle { Width = 2, Color = 0xffffff }); 82 | 83 | // Draw a shape 84 | graphics.MoveTo(50, 350); 85 | graphics.LineTo(250, 350); 86 | graphics.LineTo(100, 400); 87 | graphics.LineTo(50, 350); 88 | graphics.Fill(0xff3300); 89 | graphics.Stroke(new StrokeStyle { Width = 4, Color = 0xffd900 }); 90 | 91 | // Draw a rounded rectangle 92 | graphics.RoundRect(50, 440, 100, 100, 16); 93 | graphics.Fill(0x650a5a, 0.25f); 94 | graphics.Stroke(new StrokeStyle { Width = 2, Color = 0xff00ff }); 95 | 96 | // Draw star 97 | graphics.Star(360, 370, 5, 50); 98 | graphics.Fill(0x35cc5a); 99 | graphics.Stroke(new StrokeStyle { Width = 2, Color = 0xffffff }); 100 | 101 | // Draw star 2 102 | graphics.Star(280, 510, 7, 50); 103 | graphics.Fill(0xffcc5a); 104 | graphics.Stroke(new StrokeStyle{ Width = 2, Color = 0xfffffd }); 105 | 106 | // Draw star 3 107 | graphics.Star(470, 450, 4, 50); 108 | graphics.Fill(0x55335a); 109 | graphics.Stroke(new StrokeStyle { Width = 2, Color = 0xfffffd }); 110 | 111 | // Draw polygon 112 | var path = new int[] { 600, 370, 700, 460, 780, 420, 730, 570, 590, 520 }; 113 | 114 | graphics.Poly(path); 115 | graphics.Fill(0x3500fa); 116 | 117 | app.Stage!.AddChild(graphics); 118 | } 119 | public void Dispose() 120 | { 121 | if (app != null) 122 | { 123 | app.Dispose(); 124 | } 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SpawnDev.BlazorJS.PixiJS 2 | 3 | [![NuGet](https://img.shields.io/nuget/dt/SpawnDev.BlazorJS.PixiJS.svg?label=SpawnDev.BlazorJS.PixiJS)](https://www.nuget.org/packages/SpawnDev.BlazorJS.PixiJS) 4 | 5 | **SpawnDev.BlazorJS.PixiJS** brings the amazing [PixiJS](https://github.com/pixijs/pixijs) library to Blazor WebAssembly. 6 | 7 | The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer in Blazor WebAssembly. 8 | 9 | ### Demo 10 | [Examples Demo](https://lostbeard.github.io/SpawnDev.BlazorJS.PixiJS/) 11 | 12 | ### Getting started 13 | 14 | Add the Nuget package `SpawnDev.BlazorJS.PixiJS` to your project using your package manager of choice. 15 | 16 | Modify the Blazor WASM `Program.cs` to initialize SpawnDev.BlazorJS for Javascript interop. 17 | Example Program.cs 18 | ```cs 19 | using Microsoft.AspNetCore.Components.Web; 20 | using Microsoft.AspNetCore.Components.WebAssembly.Hosting; 21 | using SpawnDev.BlazorJS; 22 | using SpawnDev.BlazorJS.PixiJS; 23 | using SpawnDev.BlazorJS.PixiJS.Demo; 24 | 25 | var builder = WebAssemblyHostBuilder.CreateDefault(args); 26 | builder.RootComponents.Add("#app"); 27 | builder.RootComponents.Add("head::after"); 28 | // Add SpawnDev.BlazorJS interop 29 | builder.Services.AddBlazorJSRuntime(); 30 | // Load the PixiJS Javascript library. Can be called in a component instead if desired, or loaded using a