Search the Community

I am seeking a talented video creator who can help create stunning cinematic movies for the upcoming browser MMORPG Orizaya: Sisters of the Stars. Early gameplay: https://www.youtube.com/watch?v=JZGjcLdfHPs ----- ABOUT ME OG product designer and software engineer who has worked in the San Francisco tech scene for the last 15 years. Design portfolio: dribbble.com/bennyschmidt GitHub: github.com/bennyschmidt I have worked with brands such as Apple, Nike, DocuSign, Red Bull, and have contributed in open source to the likes of Brave, Odysee, Microsoft, Facebook (React), Mozilla, LlamaIndex, and more. ----- ABOUT THE PROJECT Lore: https://www.youtube.com/@orizaya/posts Videos: https://www.youtube.com/@orizaya/videos Orizaya is an ambitious browser-based MMORPG set in a fictional, magical world in the Pleiades star system. The overall look/feel is that of a AAA themepark MMO (Final Fantasy XIV, World of Warcraft, Guild Wars 2) with WASD and mouse controls, animation canceling, low poly style, persistent world, raid & dungeon finders, and a battlegrounds queue with structured PvP across 3 different maps. Though I have worked professionally on social games in my early career at companies like Facebook, FlipTrack, and Francis Ford Coppola Presents, and have released 2 offline RPGs on the App Store as a solo dev (Meteora and Blighted Souls, respectively), Orizaya is my first attempt at a highly ambitious MMO game that I'd like to involve other creators with. The game is playable today, though there is still a lot to be done. Because it runs in a browser, I created a custom engine in Three.js (react-three-fiber) and am building pretty much everything in both the client and server from scratch, down to the physics. I've even created a bespoke Level Editing software to assist in building the world. A lot of the lore is written or planned, and I'm able to accomplish a lot of the music, sound effects, and 2D/3D art myself through open source (Pixabay, Sketchfab) and modern AI tooling (Tripo, Vidu). One area I am falling short, however, is video content. Take a look at some of the videos I've posted to the YouTube channel (it's early, low risk): https://www.youtube.com/@orizaya/videos I'd like someone to take over this role of video content creation and do it a lot better than I can. I'd love to move away from this "AI look" and have awe-inspiring, jaw-dropping cinematics like those you'd expect from a AAA title. I don't care whether or not this person uses AI in their work - I may even slightly encourage it. But I am open to other styles (e.g. the way Guild Wars 2 does storytelling with imagery). The aesthetic of Orizaya is "Victorian Spacepunk" - a mix between high fantasy / Victorian steampunk like you'd find in Final Fantasy or ArcheAge and dark sci-fi that you'd find in films like Dune. ----- ABOUT THE JOB This is an unpaid, volunteer-only role. You will be credited on the title screen on orizaya.com for as long as the art is in use (and for a minimum of 4 years, even if I only use it for 1 day). Work that I admire: "Neural Tissue" by Gossip.Goblin - https://www.youtube.com/shorts/-AusRkHFxfM "Arthas - No Turning Back" by Avaren - https://www.youtube.com/watch?v=0p0bLXaG49U If you're interested in producing some videos, please send me an email to support@orizaya.com with a little bit about you and a link to your work - thank you!

I am using PIXI version 5. In my project, I need to play a video when user hits on preview. I could able to stop auto play but I could not able to start the video on clicking on preview. I have used below line to off auto play texture.baseTexture.resource.autoPlay = false; Here is my code this.appRenderer = new Application({ width: width, height: height, }); this.videoTexture = PIXI.Texture.from(video); this.videoSprite = new PIXI.Sprite(this.videoTexture); this.addChild(this.videoSprite); there is no play function in texture.baseTexture.resource.source.

Is there any way to pause a video immediately after creating the element with PIXI.Texture.fromVideo or fromVideoUrl? It looks like it might be bugged currently, because under some circumstances the paused flag is set but the video doesn't actually pause. I noticed in the fromVideoUrl function it will call play() before returning, and at one point console.log'ing the baseTexture.source element showed instead of the HTML tag, an object with a pixi_id or something. I'm not sure if that is relevant, but I haven't been able to repeat that, so I'm not sure if it was just a one off (but it makes me suspicious if that object is somehow messing with my .pause() calls? Maybe during the transition .pause() calls don't work properly, so the video keeps playing? I'm not sure how that would work, but I'm not sure what's going on there either.) This is the only code that I have been able to make that works, but I imagine it's fragile due to the bug? where sometimes .paused gets set to true even though the video is still playing. If the timeout is lower than 1000 it doesn't pause the video, but the paused flag gets set so it stops it's setTimeout loop. Also, it means the video plays for ~1 second before pausing which in my case is problematic. var renderer, stage, video, sprite;$(function() { renderer = new PIXI.autoDetectRenderer(1920, 1080); $('body').append(renderer.view); stage = new PIXI.Container(); video = PIXI.Texture.fromVideoUrl('720p_test_web.mp4'); sprite = new PIXI.Sprite(video); stage.addChild(sprite); animate(); pauseVideo(video.baseTexture.source);});function animate() { requestAnimationFrame(animate); renderer.render(stage);}function pauseVideo(el) { console.log(el); if (!el.paused) { el.pause(); setTimeout(pauseVideo, 1000, el); }}I tried passing the video element directly into PIXI.Texture.fromVideo() but the video still doesn't pause and just plays from load. var renderer, stage, video, sprite;$(function() { renderer = new PIXI.autoDetectRenderer(1920, 1080); $('body').append(renderer.view); stage = new PIXI.Container(); video = PIXI.Texture.fromVideo(Util.fromVideoUrl('720p_test_web.mp4')); sprite = new PIXI.Sprite(video); stage.addChild(sprite); animate(); video.baseTexture.source.pause();});function animate() { requestAnimationFrame(animate); renderer.render(stage);}var Util = Util || {};Util.fromVideoUrl = function(src) { var video = document.createElement("video"); video.preload = "auto"; video.loop = true; video.src = src; video.pause(); return video;}Any ideas?

Hello, just wanted to share some of the progress on a HTML5 MMORPG game I'm developing. It's still in early stages and progressing well. It's called Elvarion. Here's a sneak peak video of the smooth per pixel movement, attack from a projectile generated server side with particle effects. Technology used Animations - PIXI.js animations (been thinking about Spine... but maybe later) Rendering - PIXI.js - PIXI.js particle effects - WebGL Sound - Howler Language - Javascript and Node Map Editor - Tiled Network - Socket.io - Nengi.js DB - MongoDB You can find us on Discord or on reddit. Thanks!

Hello everyone! Maybe someone has experience and can share with it. The question is how you guys croping media content inside PIXI Application. I have a lot of different stock video and images with different sizes. User can choose aspect ratio of final result: landscape (1920x1080), square (1080x1080), vertical (607,5x1080). The size of main container always is 1920x1080. Also there should be good resolution, let`s say: PIXI.settings.RESOLUTION = 2; I made some images to demonstrate how I want to make it. For example, user can choose vertical ratio and with horizontal hd video (or hd image) - so video (image) should be cropped, and around this video (image) should be for example black (or can be else) color. My code is: const video = some_json_data; const videoContainer = document.getElementById('videoContainer'); switch (video.aspectRatio){ case "square": vw = 1080; vh = 1080; break; case "landscape": vw = 1920; vh = 1080; break; case "vertical": vw = 607.5; vh = 1080; break; default: break; } const bgColor = '0x000000'; PIXI.settings.RESOLUTION = 2; app = new PIXI.Application({ width: vw, height: vh, backgroundColor: bgColor, }); videoContainer.appendChild(app.view); const renderer = PIXI.autoDetectRenderer({ width: vw, height: vh, resolution: 2 }); renderer.view.style.width = `${vw}px`; renderer.view.style.height = `${vh}px`; // create the root of the scene graph const stage = new PIXI.Container(); app.stage.addChild(stage); videoBg = PIXI.Texture.from(videoUrl); videoSprite = new PIXI.Sprite(videoBg); const videoController = videoSprite._texture.baseTexture.resource.source; app.stage.addChild(videoSprite); videoBg.baseTexture.resource.source.loop = false; videoBg.baseTexture.resource.autoPlay = false; // Width videoSprite.width = vw; videoSprite.height = vh; // move the sprite to the center of the screen videoSprite.alpha = 1; videoSprite.anchor.set(.5); videoSprite.x = app.screen.width / 2; videoSprite.y = app.screen.height / 2; app.ticker.add(function () { // render the stage renderer.render(stage); });

Hi, does anyone can help me? I have a video on PIXI, that is not responding to play command, however the events are being triggered ?‍♂️ http://fonosteps.com/pt/demo thank you smaller.mov

Hi there! I'm having a problem and maybe someone could help me. In my game I'm trying to load some videos (4 exactly), I did it this way on a separate scene (boot.js) in preload function: this.load.video('beforeWarnVideo', 'src/assets/videos/web_intro.webm', 'canplaythrough', false, false); this.load.video('mainVideo', 'src/assets/videos/into.webm', 'canplaythrough', false, false); this.load.video('menuLoopVideo', 'src/assets/videos/menu_loop.webm', 'canplaythrough', false, false); this.load.video('enterVideo', 'src/assets/videos/enter.webm', 'canplaythrough', false, false); When I test it on any desktop browser it works just fine, but on mobile I can't get videos working. I've connected my iPhone to my mac for debug and I found that Phaser is telling me that the videos aren't fully loaded (I leave an image attached). Is there another way of making sure that my videos are fully loaded before they show? Videos are in webm format. Videos sizes are little bit high, but client want it anyways (I compressed them a lot), sizes are: web_intro -> 291 kb menu_loop -> 7.4 mb into -> 9.9 mb enter -> 3.4 mb Thanks in advance

Hi everyone! I want to set the current position to 0 in pixi.js video object. (video file extension is mp4. Loaded and played successfully) And stop the video completely (not pause). How can I do that? If you know about this, please kindly let me know. Thanks.

hi, I'm completely new to pixi.js and i have trouble to replace a video by another video in my canvas. i wrote this code to launch the first video : const video = PIXI.Texture.from('img/dc.mp4'); far = new PIXI.extras.TilingSprite(video, 1920, 1080); stage.addChild(far); .... and when i want to replace this video i used this : video.destroy(true); far.destroy(true); var video2 = PIXI.Texture.fromVideo('img/sd9.mp4'); far = new PIXI.extras.TilingSprite(video2, 1920, 1080); stage.addChild(far); it works but i ve some errors in the console : it say : TypeError: this.source is null TypeError: null has no properties and the number of this last error is growing in time ; Can someone explain me what is wrong and what should i do to resolve those errors. i don't know if there is a more simple way to update the video. Thanks, Pierre

Hi I am getting empty screen saying an error that (INVALID_VALUE: tex(Sub)Image2D: video visible size is empty) while playing video in chrome V77.038 but playing as many times without any issue in firefox V 69.02.

Hi Team, I am banging my head against wall from 2 days. I have a video of different sizes. User can crop video (Just showing cropping area on top of video and getting x,y, coordinates of cropping area). End of the day using back end server I will capture cropped video until I have to mask the video as cropped. Lets assume video original size if 720x1280, the size I am going to show may not be with same size (e.g. 520x292). So after cropping done, I will get the x-scale and y-scale using below formula. var scaleX = 520/720; var scaleY = 1280/292; var cropX = croppedX * scaleX; var cropY = croppedY * scaleY; I could able get actual cropping dimensions but I could not understand how to implement scale in pixi sprite to mask as a cropped video. I am using setTransform method but could not meet desired result. let scaleX = (this._assetSprite.width/newMediaData.croppedDimensions.width); let scaleY = (this._assetSprite.height/newMediaData.croppedDimensions.height); this._assetSprite.setTransform (-(newMediaData.croppedDimensions.x * (scaleX)), -(newMediaData.croppedDimensions.y * (scaleY)));

I want to make HTML5 game by using video but not only interactive video. I already tried to use adobe animate(Action script 3), it is work fine but the player need adobe flash to play it. I already tried to use adobe animate(HTML5 canvas) but there is no option to embed video to timeline(sync frame and audio) I need suggestion about game engine or other software that can embed video to timeline and make the button for player to interact with game in some frame.

I'm doing a video tutorial series for Phaser 3 since the only alternatives are paid Zenva courses(which aren't bad but not many can afford). I'm aiming to do videos once a week and if you want to help out, I'll be on discord open to discuss the scripts and what to go over.

Hi All Forgive me if I've missed this, but I can't seem to find any examples or reference to being able to create video game objects / textures. Is this possible please? I am thinking of mp4 or ogg video playing on a game object within the game. Mainly for use in things like interactive product tours etc. I note that the Phaser.Device namespace has a "video" member. I also note that Rich mentioned the video.OnComplete event handler in one of his posts too. So I am wondering if there is support for actual playback too? Thanks very much!

Hi, i can't remove the video with video.destroy. It stop it but, it stay on screen. window.onload = function() { var game = new Phaser.Game(674, 520, Phaser.AUTO, '', { preload : preload }); var aide2; function preload() { game.load.onLoadComplete.add(create, this); game.load.atlasJSONArray('closeAide', 'assets/images/closeAide.png','assets/images/closeAide.json'); game.load.video('aide','assets/video/wormhole.mp4'); } function create() { aide = game.add.video('aide'); aide.play(true); aide.addToWorld(); closeAide = game.add.button(20, 20, 'closeAide',clicCloseAide); } function clicCloseAide() { aide.destroy(); closeAide.destroy(); } } the video is available here : https://phaser.io/examples/v2/video/play-video thanks for your help

Hi everyone.. I'm here again with a fresh question... I'm trying to do create custom loading screen.. A lot of topic inside of the forum anf i have already read document about loading screen, and also i did some thing (you can find PG link below and if you want you can update it) but how we can add a video to the loading screen background i couldn't find a solution or sample, and also i can't count items on the scene... PG Link: https://playground.babylonjs.com/#WV4PLS Somebody can show me the way about this? Thanks in advance..

Hi everyone i'm new guy in here.. I have a problem.. I'm playing a video with videoTexture but i want to make when i clicked to videoTexture to pause video.. I followed this topic: http://www.babylonjs-playground.com/#CHQ4T#5 everyting well but when I click anywhere on the scene video stoping Here is my code var videomat = new BABYLON.StandardMaterial("Videomat", scene); var videoTexture = new BABYLON.VideoTexture("video", ["video/vexpovid.mp4", "video/vexpovid.webm"], scene, true,true); var videobox = BABYLON.MeshBuilder.CreateBox('videobox', optionsVideo, scene); videobox.position.x = -120; videobox.position.y = 300; videobox.position.z = 163; videobox.rotation.y =3.15; videobox.material = videomat; videomat.diffuseTexture = videoTexture; videobox.material = videomat; scene.onPointerDown = function () { //videoTexture.video.play(); if (videoTexture.video.paused){ videoTexture.video.play(); } else { videoTexture.video.pause();}

I am working on a project where I am trying to create an animation of a watercolor effect to 'paint' in an image. The image is dynamic, so rather than using a simple video, I have created a video to use as an alpha mask to apply to the image via Pixi. The area around the visible image needs to be transparent, so I needed to use an alpha mask rather than just covering the image with white pixels. I have attached a full example file with all of the code that I have set up for this, but here's a quick summary of what I've done: Create a texture from video Create a sprite from image Add the image sprite to a container Set 'mask' property of container to be the video texture This worked beautifully, but the one concern that I have is of performance, as there will be other things going on on the page at the same time. A performance audit of the page while the animation is running shows that the main thread is being used for scripting for almost 100% of the time of the entire duration of the animation, which is slightly degrading the performance of things such as scrolling on the page while that is happening. I'm certainly willing to accept that this is simply a very performance intensive animation and that it doesn't get much better than what I've got, however this is my first time using Pixi, so I wanted to seek out some advice about whether I have done this the best way that I can, or if there is anything that I can do to help make this a bit more efficient. Thanks in advance for any help that anyone can offer! If I need to provide any more information or anything like that, just let me know, and I will do my best watercolor-test.html

What is the best way to record/screencast a video of your html5 game? I'm trying out some stuff so I can upload something to YouTube or Vimeo, here is what I've found useful so far. OBS Studio (Open Broadcaster Software) is a fully fledged suite for typical game-streaming stuff, there's a pretty advanced scene builder to arrange game + webcam + chatfeed etc. But it can also simply record a browser window to file as FLV/AVI/MP4. It works great with FireFox, although it seems a little resource intensive. ShotCut can do some simple video editing and the final rendering. It's pretty intuitive and it can do transitions, text/png overlays and even green-screen effects, but no fancy animated titles or sliding an image intro frame AFAIK. Btw I haven't tried Story Remix yet, which is Microsoft's replacement for Windows Movie Maker Has anyone else got any experience with recording their JavaScript game, for a promotional video or something like that?

Hi, I am trying to draw HLS video stream over PIXI video texture on iOS safari browser (iOS 11.2) referring http://pixijs.io/examples/?v=v4.6.2#/basics/video.js but not succeeded. (Sorry for poor English as I am Japanese) When I set mp4 video as source, the demo code worked over iPhone + mobile safari (OS: 11.2). But when I set url of HLS (m3u8) and tapped play button, video did not drawn. I tried some change but not succeeded to play HLS stream over PIXI video texture. Below is my code, modified part of http://pixijs.io/examples/?v=v4.6.2#/basics/video.js . ... function onPlayVideo() { // Don't need the button anymore button.destroy(); /// modify start // mp4 // (1) mp4 OK : video/audio played (#fvlivedemo.gnzo.com is my own server) // var texture = PIXI.Texture.fromVideo('http://fvlivedemo.gnzo.com/testVideo.mp4'); // (2) mp4 OK : video/audio played // var texture = PIXI.Texture.fromVideoUrl('http://fvlivedemo.gnzo.com/testVideo.mp4'); // HLS // (3) Not work : when play button pressed, loading m3u8 not started. // #http://184.72 ... is effective m3u8 stream // var texture = PIXI.Texture.fromVideo('http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8'); // (4) Not work : when play button pressed, loading m3u8 not started. // var texture = PIXI.Texture.fromVideoUrl('http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8'); // (5) Not work : when play button pressed, loading m3u8 started and audio play started. but video is not drawn on canvas. let baseVideoTexture = PIXI.VideoBaseTexture.fromUrl({ src: 'http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8', mime: 'application/vnd.apple.mpegurl' }); var texture = PIXI.Texture.from(baseVideoTexture); /// modify end // create a new Sprite using the video texture (yes it's that easy) var videoSprite = new PIXI.Sprite(texture); ... Please help/guide me regarding right way/manner to play HLS stream over video texture of PIXI. (i.e. how to fix above code) entire HTML which I modified is attached (pixi_video_hls.html) If more information needed for answer, let me know. Thank you in advance. pixi_video_hls.html

Hi guys, Im kinda new here but I need help with Phaser 2 (PhaserCE 2.10.3) and loading videos.. My code is : main.prototype = { preload: function(){ game.load.video("earth_1", "assets/video/earth_1.mp4"); }, create: function(){ var video = game.add.video("earth_1"); video.play(true); video.addToWorld(); var flare = spawner.spawn(g.sprites.flare) var ring = spawner.spawn(g.sprites.ring) var highly_recommended = spawner.spawn(g.sprites.highly_recommended) var logo = spawner.spawn(g.sprites.logo) ... it works fine when I run it in web using a local server.. but when I compile it with cocoon using canvas+, i get an error. using the cocoon developer app i get the errors attached.. i tried my best to google it out and also look at the https://photonstorm.github.io/phaser-ce/ docs as well as the main site but i just cant crack this running out of ideas.. does the video resolution have an effect? im using an .mp4 video as an animated background

Found this and was curious if it-d be Phas3r or not.... unfortunately this doesn't state that it is actually Phas3r... but yeah it is! Anyways posting because there are not that many video tutorials out there

Hi everyone, Video (mp4 or webm) doesn't play on firefox android -> "NS_ERROR_NOT_AVAILABLE" I use Phaser CE v2.10.0 and CANVAS , I unlock the videos before. does not work on examples either : https://phaser.io/examples/v2/video/play-video Thank you in advance !

I'm trying to get video textures to work on mobile devices and I seem to be running into an issue where the video won't autoplay because it doesn't meet the requirements that Apple has laid out here: https://webkit.org/blog/6784/new-video-policies-for-ios/ This can be seen in this playground: http://www.babylonjs-playground.com/#1X8NRY Is there a way to pass custom attributes to the video element that is contained within the video texture? My hypothesis is the absence of the playsinline data attribute on the video element is preventing this from working correctly. @Deltakosh any insight here?