PIXI Movieclips without JSON file.

[Case]

In order to do a Movie Clip in PIXI.js are you required to have a JSON file? Is it possible to have the JSON inside the same file, especially if the movie clip is only a few frames and load the image like you load all other Sprites. The only examples they have of movie clips is a bloated Fighter Jet example. Is this method possible? As MovieClip extends Sprite. I hoped to achieve this because I have multiple images with the exact same frame information and I did not wish to duplicate it all. $(document).ready(function() { PIXI.loader .add('point', rootUrl + "images/games/faction/base_point_sprite.png") .load(start); }); functions start() { }

[ivan.popelyshev]

Why did you copy it from stackoverflow? I had to manually edit your question. Please tell me you're not a bot

[Case]

8 minutes ago, ivan.popelyshev said:

Why did you copy it from stackoverflow? I had to manually edit your question. Please tell me you're not a bot

Just a guy trying to get help.  You built the dev branch that I am using, so Thank you.  I was told that it was better to post here than on stack.

Is there some kind of Generator I am suppose to use for the JSON files? 

[ivan.popelyshev]

Ok  That depends on how did you create that json file. Did you use texturepacker of shoebox or something like that? Its possible to specify atlas without JSON file, just in plain text or js code, but I have to ask others how to do that, I dont actually remember

[Case]

1 minute ago, ivan.popelyshev said:

Ok  That depends on how did you create that json file. Did you use texturepacker of shoebox or something like that? Its possible to specify atlas without JSON file, just in plain text or js code, but I have to ask others how to do that, I dont actually remember

I just looked at the examples given by goodboy and off their own site, and wrote my own JSON.

[ivan.popelyshev]

In that case, you dont have to do it through json

 

loader.add('stuff.png');

//by the way, that thing calls only ONE TIME per loader. If you want to make several "loads", add this callback to "add" and not "load"
loader.load(function(loader, resources) {
    var baseTex = resources["stuff.png"].texture.baseTexture
    var tex1 = new PIXI.Texture(new PIXI.Rectangle(0, 0, 100, 100));
    var tex2 = new PIXI.Texture(new PIXI.Rectangle(100, 0, 100, 100));
    var tex3 = new PIXI.Texture(new PIXI.Rectangle(200, 0, 100, 100));
    var tex4 = new PIXI.Texture(new PIXI.Rectangle(0, 100, 100, 100));
    var tex5 = new PIXI.Texture(new PIXI.Rectangle(100, 100, 100, 100));
    var tex6 = new PIXI.Texture(new PIXI.Rectangle(200, 100, 100, 100));
    
});

 

That's 2 rows, each 3 textures of 100x100 size. BaseTexture is the wrapper over Image that was loaded, while Texture has link to BaseTexture and rectangle coordinates of it that must be shown.

[Case]

Okay, I do not entirely understand how to do that.

 

PIXI.loader
			//.add(rootUrl + 'assets/apps/war/solar-point.json')
			.add('barBg', rootUrl + "images/games/percentImage_light.png")
			.add('barColor', rootUrl + "images/games/green_health.png")
			.add('point', rootUrl + "images/games/faction/base_point_sprite.png")

 

 

Okay, so point is what I want to make this out of. 

 

PIXI.loader
	//.add(rootUrl + 'assets/apps/war/solar-point.json')
	.add('barBg', rootUrl + "images/games/percentImage_light.png")
	.add('barColor', rootUrl + "images/games/green_health.png")
	.add(function (l,r) {
              var sp = r[rootUrl + "images/games/faction/base_point_sprite.png"].texture.baseTexture
              var sp0 = new PIXI.Texture(new PIXI.Rectangle(0, 0, 60, 105)); // 60w 105h
              var sp1 = new PIXI.Texture(new PIXI.Rectangle(60, 0, 60, 105)); // 60w 105h
              var sp2 = new PIXI.Texture(new PIXI.Rectangle(120, 0, 60, 105)); // 60w 105h
              var sp3 = new PIXI.Texture(new PIXI.Rectangle(180, 0, 60, 105)); // 60w 105h
              var sp4 = new PIXI.Texture(new PIXI.Rectangle(240, 0, 60, 105)); // 60w 105h
              

         }).load(start);

start() {
     var frames = [];
		for (var i = 0; i < 6; i++) {
			frames.push(PIXI.Texture.fromFrame('sp' + i + '.png'));
		}
		movie = new PIXI.extras.MovieClip(frames);
		movie.position.set(300);

		movie.anchor.set(0.5);
		movie.animationSpeed = 0.5;
		movie.play();
}

 

[Case]

In trying that, I received Error: No url passed to add resource to loader.

[Case]

If anyone can help me I would appreciate it.

[Fatalist]

PIXI.loader
	//.add(rootUrl + 'assets/apps/war/solar-point.json')
	.add('barBg', rootUrl + "images/games/percentImage_light.png")
	.add('barColor', rootUrl + "images/games/green_health.png");
    
PIXI.loader.once('complete', start);

PIXI.loader.load();

functuion start() {
....
}

 

[Case]

1 hour ago, Fatalist said:

PIXI.loader
	//.add(rootUrl + 'assets/apps/war/solar-point.json')
	.add('barBg', rootUrl + "images/games/percentImage_light.png")
	.add('barColor', rootUrl + "images/games/green_health.png");
    
PIXI.loader.once('complete', start);

PIXI.loader.load();

functuion start() {
....
}

I am sorry if I do not understand, but I do not see how this helps at all.  You are simply telling me not to anything, just comment out the json.  I need help with the movie clip.

 

Also, for argument sake I tried your method and the same error persists. 

[Case]

PIXI.loader
	//.add(rootUrl + 'assets/apps/war/solar-point.json')
	.add('barBg', rootUrl + "images/games/percentImage_light.png")
	.add('barColor', rootUrl + "images/games/green_health.png")
	.add('point', rootUrl + "images/games/faction/base_point_sprite.png")
	.load(function (loader,resources) {
		
		var sp = resources['point'].texture.baseTexture;
		console.log(resources, sp);
		var sp0 = new PIXI.Texture(new PIXI.Rectangle(0, 0, 60, 105)); // 60w 105h
		var sp1 = new PIXI.Texture(new PIXI.Rectangle(60, 0, 60, 105)); // 60w 105h
		var sp2 = new PIXI.Texture(new PIXI.Rectangle(120, 0, 60, 105)); // 60w 105h
		var sp3 = new PIXI.Texture(new PIXI.Rectangle(180, 0, 60, 105)); // 60w 105h
		var sp4 = new PIXI.Texture(new PIXI.Rectangle(240, 0, 60, 105)); // 60w 105h
	 });
	
	PIXI.loader.once('complete', start);

This has some moderate success.   However, once it has point all other lines cause it to say " TypeError: baseTexture.once is not a function "

[Fatalist]

28 minutes ago, Case said:

I am sorry if I do not understand, but I do not see how this helps at all. 

You had an error at  ".add(function (l,r) {", that's what I was pointing out.

[Fatalist]

27 minutes ago, Case said:

new PIXI.Texture(new PIXI.Rectangle(120, 0, 60, 105));

Texture constructor needs a BaseTexture as the first argument.

So you need "new PIXI.Texture(sp, new PIXI.Rectangle(120, 0, 60, 105));"

[Case]

20 minutes ago, Fatalist said:

You had an error at  ".add(function (l,r) {", that's what I was pointing out.

Yeah, I just write it short like that, because I coded it in this window then copied it over.

17 minutes ago, Fatalist said:

Texture constructor needs a BaseTexture as the first argument.

So you need "new PIXI.Texture(sp, new PIXI.Rectangle(120, 0, 60, 105));"

Thank you, I'll give that a go now.  I had been playing with it trying to figure it out.  So, after I made this new Texture, how do I store it?  Aka put it into the resources?

[Case]

This is what I am attempting to do now, as it makes the most sense to me, if I am wrong please tell me and I will do it another method.

 

AFTER the load inside start.

 

var frames = [];
		var sp = PIXI.loader.resources['point'].texture.baseTexture;
		frames.push(new PIXI.Texture(sp, new PIXI.Rectangle(0, 0, 60, 105))); // 60w 105h
		frames.push(new PIXI.Texture(sp, new PIXI.Rectangle(60, 0, 60, 105))); // 60w 105h
		frames.push(new PIXI.Texture(sp, new PIXI.Rectangle(120, 0, 60, 105))); // 60w 105h
		frames.push(new PIXI.Texture(sp, new PIXI.Rectangle(180, 0, 60, 105))); // 60w 105h
		frames.push(new PIXI.Texture(sp, new PIXI.Rectangle(240, 0, 60, 105))); // 60w 105h
		
		/* for (var i = 0; i < 6; i++) {
			frames.push(PIXI.Texture.fromFrame('sp' + i + '.png'));
		}*/ 
		movie = new PIXI.extras.MovieClip(frames);
		movie.position.set(300);

		movie.anchor.set(0.5);
		movie.animationSpeed = 0.5;
		movie.play();

 

[ivan.popelyshev]

Yep, that's fine.